@charset "UTF-8";
@keyframes gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

body.request #titlewrapper #title,
body.process #titlewrapper #title {
  background-color: transparent; }

/*
-------------------------------------------------------------------------------
Page Elements
-------------------------------------------------------------------------------
*/
.btn-link {
  text-decoration: none !important;
  color: #3F51B5;
  font-family: "Open Sans", sans-serif;
  font-size: inherit;
  border: none;
  cursor: pointer; }

.no-link {
  pointer-events: none;
  cursor: default;
  color: #BDBDBD !important; }
  .no-link i {
    color: #BDBDBD !important; }

.display-tooltip {
  pointer-events: all !important; }

/*
.small-quick-links {
    text-align: right;
    padding: 0 0 0.5em;
    font-size: 0.7rem;
    a {
        margin: 0 0.5em;
        &:hover {
            color: lighten($app-primary, 10%);
        }
    }
}
*/
img {
  max-width: 100%;
  height: auto;
  margin-right: 5px; }

/*
h2 {
    i {
        color: $google-orange-500;
    }
}
*/
::selection {
  background-color: #3F51B5;
  color: #fff; }

ol > li {
  padding: 0.2em; }

.bold {
  font-weight: bold; }

.warning-message {
  text-indent: -4.3em;
  padding-left: 4.3em; }

/***********Common************/
hr {
  border-top: 1px solid #E0E0E0; }

.dead-opac {
  opacity: 0.65; }

.drop-selection {
  cursor: not-allowed !important; }

.pad-sm {
  padding: 0.4em; }

.marg-top-md {
  margin-top: 7px; }

.marg-top-lg {
  margin-top: 12px; }

.marg-rgt-sm {
  margin-right: 5px !important; }

.no-border {
  border: 0; }

.transparent-bg {
  background-color: transparent; }

.modal-xl {
  width: 85%;
  max-width: none; }

.list-unstyled li {
  margin-bottom: 0.8em; }
  .list-unstyled li.list-bottom-border {
    border-bottom: 1px solid #E0E0E0;
    padding: 0 0 0.5em 0.2em; }
    .list-unstyled li.list-bottom-border:first-child {
      border-bottom: 2px solid #E0E0E0; }
    .list-unstyled li.list-bottom-border input {
      margin-right: 4px; }

#main-content {
  transition: margin-left 0.5s; }

#main-container {
  position: relative;
  top: 0;
  height: 100%; }

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto !important;
  margin-left: auto !important; }

#content {
  padding-bottom: 2em;
  margin: 2em 0 0 0; }
  #content .content {
    background-color: #ffffff;
    padding: 1em;
    border: 1px solid #E0E0E0;
    border-top: 0; }
  #content .contentwithborder {
    background-color: #ffffff;
    padding: 1em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    margin-bottom: 2em; }
    #content .contentwithborder h3 {
      margin-top: 5px; }
  #content .page-header {
    border: 0;
    margin-top: 0; }
    #content .page-header h1 {
      color: #777777;
      font-size: 36px; }
  #content .file-icon:before {
    content: "\f016";
    font-family: "FontAwesome"; }

a.remove:hover:after {
  content: "\f057";
  color: #F44336;
  font-family: "FontAwesome";
  margin-left: 0.7em; }

.collapse .avatar {
  margin-bottom: 0.5em; }

.quick-links {
  text-align: right; }
  .quick-links a {
    color: #9E9E9E;
    margin: 0 0.5em; }
    .quick-links a:hover {
      color: #1976D2; }

.strikethrough {
  text-decoration: line-through !important; }

.no-pad-container {
  background-color: #c6c9ca;
  padding: 0 !important; }

.medium {
  font-size: 92%; }

span.formnonrequired {
  display: none; }

.pop-over {
  max-height: 360px;
  overflow-y: auto;
  max-width: 360px;
  min-width: 360px; }
  .pop-over .rc-collapse-item .rc-collapse-header {
    border-bottom: 2px solid #E0E0E0;
    padding: 0.5em 1em;
    cursor: pointer; }
  .pop-over .rc-collapse-item .rc-collapse-content-active {
    padding: 0.5em 1em 0 4em;
    background-color: #F5F5F5; }
    .pop-over .rc-collapse-item .rc-collapse-content-active .rc-collapse-content-box > div {
      border-bottom: 2px solid #E0E0E0; }
    .pop-over .rc-collapse-item .rc-collapse-content-active .rc-collapse-content-box p {
      border-bottom: 1px solid #E0E0E0;
      line-height: 1.5;
      padding: 0.5em 0; }
  .pop-over .rc-collapse-item .list-collapse:before {
    border-style: solid;
    border-width: 0.185em 0.185em 0 0;
    content: "";
    width: 0.56em;
    height: 0.56em;
    left: 0;
    margin: 0 0.8em 0 0.4em;
    position: relative;
    float: left;
    top: 10px;
    transform: rotate(45deg);
    color: #9E9E9E;
    transition: all 0.1s linear; }
  .pop-over .rc-collapse-item .list-collapse.list-collpase-pad {
    padding: 0.5em 0; }
  .pop-over .rc-collapse-item .list-collapse .truncate-text__container {
    width: 265px;
    float: left;
    line-height: 2; }
  .pop-over .rc-collapse-item-active .list-collapse:before {
    transform: rotate(135deg);
    transition: all 0.1s linear;
    color: #424242; }

.truncate-text__dots {
  margin-left: 5px;
  cursor: pointer; }

h2.head-subhead span {
  font-size: 24px; }

.icon-base i {
  background-color: #FFFFFF;
  padding: 5px 7px;
  border-radius: 50%;
  border: 1px solid #3F51B5;
  margin: 0 0.2em;
  display: inline-block;
  color: #3F51B5; }
  .icon-base i.fa-question {
    padding: 6px 9px; }
  .icon-base i:hover {
    color: #606fc7;
    border: 1px solid #606fc7; }
  .icon-base i.fa-users {
    color: #9E9E9E;
    border: 1px solid #9E9E9E; }

.icon-base.medium .fa-users {
  font-size: 1.4rem;
  height: 40px;
  width: 40px;
  padding: 0.35em;
  margin: 0 5px 0 0; }
  .icon-base.medium .fa-users:hover {
    color: #9E9E9E;
    border: 1px solid #9E9E9E; }

.userImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #9E9E9E;
  max-width: 40px; }

/*Show more Show Less style*/
.js-overflow-wrapper {
  max-height: 100%;
  overflow: auto;
  transition: height 0.2s linear; }
  .js-overflow-wrapper.collapsed {
    overflow: hidden;
    transition: height 0.2s linear;
    max-height: 140px; }
    .js-overflow-wrapper.collapsed + .show-more a {
      padding: 0 0.5em;
      font-size: 90%;
      margin-bottom: 1em; }
      .js-overflow-wrapper.collapsed + .show-more a:after {
        font-family: "FontAwesome";
        content: "\f078";
        padding: 0 0.2em; }
  .js-overflow-wrapper + .show-more a {
    padding: 0 0.5em;
    font-size: 90%;
    margin-bottom: 1em; }
    .js-overflow-wrapper + .show-more a:after {
      font-family: "FontAwesome";
      content: "\f077";
      padding: 0 0.2em; }

/***Remove later***/
.grey-panel {
  font-size: 0.82rem;
  background-color: #FAFAFA;
  margin-bottom: 1em; }

/*Responsive Iframe*/
/*
.videoWrapper {
    position: relative;
    padding-bottom: 46.25%;
    overflow: hidden;
    height: 0;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
*/
iframe.hidden {
  display: none; }

#file-picker-tab .table-section {
  margin-top: 3em; }

/**File stack modal**/
.mce-window.mce-in,
.mce-float-panel {
  z-index: 10000 !important; }

.mce-fade.mce-in {
  z-index: 1 !important; }

.flush-margin {
  margin: 0 !important; }
  .flush-margin:before {
    margin: 0 !important; }
  .flush-margin:after {
    margin: 0 !important; }

img[src="/favicon.ico"] {
  visibility: hidden;
  padding: 0 !important;
  box-shadow: none !important;
  height: 1px !important;
  width: 1px !important; }

body.dark hr {
  border-top: 1px solid #616161; }

/* 
Brand

Styleguide Brand
*/
/* 
Color

This is the color palette for the application, based on Google Material Design colors.

Colors:
primary:			#3F51B5 - primary, GMD Indigo 500
secondary:			#FF9800 - secondary, GMD Orange 500
info:				#2196F3 - info, GMD Blue 500
danger:				#F44336 - danger, GMD Red 500
warning:			#FF9800 - warning, GMD Orange 500
success:			#4CAF50 - success, GMD Green 500
inverse:			#000000 - inverse, GMD Black
light:				#3F51B5 - secondary color
dark:				#3F51B5 - secondary color

Styleguide Brand.Color
*/
/* 
Dr. Hoo and His Companions

Usage of Dr. Hoo and his companions should be one of the following:

<div class="panel panel-default">
    <div class="panel-body">
        <img src="https://iwcdn.s3.amazonaws.com/pipeline/owlberts.png" />
    </div>
</div>

Styleguide Brand.DrHoo
*/
/*Landing page list box*/
.col-md-8.kpis-steps-due-now-offset {
  width: 66.66666667%;
  float: left; }

.col-md-3.kpis-steps-due-now-offset {
  width: 25%;
  float: left; }
  .col-md-3.kpis-steps-due-now-offset.col-md-offset-1 {
    margin-left: 8.33333333%; }

.card.card-flows-used .card-body ul {
  list-style: none;
  margin: 0;
  padding: 0; }
  .card.card-flows-used .card-body ul li:before {
    content: "\f055";
    font-family: "FontAwesome";
    margin-right: 5px;
    color: #3F51B5; }
  .card.card-flows-used .card-body ul li:hover:before {
    color: #3F51B5; }

.card.card-steps-due .card-body ul {
  list-style: none;
  margin: 0;
  padding: 0; }
  .card.card-steps-due .card-body ul li:before {
    content: "\f1d9";
    font-family: "FontAwesome";
    margin-right: 5px;
    color: #3F51B5; }

.card.card-steps-due .card-body .request-due-view-more {
  text-align: center; }

.card.card-steps-due .card-body .card-message-guide {
  min-height: 125px;
  height: 100%; }

.card.card-steps-due .requests-due[data-useduedates="0"] .due-dates {
  display: none; }

.card.card-steps-due .requests-due[data-isadhoc="1"] .due-dates {
  display: none; }

.card.card-steps-due .requests-due .step-info {
  display: block;
  margin-top: 0.15rem;
  margin-bottom: 0.75rem;
  line-height: 1.2em; }
  .card.card-steps-due .requests-due .step-info .due-dates {
    margin-left: 15px; }
    .card.card-steps-due .requests-due .step-info .due-dates[data-ispastdue="0"] .step-pastdue {
      display: none; }

@media (max-width: 767.98px) {
  .app-home .panel .panel-body .kpis-steps-due-now-offset {
    width: 100%; }
    .app-home .panel .panel-body .kpis-steps-due-now-offset .kpi-bar {
      display: none; }
    .app-home .panel .panel-body .kpis-steps-due-now-offset .col-md-3 {
      float: none;
      width: 100%;
      margin-left: 0;
      padding-left: 0;
      padding-right: 0; }
  .app-home .salutation + p {
    margin-bottom: 0; } }

/*Flip circle for Submit a Request*/
.flip-container-group {
  margin: 1.5em 0;
  width: 166px; }
  .flip-container-group .flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000; }
    .flip-container-group .flip-container:hover .flipper, .flip-container-group .flip-container.hover .flipper {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg); }
  .flip-container-group .flip-container, .flip-container-group .front, .flip-container-group .back {
    width: 166px;
    height: 166px;
    border-radius: 50%; }
  .flip-container-group .flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative; }
  .flip-container-group .front, .flip-container-group .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    border: 3px solid #ffffff; }
  .flip-container-group .front {
    z-index: 2;
    transform: rotateY(0deg); }
  .flip-container-group .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background: #f8f8f8;
    display: flex;
    justify-content: center;
    /* align horizontal */
    align-items: center; }
    .flip-container-group .back p {
      text-align: center;
      padding: 10px 20px 0;
      line-height: 1.1;
      font-size: .82rem; }
  .flip-container-group .img-thumbnail-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%; }
  .flip-container-group h4 {
    text-align: center; }

/***Edit Workflow***/
#manage-process .manage-request-form {
  padding-left: 15px; }
  #manage-process .manage-request-form .process-overview {
    min-height: 429px; }
  #manage-process .manage-request-form .sm-block {
    min-height: 208px;
    position: relative; }
  #manage-process .manage-request-form .common-block {
    margin-bottom: 12px;
    background-color: #ffffff;
    padding: 1em; }
    #manage-process .manage-request-form .common-block:hover {
      background-color: #f7e9d6;
      webkit-transition: background-color 0.3s ease-in-out;
      -moz-transition: background-color 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out; }
  #manage-process .manage-request-form .block-button {
    position: absolute;
    bottom: 9px; }
  #manage-process .manage-request-form .process-desc {
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 5px; }

/* 
Component: Tile: Readonly

Tiles can be made readonly by adding `data-is-readonly="1"`, ex: `<div class="panel" data-is-readonly="1">`

### Standard UX Behavior

- Action links are deactive
- Hover-only actions links will not be displayed

Weight: 100

Styleguide ComponentTileReadonly
*/
/* 
Body Action Bar

Markup: tile-readonly.hbs

Weight: 100

Styleguide ComponentTileReadonly.BodyActionBar
*/
[data-is-readonly='1'] a {
  /* Provide the ability for an <a> tag to opt out being readonly when in readonly mode.
        /* We may want some readonly links to function normally in readonly mode.
        /* For ex: View Instructions for PL workflow steps. */ }
  [data-is-readonly='1'] a:not([data-ignore-readonly-mode='1']) {
    color: #9E9E9E !important;
    pointer-events: none; }
    [data-is-readonly='1'] a:not([data-ignore-readonly-mode='1']).cell-css.cell-numericyesno:not([data-value='0']):before {
      color: #9E9E9E; }
  [data-is-readonly='1'] a[data-ignore-readonly-mode="1"] + .modal-container a {
    pointer-events: initial; }
    [data-is-readonly='1'] a[data-ignore-readonly-mode="1"] + .modal-container a.btn {
      color: #FFFFFF; }

[data-is-readonly='1'] > .panel > .panel-body > .panel-actions {
  position: relative;
  z-index: 1; }

[data-is-readonly='1'] .process-remove-field {
  pointer-events: none; }

[data-is-readonly='1'] .timeline .timeline-panel {
  background-color: #F5F5F5;
  cursor: default; }
  [data-is-readonly='1'] .timeline .timeline-panel:hover .panel-actions a {
    display: none !important; }
  [data-is-readonly='1'] .timeline .timeline-panel .js-modal {
    display: none; }

[data-is-readonly='1'] .table.table-swimlane .panel .panel-body {
  min-height: auto; }

/* 
Component: Tile: Deactivated

Tiles can be deactivated by adding `data-is-deactivated="1"`, ex: `<div class="panel" data-is-deactivated="1">`

### Standard UX Behavior

- Action links are deactivated
- Hover-only actions links will not be displayed

Weight: 100

Styleguide ComponentTileDeactivated
*/
/* 
Body Action Bar

Markup: tile-deactive.hbs

Weight: 100

Styleguide ComponentTileDeactivated.BodyActionBar
*/
[data-is-deactivated='1'] a:not([data-ignore-deactivated-mode='1']) {
  color: #9E9E9E !important;
  pointer-events: none; }
  [data-is-deactivated='1'] a:not([data-ignore-deactivated-mode='1']).cell-css.cell-numericyesno:not([data-value='0']):before {
    color: #9E9E9E; }

[data-is-deactivated='1'] .nav li a {
  pointer-events: initial; }

[data-is-deactivated='1'] .add-follower-select-container {
  pointer-events: none; }

/* 
UX: User Tours

For application user tours, we use [Appcues](https://studio.appcues.com/).

Weight: 300

Styleguide UXUserTours
*/
/* 
Element: Alerts

Wrapper for Bootstrap alerts

Markup:
<div class="alert {{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

.alert-primary		- &nbsp;
.alert-secondary	- &nbsp;
.alert-info			- &nbsp;
.alert-warning		- &nbsp;
.alert-danger		- &nbsp;
.alert-success		- &nbsp;
.alert-inverse		- &nbsp;
.alert-light		- &nbsp;
.alert-dark			- &nbsp;

Styleguide ElementAlerts
*/
/* 
Elements

Alerts with elements

Markup:
<div class="alert {{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="label label-inverse">label</span> <a href="">inline link</a> <a class="btn btn-xs btn-primary" href="">Primary</a>  <a class="btn btn-xs btn-secondary" href="">Secondary</a></div>

.alert-primary		- &nbsp;
.alert-secondary	- &nbsp;
.alert-info			- &nbsp;
.alert-warning		- &nbsp;
.alert-danger		- &nbsp;
.alert-success		- &nbsp;
.alert-inverse		- &nbsp;
.alert-light		- &nbsp;
.alert-dark			- &nbsp;

Weight: 42

Styleguide ElementAlerts.Elements
*/
/* 
Block Alerts

Block alerts with a title

Markup:
<div class="alert alert-block {{modifier_class}}">
	<h4>Heading title</h4> 
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

.alert-primary		- &nbsp;
.alert-secondary	- &nbsp;
.alert-info			- &nbsp;
.alert-warning		- &nbsp;
.alert-danger		- &nbsp;
.alert-success		- &nbsp;
.alert-inverse		- &nbsp;
.alert-light		- &nbsp;
.alert-dark			- &nbsp;

Styleguide ElementAlerts.Block
*/
/* 
Popup Alerts

Wrapper for Noty popups

### Standard UX Behavior

- Popup alerts appear by sliding up into view from the bottom, right corner of the screen

Markup:
<ul id="noty_bottomRight_layout_container" style="margin:0; padding:0; list-style:none;">
	<li class="alert  {{modifier_class}}" style="width: 500px;">
		<div class="noty_bar noty_type_success">
			<div class="noty_message">
				<span class="noty_text">
					<h4>Popup Title</h4>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				</span>
			</div>
		</div>
	</li>
</ul>

.alert-primary		- &nbsp;
.alert-secondary	- &nbsp;
.alert-info			- &nbsp;
.alert-warning		- &nbsp;
.alert-danger		- &nbsp;
.alert-success		- &nbsp;
.alert-inverse		- &nbsp;
.alert-light		- &nbsp;
.alert-dark			- &nbsp;

Styleguide ElementAlerts.Popups
*/
/* 
Element: Popups

Wrapper for Bootstrap alerts and Noty alerts

### Components

- [`Popup Alerts`](section-elementalerts.html#kssref-elementalerts-popups)

Markup: popup.hbs

Styleguide ElementPopups
*/
.alert {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  font-weight: bold;
  border-radius: 0.5rem; }
  .alert .label {
    font-size: 100%; }
  .alert:before {
    font-family: 'FontAwesome';
    margin-right: 5px;
    font-weight: normal; }
  .alert > a.btn {
    position: relative;
    top: -1px;
    margin: 0 0.25rem; }
  .alert.alert-primary {
    background-color: #9FA8DA;
    border-color: #7986CB; }
    .alert.alert-primary:before {
      color: #252f69;
      content: "\f05a"; }
    .alert.alert-primary > a {
      color: #252f69; }
      .alert.alert-primary > a:hover {
        color: #252f69; }
      .alert.alert-primary > a.btn {
        color: #FFFFFF; }
    .alert.alert-primary button.close {
      text-shadow: none; }
  .alert.alert-success {
    background-color: #A5D6A7;
    border-color: #81C784; }
    .alert.alert-success:before {
      color: #255827;
      content: "\f046"; }
    .alert.alert-success > a {
      color: #255827; }
      .alert.alert-success > a:hover {
        color: #255827; }
      .alert.alert-success > a.btn {
        color: #FFFFFF; }
    .alert.alert-success button.close {
      text-shadow: none; }
  .alert.alert-warning {
    background-color: #FFCC80;
    border-color: #FFB74D; }
    .alert.alert-warning:before {
      color: #955300;
      content: "\f071"; }
    .alert.alert-warning > a {
      color: #10538d; }
      .alert.alert-warning > a:hover {
        color: #955300; }
      .alert.alert-warning > a.btn {
        color: #FFFFFF; }
    .alert.alert-warning button.close {
      text-shadow: none; }
  .alert.alert-danger {
    background-color: #EF9A9A;
    border-color: #E57373; }
    .alert.alert-danger:before {
      color: #9f1815;
      content: "\f071"; }
    .alert.alert-danger > a {
      color: #9f1815; }
      .alert.alert-danger > a:hover {
        color: #9f1815; }
      .alert.alert-danger > a.btn {
        color: #FFFFFF; }
    .alert.alert-danger button.close {
      text-shadow: none; }
  .alert.alert-info {
    background-color: #90CAF9;
    border-color: #64B5F6; }
    .alert.alert-info:before {
      color: #10538d;
      content: "\f05a"; }
    .alert.alert-info > a {
      color: #10538d; }
      .alert.alert-info > a:hover {
        color: #10538d; }
      .alert.alert-info > a.btn {
        color: #FFFFFF; }
    .alert.alert-info button.close {
      text-shadow: none; }
  .alert.alert-inverse {
    color: #FFFFFF;
    background-color: #424242;
    border-color: #212121; }
    .alert.alert-inverse:before {
      color: #FFFFFF;
      content: "\f05a"; }
    .alert.alert-inverse > a {
      color: #FFFFFF; }
      .alert.alert-inverse > a:hover {
        color: #FFFFFF; }
      .alert.alert-inverse > a.btn {
        color: #FFFFFF; }
    .alert.alert-inverse button.close {
      text-shadow: none; }
  .alert.alert-light {
    background-color: #E0E0E0;
    border-color: #BDBDBD; }
    .alert.alert-light:before {
      color: #424242;
      content: "\f05a"; }
    .alert.alert-light > a {
      color: #424242; }
      .alert.alert-light > a:hover {
        color: #424242; }
      .alert.alert-light > a.btn {
        color: #424242; }
    .alert.alert-light button.close {
      text-shadow: none; }
  .alert.alert-dark {
    color: #FFFFFF;
    background-color: #616161;
    border-color: #424242; }
    .alert.alert-dark:before {
      color: #FFFFFF;
      content: "\f05a"; }
    .alert.alert-dark > a {
      color: #FFFFFF; }
      .alert.alert-dark > a:hover {
        color: #FFFFFF; }
      .alert.alert-dark > a.btn {
        color: #FFFFFF; }
    .alert.alert-dark button.close {
      text-shadow: none; }
  .alert.alert-block:before {
    display: none;
    content: ""; }
  .alert.alert-block h4 {
    font-size: 1.2rem;
    border-bottom-width: 1px; }
    .alert.alert-block h4:before {
      font-family: 'FontAwesome';
      content: "\f05a";
      margin-right: 5px; }
  .alert.alert-block p:last-child {
    margin-bottom: 0; }
  .alert.animated.fadeInDown {
    animation-duration: 350ms; }
  .alert.alert-animated {
    animation-fill-mode: both;
    animation-duration: 8s;
    animation-name: shake;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; }

#noty_bottomRight_layout_container .alert,
.noty_bottomRight_layout_container .alert,
#noty_bottomCenter_layout_container .alert,
.noty_bottomCenter_layout_container .alert {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  animation-delay: 0s;
  padding: 0;
  border-radius: 0; }
  #noty_bottomRight_layout_container .alert:before,
  .noty_bottomRight_layout_container .alert:before,
  #noty_bottomCenter_layout_container .alert:before,
  .noty_bottomCenter_layout_container .alert:before {
    display: none; }
  #noty_bottomRight_layout_container .alert .noty_bar,
  .noty_bottomRight_layout_container .alert .noty_bar,
  #noty_bottomCenter_layout_container .alert .noty_bar,
  .noty_bottomCenter_layout_container .alert .noty_bar {
    font-weight: normal; }
    #noty_bottomRight_layout_container .alert .noty_bar .noty_message,
    .noty_bottomRight_layout_container .alert .noty_bar .noty_message,
    #noty_bottomCenter_layout_container .alert .noty_bar .noty_message,
    .noty_bottomCenter_layout_container .alert .noty_bar .noty_message {
      padding: 2.8rem 1rem 1rem 1rem; }
      #noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text .noty_datetime,
      .noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text .noty_datetime,
      #noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text .noty_datetime,
      .noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text .noty_datetime {
        float: right;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        color: #424242;
        padding: 0.5rem 1rem; }
      #noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text h4,
      .noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text h4,
      #noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text h4,
      .noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text h4 {
        position: absolute;
        padding: .5rem 1rem;
        color: #424242;
        font-size: 1rem;
        width: 100%;
        top: 0;
        left: 0;
        margin-top: 0; }
  #noty_bottomRight_layout_container .alert.alert-primary h4,
  .noty_bottomRight_layout_container .alert.alert-primary h4,
  #noty_bottomCenter_layout_container .alert.alert-primary h4,
  .noty_bottomCenter_layout_container .alert.alert-primary h4 {
    background-color: #7986CB; }
  #noty_bottomRight_layout_container .alert.alert-success h4,
  .noty_bottomRight_layout_container .alert.alert-success h4,
  #noty_bottomCenter_layout_container .alert.alert-success h4,
  .noty_bottomCenter_layout_container .alert.alert-success h4 {
    background-color: #81C784; }
  #noty_bottomRight_layout_container .alert.alert-warning h4,
  .noty_bottomRight_layout_container .alert.alert-warning h4,
  #noty_bottomCenter_layout_container .alert.alert-warning h4,
  .noty_bottomCenter_layout_container .alert.alert-warning h4 {
    background-color: #FFB74D; }
  #noty_bottomRight_layout_container .alert.alert-danger h4,
  .noty_bottomRight_layout_container .alert.alert-danger h4,
  #noty_bottomCenter_layout_container .alert.alert-danger h4,
  .noty_bottomCenter_layout_container .alert.alert-danger h4 {
    background-color: #E57373; }
  #noty_bottomRight_layout_container .alert.alert-info h4,
  .noty_bottomRight_layout_container .alert.alert-info h4,
  #noty_bottomCenter_layout_container .alert.alert-info h4,
  .noty_bottomCenter_layout_container .alert.alert-info h4 {
    background-color: #64B5F6; }
  #noty_bottomRight_layout_container .alert.alert-inverse h4,
  .noty_bottomRight_layout_container .alert.alert-inverse h4,
  #noty_bottomCenter_layout_container .alert.alert-inverse h4,
  .noty_bottomCenter_layout_container .alert.alert-inverse h4 {
    background-color: #212121; }
  #noty_bottomRight_layout_container .alert.alert-light h4,
  .noty_bottomRight_layout_container .alert.alert-light h4,
  #noty_bottomCenter_layout_container .alert.alert-light h4,
  .noty_bottomCenter_layout_container .alert.alert-light h4 {
    background-color: #BDBDBD; }
  #noty_bottomRight_layout_container .alert.alert-dark h4,
  .noty_bottomRight_layout_container .alert.alert-dark h4,
  #noty_bottomCenter_layout_container .alert.alert-dark h4,
  .noty_bottomCenter_layout_container .alert.alert-dark h4 {
    background-color: #424242; }

#noty_bottomCenter_layout_container .alert,
.noty_bottomCenter_layout_container .alert {
  min-height: auto !important; }
  #noty_bottomCenter_layout_container .alert .noty_bar .noty_message,
  .noty_bottomCenter_layout_container .alert .noty_bar .noty_message {
    padding: 2rem 1rem 0 1rem !important; }
    #noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text h4,
    .noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text h4 {
      margin-bottom: 0 !important;
      font-size: 1em !important; }

.dark .alert.alert-light {
  background-color: #424242; }

/* 
Element: Badges

Wrapper for Bootstrap badges

Markup:
<span class="badge {{modifier_class}}">Badge</span>

.badge-primary		- &nbsp;
.badge-secondary	- &nbsp;
.badge-info			- &nbsp;
.badge-warning		- &nbsp;
.badge-danger		- &nbsp;
.badge-success		- &nbsp;
.badge-inverse		- &nbsp;
.badge-light		- &nbsp;
.badge-dark			- &nbsp;

Styleguide ElementBadges
*/
.badge {
  margin-left: 0.5em;
  padding-left: 0.6em;
  padding-right: 0.6em;
  position: relative;
  top: -1px;
  border-radius: 10rem;
  position: relative; }
  .badge.badge-primary {
    color: #FFFFFF;
    background-color: #3F51B5; }
  .badge.badge-secondary {
    color: #FFFFFF;
    background-color: #757575; }
  .badge.badge-success {
    color: #FFFFFF;
    background-color: #43A047; }
  .badge.badge-warning {
    color: #FFFFFF;
    background-color: #FB8C00; }
  .badge.badge-danger {
    color: #FFFFFF;
    background-color: #F44336; }
  .badge.badge-info {
    color: #FFFFFF;
    background-color: #1E88E5; }
  .badge.badge-inverse {
    color: #FFFFFF;
    background-color: #212121; }
  .badge.badge-light {
    color: #FFFFFF;
    background-color: #BDBDBD; }
  .badge.badge-dark {
    color: #FFFFFF;
    background-color: #616161; }
  .badge.badge-orange {
    color: #FFFFFF;
    background-color: #FF9800; }
  .badge.badge-step-default {
    color: #9E9E9E;
    background-color: #FAFAFA;
    border: 1px solid #9E9E9E; }
  .badge.badge-muted {
    color: #FFFFFF;
    background-color: #9E9E9E; }
  .badge.badge-border {
    font-weight: normal;
    border: 1px solid #E0E0E0;
    background-color: #FFF;
    color: #3F51B5; }
  .badge.badge-shake {
    animation-fill-mode: both;
    animation-duration: 8s;
    animation-name: shake;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; }
  .badge .fa.fa-spinner {
    font-size: 80%; }

p > .badge, a > .badge {
  margin-left: 0; }

kbd .badge {
  font-size: 90%;
  margin-left: 0; }

body.backoffice .badge {
  padding: .25em .4em .05em .4em; }

body.backoffice h2 .badge {
  font-size: 1.2rem;
  padding: .25em .4em .25em .4em;
  top: -0.3rem; }

body {
  background-color: #F5F5F5;
  color: #424242;
  font-family: "Inter", "Open Sans", sans-serif;
  font-size: .9rem; }
  body.dark {
    background-color: #121212;
    color: #E0E0E0; }

/* 
Element: Buttons

Wrapper for Bootstrap buttons

Markup:
<button class="btn {{modifier_class}}">Button</button>
<input class="btn {{modifier_class}}" value="Input Button" />
<a class="btn {{modifier_class}}" href="">Link Button</a>

.btn-primary		- &nbsp;
.btn-secondary		- &nbsp;
.btn-info			- &nbsp;
.btn-warning		- &nbsp;
.btn-danger			- &nbsp;
.btn-success		- &nbsp;
.btn-inverse		- &nbsp;
.btn-light			- &nbsp;
.btn-dark			- &nbsp;
.disabled			- &nbsp;

Styleguide ElementButtons
*/
/* 
Sizes

Markup:
<button class="btn btn-primary {{modifier_class}}">Button</button>

.btn-xl		- &nbsp;
.btn-lg		- &nbsp;
.btn-md		- &nbsp;
.btn-sm		- &nbsp;
.btn-xs		- &nbsp;

Styleguide ElementButtons.Sizes
*/
.btn {
  margin-right: 5px;
  background-color: #E0E0E0;
  border-color: #BDBDBD;
  border-radius: 0.5rem; }
  .btn.btn-primary {
    color: #FFFFFF;
    background-color: #3F51B5;
    border-color: #3949AB; }
    .btn.btn-primary:hover {
      background-color: #3949AB;
      border-color: #303F9F; }
  .btn.btn-secondary {
    color: #424242;
    background-color: #FFFFFF;
    border-color: #9E9E9E; }
  .btn.btn-success {
    color: #FFFFFF;
    background-color: #43A047;
    border-color: #388E3C; }
    .btn.btn-success:hover {
      background-color: #43A047;
      border-color: #388E3C; }
  .btn.btn-warning {
    color: #FFFFFF;
    background-color: #FB8C00;
    border-color: #F57C00; }
    .btn.btn-warning:hover {
      background-color: #FB8C00;
      border-color: #F57C00; }
  .btn.btn-danger {
    color: #FFFFFF;
    background-color: #E53935;
    border-color: #D32F2F; }
    .btn.btn-danger:hover {
      background-color: #E53935;
      border-color: #D32F2F; }
  .btn.btn-info {
    color: #FFFFFF;
    background-color: #1E88E5;
    border-color: #1976D2; }
    .btn.btn-info:hover {
      background-color: #1E88E5;
      border-color: #1976D2; }
  .btn.btn-light {
    color: #FFFFFF;
    background-color: #BDBDBD;
    border-color: #424242; }
    .btn.btn-light:hover {
      background-color: #BDBDBD;
      border-color: #BDBDBD; }
  .btn.btn-dark {
    color: #FFFFFF;
    background-color: #616161;
    border-color: #424242; }
    .btn.btn-dark:hover {
      background-color: #616161;
      border-color: #424242; }
  .btn.btn-inverse {
    color: #FFFFFF;
    background-color: #212121;
    border-color: #000000; }
    .btn.btn-inverse:hover {
      background-color: #000000;
      border-color: #000000; }
  .btn.btn-default {
    color: #424242;
    background-color: #FFFFFF;
    border-color: #424242; }
  .btn.disabled {
    pointer-events: none;
    color: #424242;
    background-color: #E0E0E0;
    border-color: #E0E0E0; }
  .btn.btn-xs {
    font-size: 0.75rem;
    padding: .1rem .4rem; }
  .btn + .btn {
    margin-left: 15px; }
  .btn + .btn-group {
    margin-left: 15px; }
  .btn.disabled {
    border: 1px solid #E0E0E0; }
  .btn.btn-working {
    padding-left: 32px;
    pointer-events: none;
    color: #9E9E9E;
    background-color: #E0E0E0;
    border-color: #E0E0E0; }
    .btn.btn-working:before {
      font-family: "FontAwesome";
      content: "\f110" !important;
      animation: fa-spin 2s infinite linear;
      display: inline-block;
      position: absolute;
      top: 0.5em;
      left: 10px;
      color: #424242; }
  .btn.btn-shake {
    animation-fill-mode: both;
    animation-duration: 8s;
    animation-name: shake;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; }
  .btn.btn-add:before {
    font-family: "FontAwesome";
    content: "\f055";
    margin-right: 5px; }
  .btn.btn-none {
    border-width: 0px !important;
    box-shadow: none !important;
    background-color: unset !important; }
    .btn.btn-none:hover {
      box-shadow: none !important; }
  .btn.btn-superadmin {
    color: #FFFFFF !important;
    background-color: #212121;
    border-color: #000000; }
    .btn.btn-superadmin:before {
      content: "\f09c";
      font-family: "FontAwesome";
      margin-right: 5px; }
    .btn.btn-superadmin:hover {
      background-color: #000000;
      border-color: #000000; }

input.btn.btn-working {
  padding-left: 0.4rem; }
  input.btn.btn-working:before {
    display: none; }

.btn-group {
  margin-right: 5px; }
  .btn-group .input-group-append .btn {
    border-color: #E0E0E0;
    box-shadow: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
    .btn-group .input-group-append .btn.btn-mid {
      border-radius: 0; }
  .btn-group .input-group-append a.btn {
    padding: .375rem .75rem; }
    .btn-group .input-group-append a.btn .fa {
      position: relative;
      top: 2px; }

a:visited.btn {
  color: #424242; }

a:visited.btn-primary {
  color: #FFFFFF; }

a:visited.btn-secondary {
  color: #424242; }

a:visited.btn-success {
  color: #FFFFFF; }

a:visited.btn-warning {
  color: #FFFFFF; }

a:visited.btn-danger {
  color: #FFFFFF; }

a:visited.btn-info {
  color: #FFFFFF; }

a:visited.btn-inverse {
  color: #FFFFFF; }

a:visited.btn-dark {
  color: #FFFFFF; }

.btn-group .btn,
.input-group .btn {
  margin: 0; }

.btn-group + .btn-group,
.input-group + .btn-group {
  margin-left: 15px; }

.btn-group + .btn,
.input-group + .btn {
  margin-left: 15px; }

body.dark .btn.btn-default {
  background-color: #212121;
  border-color: #616161;
  color: #E0E0E0; }

body.dark .btn.disabled {
  background-color: #424242;
  border-color: #616161;
  color: #9E9E9E; }

.backoffice .btn {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  .backoffice .btn:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .backoffice .btn:active {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .backoffice .btn.btn-secondary:active {
    background-color: #EEEEEE;
    color: #424242; }

.backoffice #title .btn.pad15 {
  margin-left: 15px; }

.backoffice #sidebar .btn {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem; }
  .backoffice #sidebar .btn.btn-xs {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    color: #424242;
    background-color: #FFFFFF;
    border-color: #9E9E9E; }
    .backoffice #sidebar .btn.btn-xs.btn-warning {
      background-color: #FB8C00;
      border-color: #F57C00;
      color: #FFFFFF; }

/* 
Element: Cards

Wrapper for Bootstrap cards

Markup:
<div class="card {{modifier_class}}" style="width:20rem;">
	<div class="card-header">Card Header</div>
	<div class="card-body">
		<h4 class="card-title">Card Title</h4>
		<p class="card-text">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Curabitur placerat felis tellus, ut consequat urna euismod sit amet.
		</p>
	</div>
</div>

.card-primary		- &nbsp;
.card-info			- &nbsp;
.card-warning		- &nbsp;
.card-danger		- &nbsp;
.card-success		- &nbsp;
.card-inverse		- &nbsp;
.card-light			- &nbsp;
.card-dark			- &nbsp;

Styleguide ElementCards
*/
.card {
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: 1rem;
  border-width: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  .card .card-header {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background-color: #EEEEEE;
    border-bottom-color: #BDBDBD;
    font-weight: bold;
    padding: 0.5rem 1.25rem;
    border-bottom-width: 4px; }
  .card .card-body.card-body-compound {
    border-bottom: 1px solid #E0E0E0; }
    .card .card-body.card-body-compound:last-child {
      border-bottom-width: 0; }
  .card .card-body .card-stars {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem; }
    .card .card-body .card-stars .fa-star {
      color: #FF9800; }
    .card .card-body .card-stars .fa-star-o:before {
      content: "\f005";
      color: #E0E0E0; }
  .card .card-body .card-score {
    border-radius: 1rem;
    border-top: 5px solid #E0E0E0;
    border-top-color: #E0E0E0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    float: right;
    font-size: 2rem;
    padding: 1.5rem 1rem;
    line-height: 2.4rem;
    color: #FFFFFF;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    border-top: 5px solid #424242;
    background-color: #616161;
    width: 90px;
    text-align: center; }
    .card .card-body .card-score.card-score-danger {
      background-color: #EF5350;
      border-top-color: #E53935; }
    .card .card-body .card-score.card-score-success {
      background-color: #66BB6A;
      border-top-color: #43A047; }
    .card .card-body .card-score.card-score-warning {
      background-color: #FFA726;
      border-top-color: #FB8C00; }
    .card .card-body .card-score.card-score-light {
      background-color: #BDBDBD;
      border-top-color: #424242; }
    .card .card-body .card-score.card-score-inverse {
      background-color: #212121;
      border-top-color: #212121; }
    .card .card-body .card-score + h2,
    .card .card-body .card-score + h3,
    .card .card-body .card-score + h4 {
      margin-top: 0; }
  .card .card-body > p:last-child {
    margin-bottom: 0; }
  .card .card-footer.card-footer-previous .previous-title:before {
    content: "Previous Score:";
    font-size: 0.9rem; }
  .card .card-footer.card-footer-previous code.previous-score {
    font-size: 1rem;
    background-color: transparent; }
  .card .card-footer.card-footer-previous code.previous-score-difference {
    font-size: 0.8rem; }
    .card .card-footer.card-footer-previous code.previous-score-difference[data-indicator="+"] {
      background-color: transparent;
      color: #43A047; }
      .card .card-footer.card-footer-previous code.previous-score-difference[data-indicator="+"]:before {
        content: "\f062";
        font-family: "FontAwesome";
        margin-right: 2px;
        color: #43A047;
        font-size: 0.7rem; }
    .card .card-footer.card-footer-previous code.previous-score-difference[data-indicator="-"] {
      background-color: transparent;
      color: #E53935; }
      .card .card-footer.card-footer-previous code.previous-score-difference[data-indicator="-"]:before {
        content: "\f063";
        font-family: "FontAwesome";
        margin-right: 2px;
        color: #E53935;
        font-size: 0.7rem; }
  .card .card-footer.card-footer-previous.danger code.previous-score {
    color: #E53935;
    background-color: #FFEBEE; }
  .card .card-footer.card-footer-previous.warning code.previous-score {
    color: #FB8C00;
    background-color: #FFF3E0; }
  .card .card-footer.card-footer-previous.success code.previous-score {
    color: #43A047;
    background-color: #E8F5E9; }
  .card.card-info .card-header {
    background-color: #90CAF9; }
  .card.card-success .card-header {
    background-color: #A5D6A7; }
  .card.card-danger .card-header {
    background-color: #EF9A9A; }
  .card.card-warning .card-header {
    background-color: #FFCC80; }

body.dark .card {
  background-color: #212121; }
  body.dark .card .card-header {
    border-bottom-color: #616161; }

body.dark .panel .panel-body .card {
  background-color: #424242; }

.backoffice .card {
  margin-top: 0;
  margin-bottom: 1.5em;
  border-top: 1px solid #F5F5F5; }
  .backoffice .card .card-header:before {
    font-family: 'FontAwesome';
    margin-right: 3px; }
  .backoffice .card .card-header.app-delete {
    padding: 0;
    border-bottom-color: #E57373; }
    .backoffice .card .card-header.app-delete.card-header:before {
      content: "";
      margin: 0; }
    .backoffice .card .card-header.app-delete:after {
      content: ""; }
  .backoffice .card .card-header.app-form:before {
    content: "\f044"; }
  .backoffice .card .card-header.app-form:after {
    content: "Details"; }
  .backoffice .card .card-header.app-contact:before {
    content: "\f2be"; }
  .backoffice .card .card-header.app-contact:after {
    content: "Contact"; }
  .backoffice .card .card-header.app-sysinfo:before {
    content: "\f05a"; }
  .backoffice .card .card-header.app-sysinfo:after {
    content: "System Information"; }
  .backoffice .card .card-header.app-related:before {
    content: "\f05a"; }
  .backoffice .card .card-header.app-related:after {
    content: "Related"; }
  .backoffice .card .card-header.app-variables:before {
    content: "\f02d"; }
  .backoffice .card .card-header.app-variables:after {
    content: "Variables Available"; }
  .backoffice .card .card-header.app-preview:before {
    content: "\f108"; }
  .backoffice .card .card-header.app-preview:after {
    content: "Preview"; }
  .backoffice .card .card-header.app-actions:before {
    content: "\f013"; }
  .backoffice .card .card-header.app-actions:after {
    content: "Actions"; }
  .backoffice .card.card-info .card-header {
    color: #10538d; }
    .backoffice .card.card-info .card-header:before {
      content: "\f05a"; }
  .backoffice .card.card-success .card-header {
    color: #255827; }
    .backoffice .card.card-success .card-header:before {
      content: "\f046"; }
  .backoffice .card.card-danger .card-header {
    color: #9f1815; }
    .backoffice .card.card-danger .card-header:before {
      content: "\f071"; }
  .backoffice .card.card-danger .btn-primary {
    color: #FFFFFF;
    background-color: #E53935;
    border-color: #D32F2F; }
    .backoffice .card.card-danger .btn-primary:hover {
      background-color: #E53935;
      border-color: #D32F2F; }
  .backoffice .card.card-warning .card-header {
    color: #955300; }
    .backoffice .card.card-warning .card-header:before {
      content: "\f071"; }
  .backoffice .card.card-search > .card-header {
    padding-top: 1rem; }
    .backoffice .card.card-search > .card-header > .btn {
      padding: .25rem .5rem;
      font-size: .875rem;
      line-height: 1.5;
      border-radius: .2rem; }
      .backoffice .card.card-search > .card-header > .btn.btn-xs {
        font-size: 0.75rem;
        position: relative;
        top: -5px; }
    .backoffice .card.card-search > .card-header .search .form-lead label {
      padding-top: 6px;
      font-size: 1rem; }
    .backoffice .card.card-search > .card-header .search .form-lead select {
      height: calc(2.25rem + 2px); }
    .backoffice .card.card-search > .card-header .search .search-options label {
      padding-top: 4px;
      font-size: 0.95rem;
      font-weight: normal; }
    .backoffice .card.card-search > .card-header .search .search-options .form-group {
      margin-bottom: 0; }
  .backoffice .card.card-search:hover .card-header {
    border-bottom-color: #BDBDBD; }
  .backoffice .card.card-plain:hover > .card-header {
    border-bottom-color: #BDBDBD; }
  .backoffice .card:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border-top: 1px solid #E0E0E0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
    .backoffice .card:hover > .card-header {
      border-bottom: 4px solid #FF9800; }

.backoffice .card-group .card:hover {
  z-index: 9999; }

.backoffice #content .dashboard .card-deck .card {
  max-width: 18rem; }
  .backoffice #content .dashboard .card-deck .card p.card-title {
    margin-bottom: 0; }
  .backoffice #content .dashboard .card-deck .card h5.card-title {
    font-size: 3rem;
    margin-bottom: 0; }
  .backoffice #content .dashboard .card-deck .card:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-top-color: #F5F5F5; }
  .backoffice #content .dashboard .card-deck .card.card-info {
    color: #10538d;
    background-color: #90CAF9; }
  .backoffice #content .dashboard .card-deck .card.card-success {
    color: #255827;
    background-color: #A5D6A7; }
  .backoffice #content .dashboard .card-deck .card.card-danger {
    color: #9f1815;
    background-color: #EF9A9A; }
  .backoffice #content .dashboard .card-deck .card.card-warning {
    color: #955300;
    background-color: #FFCC80; }

.card-deck-cpq {
  margin-bottom: 2em; }
  .card-deck-cpq .card.card-cpq {
    border-top-width: 5px;
    border-top-color: #424242; }
    .card-deck-cpq .card.card-cpq .cpq-image-wrapper {
      max-height: 200px;
      overflow: hidden; }
      .card-deck-cpq .card.card-cpq .cpq-image-wrapper .card-img-top {
        border-top-left-radius: calc(0.25rem - 1px);
        border-top-right-radius: calc(0.25rem - 1px); }
    .card-deck-cpq .card.card-cpq .card-header {
      padding: 1rem 1.25rem; }
    .card-deck-cpq .card.card-cpq .card-body .panel-actions a {
      padding: 0rem 0.25rem;
      font-size: 1.1rem; }
      .card-deck-cpq .card.card-cpq .card-body .panel-actions a .cpq-order-likes {
        font-size: 0.95rem; }
    .card-deck-cpq .card.card-cpq .card-body .cpq-add {
      font-size: 3rem;
      text-align: center;
      animation-fill-mode: both;
      animation-duration: 8s;
      animation-name: shake;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out; }
    .card-deck-cpq .card.card-cpq .card-body .cpq-option-number {
      color: #FFFFFF;
      background-color: #616161;
      text-transform: uppercase;
      margin-bottom: 1rem;
      display: inline-block;
      padding: .25em .4em;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      padding-left: 0.6em;
      padding-right: 0.6em;
      position: relative;
      top: -1px;
      border-radius: 10rem; }
    .card-deck-cpq .card.card-cpq .card-body .cpq-option-type {
      font-size: 1.25rem; }
    .card-deck-cpq .card.card-cpq .card-body .cpq-option {
      font-size: 1.75rem;
      line-height: 2rem; }
    .card-deck-cpq .card.card-cpq .card-body .cpq-price {
      font-size: 1.75rem;
      font-weight: bold; }
      .card-deck-cpq .card.card-cpq .card-body .cpq-price .cpq-qty {
        display: block;
        margin-top: 0.5rem;
        font-size: 1rem;
        font-style: italic;
        font-weight: normal; }
    .card-deck-cpq .card.card-cpq .card-body .plan-cpq {
      list-style: none;
      margin-left: 0;
      padding: 0;
      margin-bottom: 0; }
      .card-deck-cpq .card.card-cpq .card-body .plan-cpq li {
        padding-left: 20px;
        position: relative; }
        .card-deck-cpq .card.card-cpq .card-body .plan-cpq li:before {
          font-family: "FontAwesome";
          content: "\f046";
          position: absolute;
          left: 0px;
          color: #388E3C; }
        .card-deck-cpq .card.card-cpq .card-body .plan-cpq li .cpq-item-name {
          margin-bottom: 0; }
        .card-deck-cpq .card.card-cpq .card-body .plan-cpq li .cpq-item-desc {
          font-size: 85%;
          font-style: italic;
          margin-top: 0;
          margin-bottom: 0; }
        .card-deck-cpq .card.card-cpq .card-body .plan-cpq li .cpq-item-qty {
          font-size: 85%;
          font-style: italic; }
        .card-deck-cpq .card.card-cpq .card-body .plan-cpq li.item-cpq-heading {
          font-weight: bold;
          padding-left: 0; }
          .card-deck-cpq .card.card-cpq .card-body .plan-cpq li.item-cpq-heading:before {
            display: none; }
        .card-deck-cpq .card.card-cpq .card-body .plan-cpq li.item-cpq-na {
          display: none;
          color: #E0E0E0 !important; }
          .card-deck-cpq .card.card-cpq .card-body .plan-cpq li.item-cpq-na:before {
            display: none; }
          .card-deck-cpq .card.card-cpq .card-body .plan-cpq li.item-cpq-na.item-cpq-selected:before {
            content: "\f046";
            display: block;
            color: #E0E0E0 !important; }
        .card-deck-cpq .card.card-cpq .card-body .plan-cpq li.item-cpq-unselected:before {
          content: "\f096";
          color: #9E9E9E !important; }
    .card-deck-cpq .card.card-cpq .card-footer.cpq-cta {
      background-color: #ffffff;
      border-top-width: 0;
      padding-bottom: 1rem; }
      .card-deck-cpq .card.card-cpq .card-footer.cpq-cta a.btn {
        display: block;
        text-align: center;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.25rem;
        line-height: 1.5rem;
        padding: .75rem 1rem; }
        .card-deck-cpq .card.card-cpq .card-footer.cpq-cta a.btn.btn-light {
          color: #424242; }
      .card-deck-cpq .card.card-cpq .card-footer.cpq-cta .cpq-deposit {
        margin-top: 1rem;
        text-align: center;
        margin-bottom: 0;
        font-size: 1.4rem;
        font-weight: bold; }
    .card-deck-cpq .card.card-cpq .card-footer.cpq-features ul {
      list-style: none;
      margin-left: 0;
      padding: 0;
      margin-bottom: 0; }
      .card-deck-cpq .card.card-cpq .card-footer.cpq-features ul li {
        padding-left: 20px;
        position: relative; }
        .card-deck-cpq .card.card-cpq .card-footer.cpq-features ul li:before {
          font-family: "FontAwesome";
          content: "\f046";
          position: absolute;
          left: 0px; }
        .card-deck-cpq .card.card-cpq .card-footer.cpq-features ul li .cpq-item-name {
          margin-bottom: 0; }
        .card-deck-cpq .card.card-cpq .card-footer.cpq-features ul li .cpq-item-desc {
          font-size: 85%;
          font-style: italic;
          margin-top: 0;
          margin-bottom: 0; }
        .card-deck-cpq .card.card-cpq .card-footer.cpq-features ul li .cpq-item-qty {
          font-size: 85%;
          font-style: italic; }
    .card-deck-cpq .card.card-cpq:hover .card-footer.cpq-cta a.btn {
      animation-fill-mode: both;
      animation-duration: 8s;
      animation-name: shake;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out; }
  .card-deck-cpq.cpq-item-type {
    margin-bottom: 0; }
    .card-deck-cpq.cpq-item-type .card.card-cpq {
      margin-bottom: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0; }
  .card-deck-cpq.cpq-feature .card.card-cpq {
    margin-top: 0;
    border-top-width: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0; }
    .card-deck-cpq.cpq-feature .card.card-cpq .card-footer[data-isnocost="0"] {
      flex: 1 1 auto;
      background-color: #ffffff; }

/* 
CellCSS

Wrapper for Bootstrap tables

Markup:
<table class="table">
	<thead>
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th class="text-center">Column 3</th>
			<th class="text-center">Column 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>lorem ipsum</td>
			<td>dolor sit amet</td>
			<td class="cell-css {{modifier_class}}" data-value="0"></td>
			<td class="cell-css {{modifier_class}}" data-value="1"></td>
		</tr>
	</tbody>
</table>

.cell-numericactive				- &nbsp;
.cell-numericexpandcollapseall	- &nbsp;
.cell-numericyesno				- &nbsp;
.cell-numericnoyes				- &nbsp;
.cell-numericthumbs				- &nbsp;

Styleguide ElementTables.CellCSS
*/
/* 
CellCSSLink

Wrapper for Bootstrap tables

Markup:
<table class="table">
	<thead>
		<tr>
			<th>Column 1</th>
			<th class="text-center">Column 2</th>
			<th class="text-center">Column 3</th>
			<th class="text-center">Column 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>lorem ipsum</td>
			<td class="cell-css {{modifier_class}}" data-value="0"><a href="">0</a></td>
			<td class="cell-css {{modifier_class}}" data-value="5"><a href="">5</a></td>
			<td class="cell-css {{modifier_class}}" data-value="10"><a href="">10</a></td>
		</tr>
	</tbody>
</table>

.cell-numericlink			- &nbsp;

Styleguide ElementTables.CellCSSLink
*/
.cell-css:before {
  display: inline-block; }

.cell-css.cell-lock {
  pointer-events: none; }
  .cell-css.cell-lock:before {
    font-family: 'FontAwesome';
    font-size: 1em;
    line-height: 1em;
    content: "\f023";
    margin-right: 5px; }

.cell-css.cell-missing:empty:before {
  content: 'Missing';
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  padding-left: 0.6em;
  padding-right: 0.6em;
  position: relative;
  top: -1px;
  border-radius: 10rem;
  color: #FFFFFF;
  background-color: #E53935; }

.cell-css.cell-numericcheck {
  text-align: center; }
  .cell-css.cell-numericcheck:before {
    font-family: 'FontAwesome';
    font-size: 1.4em;
    line-height: 1em; }
  .cell-css.cell-numericcheck:not([data-value='0']):before, .cell-css.cell-numericcheck.cell-value-1:before {
    content: "\f046";
    color: #388E3C; }
  .cell-css.cell-numericcheck[data-value='0']:before, .cell-css.cell-numericcheck.cell-value-0:before {
    content: "\f096";
    color: #9E9E9E; }

.cell-css.cell-numerichighlight:not([data-value='0']) {
  background-color: #A5D6A7; }

.cell-css.cell-numerichighlight[data-value='0'] {
  background-color: #EF9A9A; }

.cell-css.cell-numericexpandcollapseall {
  text-align: center; }
  .cell-css.cell-numericexpandcollapseall:before {
    font-family: 'FontAwesome';
    font-size: 1.4em;
    line-height: 1em; }
  .cell-css.cell-numericexpandcollapseall:not([data-value='0']):before {
    content: "\f103"; }
  .cell-css.cell-numericexpandcollapseall[data-value='0']:before {
    content: "\f102"; }

.cell-css.cell-numericyesno {
  text-align: center; }
  .cell-css.cell-numericyesno:before {
    font-family: 'FontAwesome';
    font-size: 1.4em;
    line-height: 1em; }
  .cell-css.cell-numericyesno:not([data-value='0']):before, .cell-css.cell-numericyesno.cell-value-1:before {
    content: "\f205";
    color: #388E3C; }
  .cell-css.cell-numericyesno[data-value='0']:before, .cell-css.cell-numericyesno.cell-value-0:before {
    content: "\f204";
    color: #9E9E9E; }
  .cell-css.cell-numericyesno.cell-value-0:before {
    color: #9E9E9E !important; }
  .cell-css.cell-numericyesno[data-can-toggle-live='0'] {
    pointer-events: none;
    cursor: default;
    color: #BDBDBD !important; }
    .cell-css.cell-numericyesno[data-can-toggle-live='0'] i {
      color: #BDBDBD !important; }

.cell-css.cell-numericnoyes {
  text-align: center; }
  .cell-css.cell-numericnoyes:before {
    font-family: 'FontAwesome';
    font-size: 1.4em;
    line-height: 1em; }
  .cell-css.cell-numericnoyes:not([data-value='0']):before, .cell-css.cell-numericnoyes.cell-value-1:before {
    content: "\f204";
    color: #9E9E9E; }
  .cell-css.cell-numericnoyes[data-value='0']:before, .cell-css.cell-numericnoyes.cell-value-0:before {
    content: "\f205";
    color: #388E3C; }

.cell-css.cell-numericthumbs {
  text-align: center; }
  .cell-css.cell-numericthumbs:before {
    font-family: 'FontAwesome';
    font-size: 1.4em;
    line-height: 1em; }
  .cell-css.cell-numericthumbs:not([data-value='0']):before, .cell-css.cell-numericthumbs.cell-value-1:before {
    content: "\f164";
    color: #388E3C; }
  .cell-css.cell-numericthumbs[data-value='0']:before, .cell-css.cell-numericthumbs.cell-value-0:before {
    content: "\f165";
    color: #D32F2F; }

.cell-css.cell-numericarrows {
  text-align: center; }
  .cell-css.cell-numericarrows:before {
    font-family: 'FontAwesome';
    font-size: 1em;
    line-height: 1em;
    top: 0px; }
  .cell-css.cell-numericarrows:not([data-value='0']):before {
    content: "\f102"; }
  .cell-css.cell-numericarrows:not([data-value='0']):after {
    content: "Collapse All"; }
  .cell-css.cell-numericarrows[data-value='0']:before {
    content: "\f103"; }
  .cell-css.cell-numericarrows[data-value='0']:after {
    content: "Expand All"; }
  .cell-css.cell-numericarrows:not([data-show-toggle='1']) {
    display: none; }

.cell-css.cell-numericexpandcollapse {
  text-align: center; }
  .cell-css.cell-numericexpandcollapse:before {
    font-family: 'FontAwesome';
    font-size: 1em;
    line-height: 1em;
    top: 0px;
    margin-right: 10px; }
  .cell-css.cell-numericexpandcollapse:not([data-value='0']):before {
    content: "\f106"; }
  .cell-css.cell-numericexpandcollapse[data-value='0']:before {
    content: "\f107"; }
  .cell-css.cell-numericexpandcollapse:not([data-show-toggle='1']) {
    display: none; }

.cell-css.cell-numericlink {
  text-align: center; }
  .cell-css.cell-numericlink[data-value='0'] {
    color: #9E9E9E; }
    .cell-css.cell-numericlink[data-value='0'] a {
      pointer-events: none;
      cursor: default;
      color: #9E9E9E; }

.cell-css.cell-numericactive[data-value='0'] {
  color: #9E9E9E; }
  .cell-css.cell-numericactive[data-value='0'] a {
    color: #9E9E9E; }
  .cell-css.cell-numericactive[data-value='0']:after {
    content: 'Inactive';
    margin-left: 5px;
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    padding-left: 0.6em;
    padding-right: 0.6em;
    position: relative;
    top: -1px;
    border-radius: 10rem;
    color: #FFFFFF;
    background-color: #E53935; }

.cell-css.cell-numericinactive[data-value='1'] {
  color: #9E9E9E; }
  .cell-css.cell-numericinactive[data-value='1'] a {
    color: #9E9E9E; }
  .cell-css.cell-numericinactive[data-value='1']:after {
    content: 'Inactive';
    margin-left: 5px;
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    padding-left: 0.6em;
    padding-right: 0.6em;
    position: relative;
    top: -1px;
    border-radius: 10rem;
    color: #FFFFFF;
    background-color: #E53935; }

.cell-css.cell-numericarchive[data-value='1'] {
  color: #9E9E9E; }
  .cell-css.cell-numericarchive[data-value='1'] a {
    color: #9E9E9E; }
  .cell-css.cell-numericarchive[data-value='1']:after {
    content: 'Archived';
    margin-left: 5px;
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    padding-left: 0.6em;
    padding-right: 0.6em;
    position: relative;
    top: -1px;
    border-radius: 10rem;
    color: #FFFFFF;
    background-color: #E53935; }

.cell-css.cell-numericupdated[data-value='1']:after {
  content: 'Updated';
  margin-left: 5px;
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  padding-left: 0.6em;
  padding-right: 0.6em;
  position: relative;
  top: -1px;
  border-radius: 10rem;
  color: #FFFFFF;
  background-color: #616161; }

.cell-css.cell-numericsuccess {
  text-align: center; }
  .cell-css.cell-numericsuccess:not([data-value='0']) {
    background-color: #C8E6C9;
    font-weight: bold; }

.cell-css.cell-checkbox {
  padding: 0; }
  .cell-css.cell-checkbox label {
    padding: .75rem;
    cursor: pointer;
    margin-bottom: 0; }

a.cell-css:before {
  margin-right: 3px;
  position: relative;
  top: 2px; }

a.cell-css.cell-numericlink {
  text-align: center; }
  a.cell-css.cell-numericlink:before {
    margin-right: 0;
    position: relative;
    top: 0; }
  a.cell-css.cell-numericlink[data-value='0'] {
    color: #9E9E9E;
    pointer-events: none;
    cursor: default;
    color: #9E9E9E; }

a.cell-css.cell-missing:empty {
  pointer-events: none;
  cursor: default;
  color: #FFFFFF; }

/* 
Element: ChatBot

Markup:
<div id="chatbot"><a href=""></a></div>

Styleguide ElementChatBot
*/
#chatbot {
  height: 56px;
  width: 56px;
  background-color: #3F51B5;
  bottom: 36px;
  right: 36px;
  position: fixed;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  z-index: 100; }
  #chatbot a:before {
    font-family: 'FontAwesome';
    font-size: 1.6rem;
    color: #FFFFFF;
    content: "\f0e5";
    position: relative;
    top: 1rem;
    padding: 1rem; }

#fxo-widget-iframe {
  display: none; }

/* 
Component: Charts

Wrapper for [Highcharts](https://www.highcharts.com/demo).

Markup: chart.hbs

Weight: 100

Styleguide ComponentCharts
*/
/* 
No Data

Markup: chart-nodata.hbs

Weight: 100

Styleguide ComponentCharts.NoData
*/
.chart-nodata {
  height: 200px !important; }
  .chart-nodata:before {
    content: "No data to display";
    text-align: center;
    font-size: 2.5em;
    color: #9E9E9E;
    display: block;
    height: 100%;
    position: relative;
    top: 45%; }
  .chart-nodata svg {
    display: none; }

.highcharts-credits {
  display: none; }

.datepicker {
  font-size: 1em;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 0;
  padding: 10px; }
  .datepicker table tr th {
    padding: 5px; }
  .datepicker table tr td {
    padding: 5px; }
    .datepicker table tr td.today, .datepicker table tr td.active {
      background-color: #1E88E5 !important;
      color: #FFFFFF !important;
      background-image: none; }

.form-vertical .filestack .filestack-files li a.fa-times-circle {
  color: #E53935;
  display: none; }

.form-vertical .filestack .filestack-files li:before {
  font-family: "FontAwesome";
  content: "\f016";
  margin-right: 5px;
  color: #9E9E9E; }

.form-vertical .filestack .filestack-files li:hover a.fa-times-circle {
  display: inline; }

.form-vertical input.js-filestack {
  visibility: hidden;
  padding: 0px;
  margin: 0px;
  height: 0px; }

#footerwrapper {
  background-color: #444444;
  color: #FFFFFF;
  padding: .4em 1em;
  z-index: 10;
  transition: 0.35s;
  transition-timing-function: linear; }
  #footerwrapper.navbar {
    min-height: inherit; }
  #footerwrapper #footer {
    background-color: transparent; }
    #footerwrapper #footer #footer-copyright {
      float: left;
      font-size: 90%; }
    #footerwrapper #footer #footer-links {
      float: right; }
      #footerwrapper #footer #footer-links .list-inline {
        margin: 0; }
        #footerwrapper #footer #footer-links .list-inline li {
          padding: 0; }
          #footerwrapper #footer #footer-links .list-inline li a {
            color: #FFFFFF; }
        #footerwrapper #footer #footer-links .list-inline li:before {
          content: "|";
          color: #ddd;
          margin: 0 .5em; }
        #footerwrapper #footer #footer-links .list-inline li:first-child:before {
          content: ""; }

#footer-status {
  position: fixed;
  bottom: 5px;
  right: 15px; }
  #footer-status #footer-status-message {
    text-transform: uppercase; }

form textarea.code, form textarea.js-tinymce, form textarea.mceeditor,
.form textarea.code,
.form textarea.js-tinymce,
.form textarea.mceeditor,
#formdesign textarea.code,
#formdesign textarea.js-tinymce,
#formdesign textarea.mceeditor,
#ajax-formdesign textarea.code,
#ajax-formdesign textarea.js-tinymce,
#ajax-formdesign textarea.mceeditor {
  font-family: "Consolas", monospace;
  font-size: 1rem; }

form textarea[name="constant_value"], form textarea[name='email_content'],
.form textarea[name="constant_value"],
.form textarea[name='email_content'],
#formdesign textarea[name="constant_value"],
#formdesign textarea[name='email_content'],
#ajax-formdesign textarea[name="constant_value"],
#ajax-formdesign textarea[name='email_content'] {
  font-family: "Consolas", monospace;
  font-size: 1rem; }

form label[data-isdisabled="1"],
.form label[data-isdisabled="1"],
#formdesign label[data-isdisabled="1"],
#ajax-formdesign label[data-isdisabled="1"] {
  color: #9E9E9E; }

form input.readonly, form input.disabled,
.form input.readonly,
.form input.disabled,
#formdesign input.readonly,
#formdesign input.disabled,
#ajax-formdesign input.readonly,
#ajax-formdesign input.disabled {
  pointer-events: none;
  background-color: #e9ecef; }

form input.text,
.form input.text,
#formdesign input.text,
#ajax-formdesign input.text {
  border: none;
  background-color: inherit;
  padding: 0;
  height: auto;
  display: inline-block;
  transition: none;
  font-size: 1em; }
  form input.text + .help-inline .fieldformat,
  .form input.text + .help-inline .fieldformat,
  #formdesign input.text + .help-inline .fieldformat,
  #ajax-formdesign input.text + .help-inline .fieldformat {
    font-size: 85%; }

form input[type='checkbox'] .form-switch:before,
.form input[type='checkbox'] .form-switch:before,
#formdesign input[type='checkbox'] .form-switch:before,
#ajax-formdesign input[type='checkbox'] .form-switch:before {
  font-family: "FontAwesome";
  content: "\f204";
  color: #9E9E9E;
  margin-left: 5px; }

form input[type='checkbox'] .form-switch:checked:before,
.form input[type='checkbox'] .form-switch:checked:before,
#formdesign input[type='checkbox'] .form-switch:checked:before,
#ajax-formdesign input[type='checkbox'] .form-switch:checked:before {
  font-family: "FontAwesome";
  content: "\f205";
  color: #388E3C;
  margin-left: 5px; }

form .mce-tinymce,
.form .mce-tinymce,
#formdesign .mce-tinymce,
#ajax-formdesign .mce-tinymce {
  box-shadow: none; }

form optgroup,
.form optgroup,
#formdesign optgroup,
#ajax-formdesign optgroup {
  font-weight: 100;
  color: #9E9E9E; }
  form optgroup option,
  .form optgroup option,
  #formdesign optgroup option,
  #ajax-formdesign optgroup option {
    font-size: .88rem;
    color: #424242; }

form option[disabled],
.form option[disabled],
#formdesign option[disabled],
#ajax-formdesign option[disabled] {
  background-color: #E0E0E0;
  color: #9E9E9E; }

form .control-switch,
.form .control-switch,
#formdesign .control-switch,
#ajax-formdesign .control-switch {
  position: relative;
  text-align: left; }
  form .control-switch input[type="checkbox"],
  .form .control-switch input[type="checkbox"],
  #formdesign .control-switch input[type="checkbox"],
  #ajax-formdesign .control-switch input[type="checkbox"] {
    display: inline-block;
    position: absolute;
    width: 1rem;
    top: -0.5rem;
    opacity: 0;
    border-width: 0; }
    form .control-switch input[type="checkbox"] + label,
    .form .control-switch input[type="checkbox"] + label,
    #formdesign .control-switch input[type="checkbox"] + label,
    #ajax-formdesign .control-switch input[type="checkbox"] + label {
      font-size: 0.8rem; }
      form .control-switch input[type="checkbox"] + label:before,
      .form .control-switch input[type="checkbox"] + label:before,
      #formdesign .control-switch input[type="checkbox"] + label:before,
      #ajax-formdesign .control-switch input[type="checkbox"] + label:before {
        font-family: "FontAwesome";
        content: "\f204";
        margin-right: 5px;
        font-size: 0.9rem;
        position: relative; }
    form .control-switch input[type="checkbox"]:checked + label:before,
    .form .control-switch input[type="checkbox"]:checked + label:before,
    #formdesign .control-switch input[type="checkbox"]:checked + label:before,
    #ajax-formdesign .control-switch input[type="checkbox"]:checked + label:before {
      font-family: "FontAwesome";
      content: "\f205";
      margin-right: 5px; }

form .row.row-daterange,
.form .row.row-daterange,
#formdesign .row.row-daterange,
#ajax-formdesign .row.row-daterange {
  position: relative; }
  form .row.row-daterange .col:first-child:after,
  .form .row.row-daterange .col:first-child:after,
  #formdesign .row.row-daterange .col:first-child:after,
  #ajax-formdesign .row.row-daterange .col:first-child:after {
    content: " to ";
    display: block;
    position: absolute;
    top: 1.7rem;
    right: -15px;
    font-weight: bold;
    background-color: #BDBDBD;
    width: 30px;
    text-align: center;
    padding: .375rem 0;
    height: calc(1.5em + .75rem + 2px); }

/* 
Element: Headings

Wrapper for Bootstrap Headings

Markup:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>


Styleguide ElementHeadings
*/
/* 
Badges

Markup:
<h1>Heading 1 <span class="badge badge-info">Badge</span></h1>
<h2>Heading 2 <span class="badge badge-info">Badge</span></h2>
<h3>Heading 3 <span class="badge badge-info">Badge</span></h3>
<h4>Heading 4 <span class="badge badge-info">Badge</span></h4>
<h5>Heading 5 <span class="badge badge-info">Badge</span></h5>
<h6>Heading 6 <span class="badge badge-info">Badge</span></h6>


Styleguide ElementHeadings.Badge
*/
/* 
Icons

Markup:
<h1><i class="fa fa-chevron-right"></i> Heading 1</h1>
<h2><i class="fa fa-chevron-right"></i> Heading 2</h2>
<h3><i class="fa fa-chevron-right"></i> Heading 3</h3>
<h4><i class="fa fa-chevron-right"></i> Heading 4</h4>
<h5><i class="fa fa-chevron-right"></i> Heading 5</h5>
<h6><i class="fa fa-chevron-right"></i> Heading 6</h6>


Styleguide ElementHeadings.Icons
*/
/* 
Labels

Markup:
<h1>Heading 1 <span class="label label-info">Label</span></h1>
<h2>Heading 2 <span class="label label-info">Label</span></h2>
<h3>Heading 3 <span class="label label-info">Label</span></h3>
<h4>Heading 4 <span class="label label-info">Label</span></h4>
<h5>Heading 5 <span class="label label-info">Label</span></h5>
<h6>Heading 6 <span class="label label-info">Label</span></h6>


Styleguide ElementHeadings.Label
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: normal;
  position: relative; }
  h1 .label,
  h2 .label,
  h3 .label,
  h4 .label,
  h5 .label,
  h6 .label {
    position: relative;
    top: -0.25em;
    font-size: 60%; }
  h1 .badge,
  h2 .badge,
  h3 .badge,
  h4 .badge,
  h5 .badge,
  h6 .badge {
    position: relative;
    top: -0.1em;
    font-size: 80%; }
  h1 .subtitle,
  h2 .subtitle,
  h3 .subtitle,
  h4 .subtitle,
  h5 .subtitle,
  h6 .subtitle {
    color: #9E9E9E;
    font-size: 80%;
    font-style: italic;
    padding: 0em 0.5em 0em; }
  h1 .progress,
  h2 .progress,
  h3 .progress,
  h4 .progress,
  h5 .progress,
  h6 .progress {
    height: 26px;
    position: relative;
    width: 300px;
    float: right;
    margin-top: 7px; }

.backoffice #title h2 {
  margin-top: 0;
  margin-bottom: 0; }

.backoffice h2,
.backoffice h3 {
  margin-top: 0; }

#headerwrapper {
  z-index: 99;
  transition: 0.35s;
  transition-timing-function: linear;
  border: 0; }
  #headerwrapper #header {
    color: #424242;
    width: 400px;
    float: right; }
    #headerwrapper #header .content a.btn {
      margin-top: 12px; }
    #headerwrapper #header .home-link {
      padding: 1em 0 0 1em; }
      #headerwrapper #header .home-link a {
        color: #424242; }
    #headerwrapper #header #header-logo {
      padding: .4em 1em;
      border-left: 1px solid #ddd; }
    #headerwrapper #header #header-profile {
      margin-top: -0.6em;
      margin-right: 2.5em;
      padding: .5em 1em;
      float: right;
      background-color: #ffffff;
      border-radius: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
      #headerwrapper #header #header-profile button {
        background-color: transparent;
        border: 0;
        margin: 0;
        float: left; }
        #headerwrapper #header #header-profile button i {
          color: #9E9E9E;
          font-size: 1.2em;
          margin: .4em .2em 0; }
          #headerwrapper #header #header-profile button i:hover {
            color: #1976D2; }
        #headerwrapper #header #header-profile button .badge {
          position: relative;
          top: -10px;
          left: -12px;
          padding: 2px 5px;
          font-size: 11px; }
      #headerwrapper #header #header-profile a {
        margin: 0 .5em;
        float: left; }
        #headerwrapper #header #header-profile a i {
          color: #9E9E9E;
          font-size: 1.3em;
          margin: .4em .2em 0;
          text-decoration: none; }
          #headerwrapper #header #header-profile a i:hover {
            color: #1976D2; }
        #headerwrapper #header #header-profile a.fa {
          color: #9E9E9E;
          font-size: 1.3em;
          margin-top: 0.4em;
          text-decoration: none; }
        #headerwrapper #header #header-profile a:hover {
          color: #1976D2; }
      #headerwrapper #header #header-profile .profile-block {
        border-radius: 50%;
        margin-left: .5em; }
      #headerwrapper #header #header-profile .dropdown-menu-container {
        display: inline-block;
        top: 1px; }
        #headerwrapper #header #header-profile .dropdown-menu-container .dropdown-menu a {
          margin: 0;
          float: none; }
          #headerwrapper #header #header-profile .dropdown-menu-container .dropdown-menu a:hover {
            color: #424242; }
      #headerwrapper #header #header-profile .slide-panel {
        right: -400px;
        height: 100% !important; }
        #headerwrapper #header #header-profile .slide-panel a {
          margin: 0; }
          #headerwrapper #header #header-profile .slide-panel a i {
            font-size: 1em;
            margin: 0.9em 0 0 0; }
        #headerwrapper #header #header-profile .slide-panel .alert a {
          margin: 0; }
          #headerwrapper #header #header-profile .slide-panel .alert a i {
            margin: 0;
            color: #E53935;
            margin: 0.5em 0 0 0; }

/* 
Element: Icons

Links

Markup:
<p>lorem ipsum <a class="{{modifier_class}}" href="">a link here</a> dolor sit amet, consectetur adipiscing elit.</p>

:active			- &nbsp;
:visited		- &nbsp;
:hover			- &nbsp;

Styleguide ElementLinks
*/
a.link-css:before {
  display: inline-block;
  margin-right: 5px;
  font-family: 'FontAwesome';
  text-align: center;
  font-weight: bold; }

a.link-css.link-numericnoyes:not([data-value='0']):before {
  content: "\f205"; }

a.link-css.link-numericnoyes[data-value='0']:before {
  content: "\f204";
  color: #9E9E9E; }

a.always-active {
  pointer-events: initial !important;
  color: #3F51B5 !important; }

.introjs-tooltipReferenceLayer .introjs-tooltip {
  border-radius: 0.5rem; }
  .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltip-header {
    padding: 0.5em 1rem 0.2em 1rem;
    font-size: 1em;
    border-bottom: 1px solid #E0E0E0;
    border-bottom-width: 3px;
    background-color: #F5F5F5;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem; }
    .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltip-header h1 {
      font-size: 1em; }
      .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltip-header h1 .stepid {
        display: none; }
    .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltip-header a.introjs-skipbutton {
      padding-right: 0;
      padding-top: 3px; }
  .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltiptext {
    padding: 1rem; }
    .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltiptext .fa {
      font-family: "FontAwesome"; }
  .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons {
    padding-left: 1rem;
    padding-right: 1rem; }
    .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons a.introjs-button {
      display: inline-block;
      font-weight: 400;
      text-align: center;
      vertical-align: middle;
      user-select: none;
      border-width: 1px;
      border-style: solid;
      padding: 0.375rem 0.75rem;
      font-size: 1em;
      line-height: 1.5;
      border-radius: 0.5rem;
      font-size: 0.75rem;
      padding: .1rem .4rem;
      color: #424242;
      background-color: #FFFFFF; }
      .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons a.introjs-button:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
      .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons a.introjs-button.introjs-disabled {
        display: none; }
      .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons a.introjs-button.introjs-nextbutton {
        font-size: 0;
        color: transparent;
        border-color: #ffffff; }
        .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons a.introjs-button.introjs-nextbutton:before {
          content: "\f178";
          font-family: "FontAwesome";
          font-size: 1.5rem;
          line-height: 0.7em;
          color: #000000; }
        .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons a.introjs-button.introjs-nextbutton:hover {
          border-color: #9E9E9E; }
      .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons a.introjs-button.introjs-prevbutton {
        font-size: 0%;
        color: transparent;
        border-color: #ffffff; }
        .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons a.introjs-button.introjs-prevbutton:before {
          content: "\f177";
          font-family: "FontAwesome";
          font-size: 1.5rem;
          line-height: 0.7em;
          color: #000000; }
        .introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltipbuttons a.introjs-button.introjs-prevbutton:hover {
          border-color: #9E9E9E; }
  .introjs-tooltipReferenceLayer .introjs-tooltip.introjs-floating {
    left: calc(50% - 250px) !important;
    top: 20% !important;
    width: 500px;
    max-width: 500px;
    margin: auto !important;
    position: fixed; }
  .introjs-tooltipReferenceLayer .introjs-tooltip.force-bottom-right {
    left: auto !important;
    right: 0px !important; }
    .introjs-tooltipReferenceLayer .introjs-tooltip.force-bottom-right .introjs-arrow {
      top: -10px !important;
      right: 10px !important;
      left: auto !important; }

.introjs-showElement {
  visibility: visible !important; }

/* 
Element: Labels

Wrapper for Bootstrap labels

Markup:
<span class="label {{modifier_class}}">Lorem Ipsum</span>

.label-primary		- &nbsp;
.label-secondary	- &nbsp;
.label-info			- &nbsp;
.label-warning		- &nbsp;
.label-danger		- &nbsp;
.label-success		- &nbsp;
.label-inverse		- &nbsp;
.label-light		- &nbsp;
.label-dark			- &nbsp;

Styleguide ElementLabels
*/
.label {
  border-color: solid 1px #BDBDBD; }
  .label.label-primary {
    color: #995b00;
    background-color: #FFF3E0; }
  .label.label-success {
    color: #255827;
    background-color: #E8F5E9;
    border: solid 1px #A5D6A7; }
  .label.label-warning {
    color: #955300;
    background-color: #FFF3E0;
    border: solid 1px #FFCC80; }
  .label.label-danger {
    color: #9f1815;
    background-color: #FFEBEE;
    border: solid 1px #EF9A9A; }
  .label.label-info {
    color: #10538d;
    background-color: #E3F2FD;
    border: solid 1px #90CAF9; }
  .label.label-inverse {
    color: #424242;
    background-color: #EEEEEE;
    border: solid 1px #BDBDBD; }
  .label.app {
    padding: 0; }
    .label.app:empty {
      display: inline; }
    .label.app:before {
      padding: 0.2em 0.8em 0.3em;
      border-radius: 1em;
      font-weight: bold;
      position: relative;
      font-size: 1em;
      line-height: 1em; }
    .label.app:after {
      position: relative; }
    .label.app.label-note:before {
      color: #9f1815;
      background-color: #FFEBEE;
      border: 1px solid #EF9A9A;
      content: "Note";
      top: -2px; }

/* 
Element: Links

Links

Markup:
<p>lorem ipsum <a class="{{modifier_class}}" href="">a link here</a> dolor sit amet, consectetur adipiscing elit.</p>

:active			- &nbsp;
:visited		- &nbsp;
:hover			- &nbsp;

Styleguide ElementLinks
*/
a.link-css:before {
  display: inline-block;
  margin-right: 5px;
  font-family: 'FontAwesome';
  text-align: center;
  font-weight: bold; }

a.link-css.link-numericnoyes:not([data-value='0']):before {
  content: "\f205"; }

a.link-css.link-numericnoyes[data-value='0']:before {
  content: "\f204";
  color: #9E9E9E; }

a.disabled {
  pointer-events: none !important;
  cursor: pointer;
  color: #9E9E9E !important; }
  a.disabled:before {
    color: #9E9E9E !important; }

a.copypaste {
  margin-left: 10px; }

a.link-animated-shake {
  display: inline-block;
  animation-fill-mode: both;
  animation-duration: 8s;
  animation-name: shake;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
  a.link-animated-shake:hover {
    animation-name: none; }

a.always-active {
  pointer-events: initial !important;
  color: #3F51B5 !important; }

a[href=""] {
  text-decoration: none;
  color: initial;
  pointer-events: none; }

.spinner {
  animation: spinner-rotator 1.4s linear infinite; }
  .spinner .path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: spinner-dash 1.4s ease-in-out infinite, spinner-colors 5.6s ease-in-out infinite; }

@keyframes spinner-rotator {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(270deg); } }

@keyframes spinner-colors {
  0% {
    stroke: #4285F4; }
  25% {
    stroke: #DE3E35; }
  50% {
    stroke: #F7C223; }
  75% {
    stroke: #1B9A59; }
  100% {
    stroke: #4285F4; } }

@keyframes spinner-dash {
  0% {
    stroke-dashoffset: 187; }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg); }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg); } }

.kanban {
  overflow-x: scroll; }
  .kanban .kanban-body .panel {
    width: 300px;
    float: left;
    margin-left: 3px;
    margin-right: 15px;
    border-top: 1px solid #E0E0E0; }
    .kanban .kanban-body .panel .list-group .list-group-item .row {
      margin-bottom: 0; }
      .kanban .kanban-body .panel .list-group .list-group-item .row .card-title {
        margin-bottom: 0; }
      .kanban .kanban-body .panel .list-group .list-group-item .row .card-body {
        padding: 0 15px 0 0; }
        .kanban .kanban-body .panel .list-group .list-group-item .row .card-body .panel-actions {
          margin-left: 5px;
          margin-bottom: 0; }
        .kanban .kanban-body .panel .list-group .list-group-item .row .card-body p:last-child {
          margin-bottom: 0; }
    .kanban .kanban-body .panel .list-group .list-group-item:hover {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      z-index: 10; }

.media-list {
  padding-left: 0;
  list-style: none; }
  .media-list .media-left {
    margin-right: 10px; }

.media {
  position: relative; }
  .media .avatar-wrapper {
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-right: 1rem; }
    .media .avatar-wrapper .avatar {
      overflow: hidden;
      display: block; }
      .media .avatar-wrapper .avatar.avatar-xs {
        width: 24px;
        height: 24px; }
        .media .avatar-wrapper .avatar.avatar-xs img {
          width: 24px; }
      .media .avatar-wrapper .avatar.avatar-sm {
        width: 48px;
        height: 48px; }
        .media .avatar-wrapper .avatar.avatar-sm img {
          width: 48px; }
      .media .avatar-wrapper .avatar.avatar-md {
        width: 64px;
        height: 64px; }
        .media .avatar-wrapper .avatar.avatar-md img {
          width: 64px; }
      .media .avatar-wrapper .avatar.avatar-lg {
        width: 96px;
        height: 96px; }
        .media .avatar-wrapper .avatar.avatar-lg img {
          width: 96px; }
      .media .avatar-wrapper .avatar.avatar-xl {
        width: 128px;
        height: 128px; }
        .media .avatar-wrapper .avatar.avatar-xl img {
          width: 128px; }
    .media .avatar-wrapper.avatar-circle {
      border-radius: 50%;
      padding: 0.25rem; }
      .media .avatar-wrapper.avatar-circle .avatar {
        border-radius: 50%; }
    .media .avatar-wrapper.avatar-circle {
      border-radius: 50%;
      padding: 0.25rem; }
      .media .avatar-wrapper.avatar-circle .avatar {
        border-radius: 50%; }

/* 
Element: Modals

Wrapper for Bootstrap Modals and React [`<Modals>`](https://uat.pipelineapp.io/app/pattern-library/elements#modal)

### Standard UX Behavior

- Modal closes when clicking on the X. Does not close when clicking outside or pressing <kbd>ESC</kbd>
- Modal closes when clicking any button in the footer.
- Modal does not use the `Cancel` button. Modal uses the X to close.
- Modals should not launch another modal, unless it is from FileStack or TinyMCE

Markup: modal.hbs

.modal-primary		- &nbsp;
.modal-secondary	- &nbsp;
.modal-info			- &nbsp;
.modal-warning		- &nbsp;
.modal-danger		- &nbsp;
.modal-success		- &nbsp;
.modal-inverse		- &nbsp;
.modal-light		- &nbsp;
.modal-dark			- &nbsp;

Styleguide ElementModals
*/
/* 
Sizes

Markup: modal-sizes.hbs

.modal-sm			- &nbsp;
.modal-md			- &nbsp;
.modal-lg			- &nbsp;
.modal-xl			- &nbsp;

Styleguide ElementModals.Sizes
*/
.modal-container .modal-backdrop.in {
  visibility: visible !important; }

.modal-container .modal .modal-dialog {
  border-radius: 1rem; }
  .modal-container .modal .modal-dialog .modal-content {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    text-align: left;
    font-weight: normal;
    font-size: 0.9rem !important;
    animation-fill-mode: both;
    animation-duration: 350ms;
    animation-name: zoomIn; }
    .modal-container .modal .modal-dialog .modal-content a {
      display: inline !important; }
    .modal-container .modal .modal-dialog .modal-content .modal-header {
      background-color: #F5F5F5;
      border-radius: 1rem 1rem 0 0;
      border-bottom-width: 3px; }
      .modal-container .modal .modal-dialog .modal-content .modal-header h3,
      .modal-container .modal .modal-dialog .modal-content .modal-header h4,
      .modal-container .modal .modal-dialog .modal-content .modal-header h5 {
        margin-top: 0;
        font-weight: normal; }
      .modal-container .modal .modal-dialog .modal-content .modal-header .close {
        float: none;
        position: absolute;
        opacity: 1;
        right: 15px;
        top: 15px;
        margin: 0;
        padding: 0; }
        .modal-container .modal .modal-dialog .modal-content .modal-header .close i {
          font-weight: normal;
          text-shadow: none;
          color: #424242; }
    .modal-container .modal .modal-dialog .modal-content .modal-body .alert.animated {
      animation-delay: 400ms; }
    .modal-container .modal .modal-dialog .modal-content .modal-body .control-group label {
      font-weight: bold; }
    .modal-container .modal .modal-dialog .modal-content .modal-body .control-group table.formlistgrid td label.fdradiolabel {
      font-weight: normal; }
    .modal-container .modal .modal-dialog .modal-content .modal-body .control-group .fieldFormat {
      font-style: italic;
      font-size: 0.8em;
      color: #9E9E9E; }
    .modal-container .modal .modal-dialog .modal-content .modal-footer .btn {
      color: #FFFFFF;
      pointer-events: initial; }
      .modal-container .modal .modal-dialog .modal-content .modal-footer .btn.btn-secondary {
        color: #424242; }
      .modal-container .modal .modal-dialog .modal-content .modal-footer .btn.btn-primary {
        background-color: #3F51B5; }
    .modal-container .modal .modal-dialog .modal-content .modal-footer .btn + .btn {
      margin-left: 10px; }
    .modal-container .modal .modal-dialog .modal-content.modal-primary .modal-header {
      background-color: #C5CAE9;
      color: #252f69;
      border-bottom-color: #9FA8DA; }
      .modal-container .modal .modal-dialog .modal-content.modal-primary .modal-header .close i {
        color: #FFFFFF; }
    .modal-container .modal .modal-dialog .modal-content.modal-primary .btn-primary {
      color: #FFFFFF;
      background-color: #3F51B5;
      border-color: #3949AB; }
      .modal-container .modal .modal-dialog .modal-content.modal-primary .btn-primary:hover {
        background-color: #3949AB;
        border-color: #303F9F; }
    .modal-container .modal .modal-dialog .modal-content.modal-danger .modal-header {
      background-color: #EF9A9A;
      color: #9f1815;
      border-bottom-color: #E57373; }
      .modal-container .modal .modal-dialog .modal-content.modal-danger .modal-header .modal-title:before {
        content: "\f071";
        font-family: 'FontAwesome';
        margin-right: .3em;
        color: #9f1815; }
      .modal-container .modal .modal-dialog .modal-content.modal-danger .modal-header .close i {
        color: #FFFFFF; }
    .modal-container .modal .modal-dialog .modal-content.modal-danger .btn.btn-primary {
      color: #FFFFFF !important;
      background-color: #E53935;
      border-color: #D32F2F; }
      .modal-container .modal .modal-dialog .modal-content.modal-danger .btn.btn-primary:hover {
        background-color: #E53935;
        border-color: #D32F2F; }
    .modal-container .modal .modal-dialog .modal-content.modal-info .modal-header {
      background-color: #90CAF9;
      color: #10538d;
      border-bottom-color: #64B5F6; }
      .modal-container .modal .modal-dialog .modal-content.modal-info .modal-header .close i {
        color: #FFFFFF; }
    .modal-container .modal .modal-dialog .modal-content.modal-info .btn .btn-primary {
      color: #FFFFFF;
      background-color: #1E88E5;
      border-color: #1976D2; }
      .modal-container .modal .modal-dialog .modal-content.modal-info .btn .btn-primary:hover {
        background-color: #1E88E5;
        border-color: #1976D2; }
    .modal-container .modal .modal-dialog .modal-content.modal-success .modal-header {
      background-color: #A5D6A7;
      color: #255827;
      border-bottom-color: #81C784; }
      .modal-container .modal .modal-dialog .modal-content.modal-success .modal-header .close i {
        color: #FFFFFF; }
    .modal-container .modal .modal-dialog .modal-content.modal-success .btn .btn-primary {
      color: #FFFFFF;
      background-color: #43A047;
      border-color: #388E3C; }
      .modal-container .modal .modal-dialog .modal-content.modal-success .btn .btn-primary:hover {
        background-color: #43A047;
        border-color: #388E3C; }
    .modal-container .modal .modal-dialog .modal-content.modal-warning .modal-header {
      background-color: #FFCC80;
      color: #955300;
      border-bottom-color: #FFB74D; }
      .modal-container .modal .modal-dialog .modal-content.modal-warning .modal-header .modal-title:before {
        content: "\f071";
        font-family: 'FontAwesome';
        margin-right: .3em;
        color: #955300; }
      .modal-container .modal .modal-dialog .modal-content.modal-warning .modal-header .close i {
        color: #FFFFFF; }
    .modal-container .modal .modal-dialog .modal-content.modal-warning .btn .btn-primary {
      color: #FFFFFF;
      background-color: #FB8C00;
      border-color: #F57C00; }
      .modal-container .modal .modal-dialog .modal-content.modal-warning .btn .btn-primary:hover {
        background-color: #FB8C00;
        border-color: #F57C00; }
  .modal-container .modal .modal-dialog.modal-dialog-scrollable {
    overflow-x: hidden; }

.modal-container .modal.fade.in {
  display: block; }

.modal-dialog .modal-content .modal-header h3 i.fa-exclamation-triangle {
  color: #D32F2F; }

.modal-dialog .modal-content .modal-header button.close {
  font-size: 28px;
  opacity: inherit; }

.modal-dialog .modal-content .modal-header.success {
  background-color: #43A047;
  color: #FFFFFF;
  border-radius: 6px 6px 0 0; }
  .modal-dialog .modal-content .modal-header.success .close {
    color: #FFFFFF; }
  .modal-dialog .modal-content .modal-header.success h3:before {
    content: '\f00c';
    font-family: 'FontAwesome';
    margin-right: .3em; }

.modal-dialog .modal-content .modal-header.danger h3:before {
  content: '\f071';
  font-family: 'FontAwesome';
  margin-right: .3em;
  color: #D32F2F; }

.modal-dialog .modal-body-scroll {
  max-height: 550px;
  overflow-y: auto; }

.dropdown .dropdown-menu li .modal .modal-dialog a {
  display: inline; }

body.dark .modal-container .modal .modal-dialog .modal-content {
  background-color: #212121;
  color: #E0E0E0; }
  body.dark .modal-container .modal .modal-dialog .modal-content .modal-header {
    background-color: #424242;
    border-color: #616161; }
  body.dark .modal-container .modal .modal-dialog .modal-content .modal-footer {
    border-color: #616161; }

.backoffice .modal-container .modal-backdrop.show {
  opacity: 0.8; }

.backoffice .modal-container .modal-dialog.modal-dialog-scrollable .modal-body {
  max-height: calc(100vh - 15rem); }

#bs-backdrop {
  z-index: 999;
  opacity: 0.7; }

@media (min-width: 1200px) {
  .modal-xl {
    width: 1200px; } }

@media (max-width: 1199.98px) {
  .modal-container .modal-xl {
    width: 100%; } }

.navbar-fixed-left {
  position: fixed;
  border-radius: 0;
  height: 100%;
  top: 0;
  margin-left: -16px;
  display: table;
  padding: 0; }
  .navbar-fixed-left .navbar-brand {
    float: none;
    height: unset;
    display: block;
    text-align: center; }
    .navbar-fixed-left .navbar-brand img {
      display: inline-block; }
  .navbar-fixed-left .navbar-nav {
    float: none;
    margin-top: 0; }
    .navbar-fixed-left .navbar-nav .nav-item {
      float: none;
      /* Cancel default li float: left */ }
      .navbar-fixed-left .navbar-nav .nav-item .dropdown-menu {
        margin-top: -50px;
        margin-left: 140px; }
      .navbar-fixed-left .navbar-nav .nav-item:hover .dropdown-menu, .navbar-fixed-left .navbar-nav .nav-item.active .dropdown-menu {
        display: block; }

.col-xxl, .col-xxl-1, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px; }

@media (min-width: 1440px) {
  .col-xxl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%; }
  .col-xxl-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%; }
  .col-xxl-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%; }
  .col-xxl-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-xxl-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%; }
  .col-xxl-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }
  .col-xxl-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-xxl-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%; }
  .col-xxl-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%; }
  .col-xxl-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  .col-xxl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }
  .col-xxl-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%; }
  .col-xxl-12 {
    flex: 0 0 100%;
    max-width: 100%; } }

/* 
Element: Panels

Wrapper for Bootstrap panels

Markup:
<div class="panel {{modifier_class}}" style="width:600px;">
	<div class="panel-heading">Panel Header</div>
	<div class="panel-body">
		<h4>Panel Title</h4>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Curabitur placerat felis tellus, ut consequat urna euismod sit amet.
		</p>
	</div>
</div>

.panel-primary		- &nbsp;
.panel-secondary	- &nbsp;
.panel-info			- &nbsp;
.panel-warning		- &nbsp;
.panel-danger		- &nbsp;
.panel-success		- &nbsp;
.panel-inverse		- &nbsp;
.panel-light		- &nbsp;
.panel-dark			- &nbsp;

Styleguide ElementPanels
*/
/* 
Progress: Animated

Wrapper for Bootstrap panels

Markup:
<div class="panel panel-progress panel-animated" style="width:600px;">
	<div class="panel-heading">Panel Header</div>
	<div class="panel-body">
		<h4>Panel Title</h4>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Curabitur placerat felis tellus, ut consequat urna euismod sit amet.
		</p>
	</div>
</div>

Styleguide ElementPanels.ProgressAnimated
*/
.panel {
  border: none;
  border-radius: 0px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  background-color: #ffffff;
  overflow: hidden;
  word-wrap: break-word; }
  .panel .panel-heading {
    padding: 0.5rem 1.25rem;
    border-radius: 0px;
    border-bottom-width: 3px; }
    .panel .panel-heading .badge {
      position: relative;
      top: -0.1em; }
    .panel .panel-heading .label {
      position: relative;
      top: -0.1em; }
    .panel .panel-heading.border-bottom-solid {
      border-bottom-style: solid; }
  .panel .panel-body {
    padding: 1.25rem;
    padding-bottom: 2em;
    background-color: #ffffff; }
    .panel .panel-body h3:first-child, .panel .panel-body h4:first-child, .panel .panel-body h5:first-child {
      margin-top: 0; }
    .panel .panel-body .breadcrumb {
      margin-top: 0; }
    .panel .panel-body .row {
      margin-bottom: 1.5rem; }
    .panel .panel-body + .panel-body {
      border-top: 1px solid #E0E0E0; }
    .panel .panel-body form .control-group .row {
      margin-bottom: 0; }
    .panel .panel-body form .panel .panel-body .row {
      margin-bottom: 0; }
  .panel .panel-footer {
    border-radius: 0px;
    padding: 0.5rem 1.25rem; }
    .panel .panel-footer .badge {
      position: relative;
      top: -0.1em; }
    .panel .panel-footer .label {
      position: relative;
      top: -0.1em; }
  .panel.panel-default {
    border-color: #E0E0E0; }
    .panel.panel-default .panel-heading {
      color: #424242;
      font-weight: bold;
      background-color: #F5F5F5;
      border-color: #E0E0E0;
      border-bottom-style: solid; }
    .panel.panel-default .panel-footer {
      background-color: #F5F5F5;
      border-color: #E0E0E0; }
  .panel.panel-primary {
    border-color: #9FA8DA; }
    .panel.panel-primary .panel-heading {
      color: #424242;
      font-weight: bold;
      background-color: #C5CAE9;
      border-color: #9FA8DA; }
    .panel.panel-primary .panel-footer {
      background-color: #C5CAE9;
      border-color: #9FA8DA; }
  .panel.panel-success {
    border-color: #81C784; }
    .panel.panel-success .panel-heading {
      color: #424242;
      font-weight: bold;
      background-color: #A5D6A7;
      border-color: #81C784; }
    .panel.panel-success .panel-footer {
      background-color: #A5D6A7;
      border-color: #81C784; }
  .panel.panel-warning {
    border-color: #FFB74D; }
    .panel.panel-warning .panel-heading {
      color: #424242;
      font-weight: bold;
      background-color: #FFCC80;
      border-color: #FFB74D; }
    .panel.panel-warning .panel-footer {
      background-color: #FFCC80;
      border-color: #FFB74D; }
  .panel.panel-danger {
    border-color: #E57373; }
    .panel.panel-danger .panel-heading {
      color: #424242;
      font-weight: bold;
      background-color: #EF9A9A;
      border-color: #E57373; }
    .panel.panel-danger .panel-footer {
      background-color: #EF9A9A;
      border-color: #E57373; }
  .panel.panel-info {
    border-color: #64B5F6; }
    .panel.panel-info .panel-heading {
      color: #424242;
      font-weight: bold;
      background-color: #90CAF9;
      border-color: #64B5F6; }
    .panel.panel-info .panel-footer {
      background-color: #90CAF9;
      border-color: #64B5F6; }
  .panel.panel-inverse {
    border-color: #212121; }
    .panel.panel-inverse .panel-heading {
      color: #FFFFFF;
      font-weight: bold;
      background-color: #424242;
      border-color: #212121; }
    .panel.panel-inverse .panel-footer {
      color: #FFFFFF;
      background-color: #424242;
      border-color: #212121; }
  .panel.panel-progress .panel-heading {
    color: #FFFFFF;
    font-weight: bold;
    border-color: #212121;
    background-color: #757575;
    border-color: #212121;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 120px 120px; }
  .panel.panel-progress.panel-animated .panel-heading {
    animation-name: progress-bar-stripes-forward-xl;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-iteration-count: infinite; }

body.dark .panel {
  background-color: #212121; }
  body.dark .panel .panel-heading {
    background-color: #424242;
    border-color: #616161;
    color: #E0E0E0; }
    body.dark .panel .panel-heading input[type="text"] {
      background-color: #616161; }
  body.dark .panel .panel-body {
    background-color: #212121; }
    body.dark .panel .panel-body .panel.panel-card .panel-body {
      border-top-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      border-left: 7px solid #E0E0E0;
      border-left-color: #E0E0E0;
      background-color: #424242; }

@media (max-width: 1199.98px) {
  .panel .panel-heading .panel-userinfo {
    float: none !important; }
  .panel .panel-heading .panel-actions {
    float: none !important;
    margin-left: 0;
    margin-top: 1em;
    right: auto !important; }
  .panel .panel-body .panel-actions {
    float: none !important;
    margin-left: 0;
    right: auto !important; } }

/* 
Element: Pins

Wrapper for Pins

Markup:
<span class="pin {{modifier_class}}">pin</span>

.pin-primary		- &nbsp;
.pin-secondary	    - &nbsp;
.pin-info			- &nbsp;
.pin-warning		- &nbsp;
.pin-danger		    - &nbsp;
.pin-success		- &nbsp;
.pin-inverse		- &nbsp;
.pin-light		    - &nbsp;
.pin-dark			- &nbsp;

Styleguide ElementPins
*/
.pin {
  margin-left: 0.5em;
  padding: .4em .7em .4em 1.2em;
  text-transform: uppercase;
  position: absolute;
  font-size: 13px;
  font-weight: 700;
  top: -1px;
  border-radius: 10rem 0 0 10rem; }
  .pin:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    bottom: 0px;
    left: 100%;
    border: 14px solid transparent;
    border-left-width: 25px;
    border-left-style: solid; }
  .pin.pin-animated {
    animation-name: flash;
    animation-duration: 5s;
    animation-iteration-count: infinite; }
  .pin:after {
    border-left: 25px solid #fff; }
  .pin.pin-primary {
    color: #FFFFFF;
    background-color: #3F51B5; }
    .pin.pin-primary:after {
      border-left-color: #3F51B5; }
  .pin.pin-secondary {
    color: #FFFFFF;
    background-color: #757575; }
    .pin.pin-secondary:after {
      border-left-color: #757575; }
  .pin.pin-success {
    color: #FFFFFF;
    background-color: #43A047; }
    .pin.pin-success:after {
      border-left-color: #43A047; }
  .pin.pin-warning {
    color: #FFFFFF;
    background-color: #FB8C00; }
    .pin.pin-warning:after {
      border-left-color: #FB8C00; }
  .pin.pin-danger {
    color: #FFFFFF;
    background-color: #F44336; }
    .pin.pin-danger:after {
      border-left-color: #F44336; }
  .pin.pin-info {
    color: #FFFFFF;
    background-color: #1E88E5; }
    .pin.pin-info:after {
      border-left-color: #1E88E5; }
  .pin.pin-inverse {
    color: #FFFFFF;
    background-color: #212121; }
    .pin.pin-inverse:after {
      border-left-color: #212121; }
  .pin.pin-light {
    color: #FFFFFF;
    background-color: #BDBDBD; }
    .pin.pin-light:after {
      border-left-color: #BDBDBD; }
  .pin.pin-dark {
    color: #FFFFFF;
    background-color: #616161; }
    .pin.pin-dark:after {
      border-left-color: #616161; }
  .pin.pin-orange {
    color: #FFFFFF;
    background-color: #FF9800; }
    .pin.pin-orange:after {
      border-left-color: #FF9800; }
  .pin.pin-step-default {
    color: #9E9E9E;
    background-color: #FAFAFA;
    border: 1px solid #9E9E9E; }
  .pin.pin-muted {
    color: #FFFFFF;
    background-color: #9E9E9E; }
  .pin.pin-border {
    font-weight: normal;
    border: 1px solid #E0E0E0;
    background-color: #FFF;
    color: #3F51B5; }

p > .pin, a > .pin {
  margin-left: 0; }

kbd .pin {
  font-size: 90%;
  margin-left: 0; }

/* 
Element: Loading

Note, we are not able to use the [Google Material Design circular progress indicator](https://codepen.io/jczimm/pen/vEBpoL) 
because the animation requires IE Edge. We will switch when IE Edge gains enough browser share.

Markup:
<i class="fa fa-spinner fa-pulse loading-status"></i>

Styleguide ElementLoading
*/
/* 
Element: Progress

Styleguide ElementProgress
*/
@keyframes progress-bar-stripes-forward-xl {
  from {
    background-position: 0px 0; }
  to {
    background-position: 120px 0; } }

@keyframes progress-bar-stripes-xl {
  from {
    background-position: 120px 0; }
  to {
    background-position: 0px 0; } }

@keyframes progress-bar-stripes-forward-lg {
  from {
    background-position: 0px 0; }
  to {
    background-position: 80px 0; } }

@keyframes progress-bar-stripes-lg {
  from {
    background-position: 80px 0; }
  to {
    background-position: 0px 0; } }

.progress .animated.animated-lg {
  animation-name: progress-bar-stripes-lg; }

.progress .animated.animated-xl {
  animation-name: progress-bar-stripes-xl; }

.progress .animated.animated-forward.animated-lg {
  animation-name: progress-bar-stripes-forward-lg; }

.progress .animated.animated-forward.animated-xl {
  animation-name: progress-bar-stripes-forward-xl; }

.dark .progress {
  background-color: #424242; }

/* 
Element: Readonly

Styleguide ElementReadonly
*/
/* 
Element: ribbons

Wrapper for Bootstrap ribbons

Markup:
<span class="ribbon {{modifier_class}}">ribbon</span>

.ribbon-primary		- &nbsp;
.ribbon-secondary	- &nbsp;
.ribbon-info			- &nbsp;
.ribbon-warning		- &nbsp;
.ribbon-danger		- &nbsp;
.ribbon-success		- &nbsp;
.ribbon-inverse		- &nbsp;
.ribbon-light		- &nbsp;
.ribbon-dark			- &nbsp;

Styleguide Elementribbons
*/
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute; }
  .ribbon:before, .ribbon:after {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    border: 5px solid #1E88E5; }
  .ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 11px 0;
    background-color: #1E88E5;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center; }
  .ribbon.ribbon-primary {
    color: #FFFFFF;
    background-color: #3F51B5; }
  .ribbon.ribbon-secondary {
    color: #FFFFFF;
    background-color: #757575; }
  .ribbon.ribbon-success:before, .ribbon.ribbon-success:after {
    border: 5px solid #43A047; }
  .ribbon.ribbon-success span {
    background-color: #43A047; }
  .ribbon.ribbon-warning:before, .ribbon.ribbon-warning:after {
    border: 5px solid #FB8C00; }
  .ribbon.ribbon-warning span {
    background-color: #FB8C00; }
  .ribbon.ribbon-danger:before, .ribbon.ribbon-danger:after {
    border: 5px solid #E53935; }
  .ribbon.ribbon-danger span {
    background-color: #E53935; }
  .ribbon.ribbon-info:before, .ribbon.ribbon-info:after {
    border: 5px solid #1E88E5; }
  .ribbon.ribbon-info span {
    background-color: #1E88E5; }
  .ribbon.ribbon-inverse:before, .ribbon.ribbon-inverse:after {
    border: 5px solid #212121; }
  .ribbon.ribbon-inverse span {
    background-color: #212121; }
  .ribbon.ribbon-light:before, .ribbon.ribbon-light:after {
    border: 5px solid #BDBDBD; }
  .ribbon.ribbon-light span {
    background-color: #BDBDBD; }
  .ribbon.ribbon-dark:before, .ribbon.ribbon-dark:after {
    border: 5px solid #616161; }
  .ribbon.ribbon-dark span {
    background-color: #616161; }
  .ribbon.ribbon-orange {
    color: #FFFFFF;
    background-color: #FF9800; }
  .ribbon.ribbon-top-right {
    top: -6px;
    right: -7px; }
    .ribbon.ribbon-top-right:before, .ribbon.ribbon-top-right:after {
      border-top-color: transparent;
      border-right-color: transparent; }
    .ribbon.ribbon-top-right:before {
      top: 0;
      left: 0; }
    .ribbon.ribbon-top-right:after {
      bottom: 0;
      right: 0; }
    .ribbon.ribbon-top-right span {
      left: -25px;
      top: 35px;
      transform: rotate(45deg); }

.card.card-cpq .ribbon.ribbon-top-right {
  top: -11px; }

/* 
Component: Select2

Weight: 100

Styleguide ComponentSelect2
*/
.select2-container--bootstrap .select2-selection--multiple {
  padding: 2px 0px 7px; }
  .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    background-color: #F5F5F5;
    font-weight: normal;
    padding: 4px 0px 4px 6px;
    border-color: #757575; }
    .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
      float: right;
      padding: 0px 6px;
      margin-left: 6px;
      margin-right: 0px;
      border-left: 1px solid #E0E0E0; }
      .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
        background-color: #E0E0E0; }
  .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered .select2-search--inline {
    width: 100%; }
    .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered .select2-search--inline .select2-search__field {
      width: 100% !important; }

.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
  padding-right: 6px; }

.select2-container--bootstrap.select2-container--open .select2-selection--multiple .select2-search--inline {
  width: 100% !important; }
  .select2-container--bootstrap.select2-container--open .select2-selection--multiple .select2-search--inline .select2-search__field:not([placeholder='']) {
    width: 100% !important; }

.select2-container--bootstrap .select2-results > .select2-results__options {
  border-top: 1px solid #E0E0E0;
  max-height: 340px !important; }
  .select2-container--bootstrap .select2-results > .select2-results__options .select2-results__option.loading-results:before {
    content: "\f110";
    font-family: "FontAwesome";
    margin-right: 5px; }
  .select2-container--bootstrap .select2-results > .select2-results__options .select2-results__option .select2-results__group {
    color: #9E9E9E;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: normal; }
  .select2-container--bootstrap .select2-results > .select2-results__options .select2-results__option .select2-results__options--nested .select2-results__option {
    padding-left: 30px; }
  .select2-container--bootstrap .select2-results > .select2-results__options .select2-results__option[aria-selected=true] {
    color: #9E9E9E; }
    .select2-container--bootstrap .select2-results > .select2-results__options .select2-results__option[aria-selected=true]:hover {
      background-color: #ffffff; }

select.read-only + .select2 {
  pointer-events: none; }
  select.read-only + .select2 .select2-selection {
    background-color: #e9ecef; }

select.isloading + .select2 {
  pointer-events: none; }
  select.isloading + .select2 .select2-selection .select2-selection__rendered {
    visibility: hidden; }
  select.isloading + .select2 .select2-selection:before {
    content: "\f110";
    font-family: "FontAwesome";
    position: absolute;
    left: 12px;
    top: 6px; }

select.js-select.no-search + .select2-container--bootstrap .select2-search__field {
  visibility: hidden; }

.input-group > .select2-container--bootstrap {
  width: 1% !important; }
  .input-group > .select2-container--bootstrap .select2-selection {
    width: 100%; }

.card .card-header .select2-container--bootstrap .select2-selection__placeholder {
  font-weight: normal;
  color: #9E9E9E; }

.card.card-search .search .select2-container--bootstrap .select2-selection--multiple {
  padding: 0px; }
  .card.card-search .search .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    padding: 0px 0px 0px 6px;
    font-size: 0.8em; }
  .card.card-search .search .select2-container--bootstrap .select2-selection--multiple .select2-search--inline {
    float: none; }

.backoffice .search .search-options .select2-container--bootstrap .select2-selection--single {
  font-size: .875rem;
  line-height: 1.5;
  font-weight: normal;
  height: calc(1.5em + .5rem + 2px);
  padding: .25rem .75rem; }

/* 
Element: Shadows

This is the shadow depth guide per [Google Material Design](https://material.io/design/environment/light-shadows.html#shadows). <span class="text-highlight">Note, these classes are for reference only and should NOT be used by itself.</span>

Markup:
<div class="shadow-depth {{modifier_class}}" style="width:20rem; padding:1rem;">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, sem quis faucibus iaculis.</p>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
		<li>Vivamus auctor lacus eu diam ultricies laoreet.</li>
		<li>Mauris eu purus sollicitudin, ornare massa vel, dictum ex.</li>
	</ul>
</div>

.depth-1		- This is the shadow depth for permanent tiles
.depth-2		- &nbsp;
.depth-3		- This is the shadow depth for tiles that appear and disappear, ex: dropdown menus and popup alerts
.depth-4		- This is the shadow depth for navs
.depth-5		- This is the shadow depth for modals

Styleguide ElementShadows
*/
.shadow-depth {
  box-shadow: none; }
  .shadow-depth.depth-1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  .shadow-depth.depth-2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .shadow-depth.depth-3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
  .shadow-depth.depth-4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
  .shadow-depth.depth-5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }

.slide-panel {
  overflow-y: auto;
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.4); }
  .slide-panel.animated {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-timing-function: linear; }
  .slide-panel .slide-panel-heading {
    position: relative;
    padding: 1.2em 1em; }
    .slide-panel .slide-panel-heading h2 {
      font-size: 1.5em;
      margin: 0;
      color: #000000; }
      .slide-panel .slide-panel-heading h2 i.fa-bell {
        color: #FF9800;
        font-size: 0.9em; }
      .slide-panel .slide-panel-heading h2 a.close {
        float: none;
        font-size: 1em;
        position: absolute;
        opacity: 1;
        right: 10px;
        top: 2px;
        margin: 0;
        padding: 0 !important; }
        .slide-panel .slide-panel-heading h2 a.close i {
          font-size: 1em;
          font-weight: normal;
          text-shadow: none;
          margin: 0 !important; }
          .slide-panel .slide-panel-heading h2 a.close i.fa-times {
            color: #000000 !important; }
  .slide-panel .slide-panel-body {
    position: relative; }
    .slide-panel .slide-panel-body ul.list-unstyled {
      margin: 0;
      padding: 0; }
    .slide-panel .slide-panel-body .alert {
      font-weight: normal;
      box-shadow: none;
      margin: 0 0 0.5em 0;
      padding: 0.5em 40px 1em 20px;
      color: inherit;
      background-color: inherit;
      border-width: 0;
      position: relative;
      border-bottom: solid 1px #E0E0E0; }
      .slide-panel .slide-panel-body .alert:before {
        display: none; }
      .slide-panel .slide-panel-body .alert h4 {
        font-weight: bold;
        font-size: 85%;
        color: #888888;
        padding-bottom: 0;
        margin-bottom: 0.5em;
        margin-top: 0.5em; }
        .slide-panel .slide-panel-body .alert h4 em {
          font-weight: normal;
          margin-left: 10px; }
      .slide-panel .slide-panel-body .alert p {
        margin: 0; }
        .slide-panel .slide-panel-body .alert p a {
          float: none !important; }
      .slide-panel .slide-panel-body .alert .close {
        float: none;
        font-size: 1em;
        position: absolute;
        opacity: 1;
        right: 20px;
        top: 2px;
        margin: 0;
        padding: 0; }
        .slide-panel .slide-panel-body .alert .close i {
          font-size: 1em;
          font-weight: normal;
          text-shadow: none;
          color: #E53935; }
  .slide-panel.slide-panel-default {
    background-color: #ffffff;
    color: #424242; }
    .slide-panel.slide-panel-default .slide-panel-body {
      border-top: 1px solid #E0E0E0; }
  .slide-panel.slide-panel-primary {
    background-color: #3F51B5;
    color: #FFFFFF; }
    .slide-panel.slide-panel-primary .slide-panel-body {
      border-top: 1px solid #7986CB; }
  .slide-panel.slide-panel-success {
    background-color: #43A047;
    color: #FFFFFF; }
  .slide-panel.slide-panel-warning {
    background-color: #FB8C00;
    color: #FFFFFF; }
  .slide-panel.slide-panel-danger {
    background-color: #E53935;
    color: #FFFFFF; }
  .slide-panel.slide-panel-info {
    background-color: #1E88E5;
    color: #FFFFFF; }
  .slide-panel.slide-panel-inverse {
    background-color: #000000;
    color: #FFFFFF; }
    .slide-panel.slide-panel-inverse button.close {
      color: #424242; }

/* 
Component: Drag and Drop

This drag-and-drop component based the [IW JS API Sortable Object](https://insight.innovativewayinc.com/development/languages/javascript/iw-sitemaker-api/sortable/)

### Standard UX
- After drag-and-drop, a success popup should appear
- The drag-and-drop icon is the <i class="fa fa-bars"></i> [`Bars`](https://fontawesome.com/v4.7.0/icon/bars) icon from Font Awesome per Google Material Design
- <span class="text-highlight">Only the drag-and-drop icon is draggable.</span>

Weight: 100

Styleguide ComponentDragAndDrop
*/
/* 
List

Add <span class="text-hightlight">`data-drag-id="XXX"`</span> to the `<li>` to identify the ID

Markup:
<ol class="js-sortable" data-draggeable-handle-selector=".drag-handle">
<li data-drag-id="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li data-drag-id="2">Suspendisse non mi quis mauris molestie rhoncus vel nec quam.</li>
<li data-drag-id="3">Integer vulputate sapien eu nibh fermentum gravida.</li>
<li data-drag-id="4">Vivamus ullamcorper odio eget porta posuere.</li>
<li data-drag-id="4">Maecenas iaculis velit id porttitor porttitor.</li>
</ol>

Styleguide ComponentDragAndDrop.List
*/
/* 
Table

Add <span class="text-hightlight">`data-drag-id="XXX"`</span> to the `<tr>` to identify the ID

Markup:
<table class="table table-hover js-sortable" data-draggeable-handle-selector=".drag-handle">
	<thead>
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Column 3</th>
		</tr>
	</thead>
	<tbody>
		<tr data-drag-id="1">
			<td>Lorem ipsum dolor sit</td>
			<td>amet consectetur</td>
			<td>adipiscing elit</td>
		</tr>
		<tr data-drag-id="2">
			<td>Suspendisse non mi</td>
			<td>quis mauris molestie rhoncus</td>
			<td>vel nec quam</td>
		</tr>
		<tr data-drag-id="3">
			<td>Integer vulputate sapien</td>
			<td>eu nibh fermentum</td>
			<td>gravida</td>
		</tr>
		<tr data-drag-id="4">
			<td>Maecenas iaculis</td>
			<td>velit id</td>
			<td>porttitor porttitor</td>
		</tr>
	</tbody>
</table>

Styleguide ComponentDragAndDrop.Table
*/
.js-sortable .sortable-chosen {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border: solid 3px #66afe9; }

.js-sortable .drag-handle::before {
  content: "\f0c9";
  font-family: "FontAwesome";
  color: #9E9E9E;
  margin-left: 10px;
  cursor: grab;
  float: right; }

.js-sortable .drag-handle:hover::before {
  color: #424242; }

.js-sortable .text-center > .drag-handle::before {
  margin-left: 0;
  float: none; }

/* 
Element: Tables

Wrapper for Bootstrap tables

Note: By default, data is in order of <span class="text-highlight">A-Z</span> unless noted otherwise in business rules.

Markup: ..\tables.hbs

.table-primary		- &nbsp;
.table-info			- &nbsp;
.table-warning		- &nbsp;
.table-danger		- &nbsp;
.table-success		- &nbsp;
.table-inverse		- &nbsp;

Styleguide ElementTables
*/
.table .label {
  position: relative;
  top: -0.1em; }

.table thead tr th {
  padding: .75rem; }
  .table thead tr th.multiselect {
    text-align: center;
    width: 40px;
    padding-right: 0; }

.table tbody tr td {
  padding: .75rem; }
  .table tbody tr td.icon {
    text-align: center;
    width: 64px; }
    .table tbody tr td.icon a.fa:hover {
      text-decoration: none; }
  .table tbody tr td.multiselect {
    text-align: center;
    width: 40px;
    padding-right: 0; }
  .table tbody tr td.cell-progress {
    text-align: center; }
    .table tbody tr td.cell-progress .progress {
      height: 20px; }
    .table tbody tr td.cell-progress .progress-title {
      margin-top: 0.25em;
      font-size: 85%;
      color: #9E9E9E; }
  .table tbody tr td i.fa {
    font-size: 1.4em; }
    .table tbody tr td i.fa.fa-3x {
      font-size: 3em; }
  .table tbody tr td small i.fa {
    font-size: 1em; }
  .table tbody tr td a.fa {
    display: none;
    font-size: 1.4em; }
    .table tbody tr td a.fa.fa-times-circle {
      color: #E53935; }
      .table tbody tr td a.fa.fa-times-circle.text-muted {
        color: #BDBDBD;
        pointer-events: none; }
    .table tbody tr td a.fa.fa-minus-circle {
      color: #E53935; }
      .table tbody tr td a.fa.fa-minus-circle.text-muted {
        color: #BDBDBD;
        pointer-events: none; }
    .table tbody tr td a.fa.fa-sign-out {
      color: #E53935; }
      .table tbody tr td a.fa.fa-sign-out.text-muted {
        color: #BDBDBD;
        pointer-events: none; }
    .table tbody tr td a.fa.text-muted {
      color: #BDBDBD; }

.table tbody tr:hover > td > a.fa {
  display: block !important; }
  .table tbody tr:hover > td > a.fa.d-none {
    display: none !important; }

.table tbody tr:hover > td > span > a.fa {
  display: block !important; }
  .table tbody tr:hover > td > span > a.fa.d-none {
    display: none !important; }

.table tbody tr.child > td {
  padding: 0;
  border-top-width: 0; }

.table tbody tr.child:hover {
  background-color: inherit; }

.table tbody tr.child .table {
  margin-bottom: 0; }
  .table tbody tr.child .table tbody tr td {
    background-color: #F5F5F5; }
    .table tbody tr.child .table tbody tr td:first-child {
      padding-left: 70px; }

.table tbody tr.active td,
.table tbody tr.active th,
.table thead tr.active td,
.table thead tr.active th {
  background-color: #C5CAE9; }

.table tbody tr.primary td,
.table tbody tr.primary th,
.table thead tr.primary td,
.table thead tr.primary th {
  background-color: #C5CAE9; }

.table tbody tr.success td,
.table tbody tr.success th,
.table thead tr.success td,
.table thead tr.success th {
  background-color: #A5D6A7; }

.table tbody tr.warning td,
.table tbody tr.warning th,
.table thead tr.warning td,
.table thead tr.warning th {
  background-color: #FFCC80; }

.table tbody tr.danger td,
.table tbody tr.danger th,
.table thead tr.danger td,
.table thead tr.danger th {
  background-color: #EF9A9A; }

.table tbody tr.info td,
.table tbody tr.info th,
.table thead tr.info td,
.table thead tr.info th {
  background-color: #90CAF9; }

.table tbody tr.inverse td,
.table tbody tr.inverse th,
.table thead tr.inverse td,
.table thead tr.inverse th {
  background-color: #424242;
  color: #FFFFFF; }

.table.table-primary {
  background-color: inherit; }
  .table.table-primary thead th {
    background-color: #C5CAE9;
    border-bottom-color: #9FA8DA; }
    .table.table-primary thead th a {
      color: #424242; }

.table.table-success {
  background-color: inherit; }
  .table.table-success thead th {
    background-color: #A5D6A7;
    border-bottom-color: #81C784; }

.table.table-warning {
  background-color: inherit; }
  .table.table-warning thead th {
    background-color: #FFCC80;
    border-bottom-color: #FFB74D; }

.table.table-danger {
  background-color: inherit; }
  .table.table-danger thead th {
    background-color: #EF9A9A;
    border-bottom-color: #E57373; }

.table.table-info {
  background-color: inherit; }
  .table.table-info thead th {
    background-color: #90CAF9;
    border-bottom-color: #64B5F6; }

.table.table-inverse {
  background-color: inherit; }
  .table.table-inverse thead th {
    background-color: #424242;
    border-bottom-color: #212121;
    color: #FFFFFF; }

.table.table-bordered {
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0; }
  .table.table-bordered thead th {
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 3px; }
  .table.table-bordered thead tr:nth-child(1) th {
    border-top-width: 0; }
  .table.table-bordered tbody td,
  .table.table-bordered tbody th {
    border-left-width: 0;
    border-right-width: 0; }

.table.table-striped tbody tr:hover {
  background-color: initial; }

.table.table-striped tbody tr:nth-of-type(odd) {
  background-color: initial; }

.table.table-striped.table-hover tbody tr:hover {
  background-color: #F5F5F5; }

.table.table-wordbreakall tbody tr td {
  word-break: break-all; }

.table.auto-width {
  width: 100% !important; }
  .table.auto-width th {
    width: auto !important; }
  .table.auto-width td {
    width: auto !important; }

.table.table-cpq thead th {
  padding: .75em .75em; }

.table.table-cpq tbody tr td {
  padding: .75em .75em; }
  .table.table-cpq tbody tr td input {
    border-color: #EEEEEE; }
    .table.table-cpq tbody tr td input[disabled] {
      background-color: #ffffff; }
    .table.table-cpq tbody tr td input[type="number"] {
      text-align: right; }
  .table.table-cpq tbody tr td.cpq-qty {
    padding: 0; }
    .table.table-cpq tbody tr td.cpq-qty label {
      padding: 1.25em .75em;
      margin-bottom: 0; }
    .table.table-cpq tbody tr td.cpq-qty.highlight {
      background-color: #BBDEFB; }
  .table.table-cpq tbody tr td.cpq-override input[type="number"] {
    pointer-events: none; }
    .table.table-cpq tbody tr td.cpq-override input[type="number"].cpq-default {
      display: block; }
    .table.table-cpq tbody tr td.cpq-override input[type="number"].cpq-override {
      display: none; }
  .table.table-cpq tbody tr td.cpq-override.highlight input[type="number"] {
    pointer-events: initial;
    border-color: #424242; }
    .table.table-cpq tbody tr td.cpq-override.highlight input[type="number"].cpq-default {
      display: none; }
    .table.table-cpq tbody tr td.cpq-override.highlight input[type="number"].cpq-override {
      display: block; }

.table.table-cpq tbody tr[data-isadd="0"] input[name$=_qty], .table.table-cpq tbody tr[data-isadd="0"] input[name$=_unitprice], .table.table-cpq tbody tr[data-isadd="0"] input[name$=_subtotal] {
  display: none; }

.table.table-cpq tbody tr[data-isadd="0"] .control-switch {
  display: none; }

.table.table-cpq-splitpayment thead th {
  padding: .75em 0em; }

.table.table-cpq-splitpayment tbody tr {
  position: relative; }
  .table.table-cpq-splitpayment tbody tr td {
    padding: .75em 0em;
    vertical-align: middle; }
    .table.table-cpq-splitpayment tbody tr td .fa:before {
      font-size: 1rem; }
    .table.table-cpq-splitpayment tbody tr td .pin {
      display: block;
      left: -50px;
      top: 9px; }
      .table.table-cpq-splitpayment tbody tr td .pin:after {
        border-top-width: 18px; }

body.dark .table {
  color: #E0E0E0; }
  body.dark .table thead tr th {
    border-top-color: #616161;
    border-bottom-color: #616161; }
  body.dark .table tbody tr td {
    border-top-color: #616161; }
  body.dark .table.table-hover tbody tr:hover {
    background-color: #424242;
    color: #E0E0E0; }

/* 
QueryGrid

Wrapper for Bootstrap tables

Markup:
<table class="table {{modifier_class}}">
	<thead>
		<tr>
			<th>Column 1</th>
			<th class="headerdesc"><a href="">Column 2</a></th>
			<th class="headerasc"><a href="">Column 3</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>lorem ipsum</td>
			<td>dolor sit amet</td>
			<td>consectetur</td>
		</tr>
		<tr>
			<td>lorem ipsum</td>
			<td>dolor sit amet</td>
			<td>consectetur</td>
		</tr>
		<tr>
			<td>lorem ipsum</td>
			<td>dolor sit amet</td>
			<td>consectetur</td>
		</tr>
		<tr>
			<td>lorem ipsum</td>
			<td>dolor sit amet</td>
			<td>consectetur</td>
		</tr>
	</tbody>
</table>

.querygrid			- &nbsp;

Styleguide ElementTables.QueryGrid
*/
.table.querygrid thead tr th {
  font-size: 90%;
  padding: 0.75rem 1rem; }
  .table.querygrid thead tr th.headerdesc a:before {
    font-family: 'FontAwesome';
    content: "\f078";
    margin-right: 0.4em;
    font-size: 70%;
    padding: 5px 5px 5px 5px;
    top: -2px;
    position: relative;
    background-color: #FB8C00;
    color: #FFFFFF;
    border-radius: 0.5rem; }
  .table.querygrid thead tr th.headerasc a:before {
    font-family: 'FontAwesome';
    content: "\f077";
    margin-right: 0.4em;
    font-size: 70%;
    padding: 5px 5px 5px 5px;
    top: -2px;
    position: relative;
    background-color: #FB8C00;
    color: #FFFFFF;
    border-radius: 0.5rem; }

.table.querygrid tbody tr th, .table.querygrid tbody tr td {
  padding: 0.75rem 1rem; }

.table.querygrid tbody tr td {
  vertical-align: middle; }
  .table.querygrid tbody tr td a.fa {
    display: block;
    color: #E0E0E0; }
  .table.querygrid tbody tr td.charts-chain {
    max-width: 450px;
    overflow: hidden;
    position: relative;
    text-align: left; }
    .table.querygrid tbody tr td.charts-chain .chart.chart-chain .highcharts-container {
      position: absolute; }
    .table.querygrid tbody tr td.charts-chain .chart.chart-chain:hover {
      overflow-x: auto; }
  .table.querygrid tbody tr td.table-success a.fa {
    color: #424242; }
  .table.querygrid tbody tr td code {
    word-break: break-all; }

.table.querygrid tbody tr.child > td {
  padding: 0; }

.table.querygrid tbody tr:hover td a.fa {
  color: #1976D2; }
  .table.querygrid tbody tr:hover td a.fa.fa-times {
    color: #9f1815; }

.table.table-sortable thead th {
  cursor: pointer; }
  .table.table-sortable thead th.sort-asc:before, .table.table-sortable thead th.headerasc:before {
    font-family: 'FontAwesome';
    font-size: 1.3em;
    line-height: 1em;
    content: "\f0d8";
    margin-right: 5px; }
  .table.table-sortable thead th.sort-desc:before, .table.table-sortable thead th.headerdesc:before {
    font-family: 'FontAwesome';
    font-size: 1.3em;
    line-height: 1em;
    content: "\f0d7";
    margin-right: 5px; }

/* 
Element: Pagination

Wrapper for Bootstrap Pagination

Markup: ../pagination.hbs

Styleguide ElementPagination
*/
.resultsnav {
  font-size: 1.1em; }
  .resultsnav p {
    font-weight: bold;
    margin-bottom: 0; }
    .resultsnav p span.badge {
      position: relative;
      top: -1px;
      margin: 0 5px;
      font-size: 90%; }
      .resultsnav p span.badge.badge-secondary {
        background-color: #9E9E9E; }
  .resultsnav .resultsnav-desc {
    margin-bottom: 0;
    line-height: 30px; }
  .resultsnav .resultsnav-pagination ul {
    margin: 0;
    padding: 0; }
    .resultsnav .resultsnav-pagination ul li {
      display: block;
      float: left;
      line-height: 22px;
      width: 40px;
      background-color: #3F51B5;
      min-height: 24px;
      position: relative;
      top: -2px; }
      .resultsnav .resultsnav-pagination ul li ul {
        display: none; }
      .resultsnav .resultsnav-pagination ul li strong {
        background-color: #E0E0E0; }
      .resultsnav .resultsnav-pagination ul li a {
        text-align: center;
        height: 24px;
        display: block;
        width: 40px;
        position: absolute; }
        .resultsnav .resultsnav-pagination ul li a img {
          display: none; }
      .resultsnav .resultsnav-pagination ul li:before {
        min-height: 24px;
        font-family: 'FontAwesome';
        display: block;
        font-size: 0.8rem;
        color: #FFFFFF;
        position: absolute;
        padding: 0 1rem;
        top: 2px; }
      .resultsnav .resultsnav-pagination ul li:empty {
        background-color: #EEEEEE; }
        .resultsnav .resultsnav-pagination ul li:empty:before {
          color: #424242; }
      .resultsnav .resultsnav-pagination ul li.first {
        display: none; }
      .resultsnav .resultsnav-pagination ul li.previous {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem; }
        .resultsnav .resultsnav-pagination ul li.previous:before {
          content: "\f053"; }
      .resultsnav .resultsnav-pagination ul li.next {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem; }
        .resultsnav .resultsnav-pagination ul li.next:before {
          content: "\f054"; }
      .resultsnav .resultsnav-pagination ul li.last {
        display: none; }

body.dark .resultsnav .resultsnav-pagination ul li {
  background-color: inherit; }

/* 
Auto-Numbered

This is a table that is auto-numbered by adding the `table-numbered` class, ex:

<code>&lt;table class="table table-hover <span class="text-highlight">table-numbered</span>"&gt;</code>

Markup:
<table class="table table-hover table-numbered">
	<thead>
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Column 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>lorem ipsum</td>
			<td>dolor sit amet</td>
			<td>consectetur</td>
		</tr>
		<tr>
			<td>lorem ipsum</td>
			<td>dolor sit amet</td>
			<td>consectetur</td>
		</tr>
		<tr>
			<td>lorem ipsum</td>
			<td>dolor sit amet</td>
			<td>consectetur</td>
		</tr>
		<tr>
			<td>lorem ipsum</td>
			<td>dolor sit amet</td>
			<td>consectetur</td>
		</tr>
	</tbody>
</table>

Styleguide ElementTables.AutoNumbered
*/
.table.table-numbered {
  counter-reset: table-counter; }
  .table.table-numbered thead tr:before {
    display: table-cell;
    padding: 0.75rem;
    content: " ";
    vertical-align: bottom;
    border-bottom: 2px solid #ddd; }
  .table.table-numbered tbody tr:before {
    display: table-cell;
    padding: 0.75rem;
    color: #9E9E9E;
    text-align: center;
    counter-increment: table-counter;
    content: counter(table-counter);
    vertical-align: top;
    border-top: 1px solid #E0E0E0; }

@media (max-width: 1199.98px) {
  .table-container {
    overflow: scroll; }
    .table-container .table {
      width: auto; } }

.tile .tile-footer .tile-count:before {
  content: "Count"; }

.tile .tile-footer .tile-count[data-text="0"] {
  display: none; }

/* 
Component: Timelines

Markup:
<ul class="timeline one-sided auto-count {{modifier_class}}">
    <li>
        <div class="timeline-panel">
            <h4>Heading</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, sem quis faucibus iaculis, dolor enim pharetra quam, sagittis finibus libero lacus a diam.</p>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Vivamus auctor lacus eu diam ultricies laoreet.</li>
                <li>Mauris eu purus sollicitudin, ornare massa vel, dictum ex.</li>
            </ul>
        </div>
    </li>
    <li>
        <div class="timeline-panel">
            <h4>Heading</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, sem quis faucibus iaculis, dolor enim pharetra quam, sagittis finibus libero lacus a diam.</p>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Vivamus auctor lacus eu diam ultricies laoreet.</li>
                <li>Mauris eu purus sollicitudin, ornare massa vel, dictum ex.</li>
            </ul>
        </div>
    </li>
    <li>
        <div class="timeline-panel">
            <h4>Heading</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, sem quis faucibus iaculis, dolor enim pharetra quam, sagittis finibus libero lacus a diam.</p>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Vivamus auctor lacus eu diam ultricies laoreet.</li>
                <li>Mauris eu purus sollicitudin, ornare massa vel, dictum ex.</li>
            </ul>
        </div>
    </li>
</ul>

.primary		- &nbsp;
.secondary		- &nbsp;
.info			- &nbsp;
.warning		- &nbsp;
.danger			- &nbsp;
.success		- &nbsp;
.inverse		- &nbsp;
.light			- &nbsp;
.dark			- &nbsp;

Weight: 100

Styleguide ComponentTimelines
*/
.timeline {
  list-style: none;
  padding: 1em 0 0 0;
  position: relative;
  margin: 0px; }
  .timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 4px;
    background-color: #E0E0E0;
    left: 50%;
    margin-left: -1.5px; }
  .timeline > li {
    margin-bottom: 0px;
    position: relative; }
    .timeline > li .timeline-panel {
      width: 46%;
      float: left;
      padding: 20px;
      position: relative;
      background-color: #ffffff;
      margin-bottom: 1em;
      cursor: move;
      border-top: 1px solid #E0E0E0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
      .timeline > li .timeline-panel .label-orange, .timeline > li .timeline-panel .btn-orange {
        background-color: #FF9800;
        color: #FFFFFF; }
      .timeline > li .timeline-panel:before {
        position: absolute;
        top: 26px;
        right: -15px;
        display: inline-block;
        border-top: 15px solid transparent;
        border-left: 15px solid #E0E0E0;
        border-right: 0 solid #E0E0E0;
        border-bottom: 15px solid transparent;
        content: " "; }
      .timeline > li .timeline-panel:after {
        position: absolute;
        top: 27px;
        right: -14px;
        display: inline-block;
        border-top: 14px solid transparent;
        border-left: 14px solid #E0E0E0;
        border-right: 0 solid #E0E0E0;
        border-bottom: 14px solid transparent;
        content: " "; }
      .timeline > li .timeline-panel h4 {
        margin-top: 0;
        padding-bottom: 1em;
        border-bottom: solid 1px #EEEEEE;
        margin-bottom: 1em; }
      .timeline > li .timeline-panel i {
        margin: 0 .2em;
        font-size: 1.4em; }
      .timeline > li .timeline-panel .inline-note p {
        margin-top: .5em; }
    .timeline > li .timeline-badge {
      color: #fff;
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 1.4em;
      text-align: center;
      position: absolute;
      top: 16px;
      left: 50%;
      margin-left: -25px;
      background-color: #999999;
      border-radius: 50%;
      cursor: move;
      z-index: auto;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
      .timeline > li .timeline-badge.primary {
        background-color: #3F51B5 !important; }
      .timeline > li .timeline-badge.success {
        background-color: #43A047 !important; }
      .timeline > li .timeline-badge.warning {
        background-color: #FB8C00 !important; }
      .timeline > li .timeline-badge.danger {
        background-color: #E53935 !important; }
      .timeline > li .timeline-badge.info {
        background-color: #1E88E5 !important; }
    .timeline > li p {
      margin-bottom: 1em; }
  .timeline > li:before, .timeline > li:after {
    content: " "; }
  .timeline > li.clearfix {
    margin-bottom: 20px; }
  .timeline > li.timeline-inverted {
    padding-top: 80px; }
    .timeline > li.timeline-inverted .timeline-badge {
      top: 96px; }
    .timeline > li.timeline-inverted .timeline-panel {
      float: right; }
      .timeline > li.timeline-inverted .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto; }
      .timeline > li.timeline-inverted .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto; }
  .timeline .timeline-title {
    margin-top: 0;
    color: inherit; }
  .timeline .timeline-body > p,
  .timeline .timeline-body > ul {
    margin-bottom: 1em; }
  .timeline .timeline-body > p + p {
    margin-top: 5px; }
  .timeline .timeline-body p img {
    padding: 0px;
    border-radius: 0px; }
  .timeline.one-sided:before {
    left: 40px; }
  .timeline.one-sided > li .timeline-panel {
    width: calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px); }
  .timeline.one-sided > li .timeline-badge {
    left: 15px;
    margin-left: 0;
    top: 16px; }
  .timeline.one-sided > li .timeline-panel {
    float: right; }
    .timeline.one-sided > li .timeline-panel:before {
      border-left-width: 0;
      border-right-width: 15px;
      left: -15px;
      right: auto; }
    .timeline.one-sided > li .timeline-panel:after {
      border-left-width: 0;
      border-right-width: 14px;
      left: -14px;
      right: auto; }
  .timeline.one-sided > li:after {
    display: block;
    clear: both;
    margin-bottom: 1em; }
  .timeline.auto-count {
    counter-reset: timeline-counter; }
    .timeline.auto-count > li:before {
      counter-increment: timeline-counter;
      content: counter(timeline-counter);
      color: #fff;
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 1.4em;
      text-align: center;
      position: absolute;
      top: 16px;
      left: 39px;
      margin-left: -25px;
      background-color: #9E9E9E;
      border-radius: 50%; }
    .timeline.auto-count > li.info:before {
      background-color: #1E88E5; }
    .timeline.auto-count > li.danger:before {
      background-color: #E53935; }
    .timeline.auto-count > li.success:before {
      background-color: #43A047; }
    .timeline.auto-count > li.warning:before {
      background-color: #FB8C00; }
    .timeline.auto-count > li .timeline-badge {
      display: none; }
    .timeline.auto-count.info:before {
      background-color: #1976D2; }
    .timeline.auto-count.info > li:before {
      background-color: #1E88E5; }
    .timeline.auto-count.success:before {
      background-color: #388E3C; }
    .timeline.auto-count.success > li:before {
      background-color: #43A047; }
    .timeline.auto-count.danger:before {
      background-color: #D32F2F; }
    .timeline.auto-count.danger > li:before {
      background-color: #E53935; }
    .timeline.auto-count.warning:before {
      background-color: #F57C00; }
    .timeline.auto-count.warning > li:before {
      background-color: #FB8C00; }
  .timeline.auditlog .auditlog-profile {
    display: block;
    float: left;
    width: 34px;
    border-radius: 50%;
    border: 2px solid #9E9E9E;
    margin-right: 10px; }
  .timeline.auditlog .auditlog-name {
    margin: 0;
    font-weight: bold; }
  .timeline.auditlog .auditlog-date {
    font-size: 85%; }
  .timeline.auditlog .auditlog-area {
    font-size: 1.25em;
    font-weight: bold; }
  .timeline.auditlog .timeline-badge {
    font-size: 2em; }
  .timeline.auditlog .timeline-panel .label.label-audit-Update {
    background-color: #FB8C00; }
  .timeline.auditlog .timeline-panel .label.label-audit-Add {
    background-color: #43A047; }
  .timeline.auditlog .timeline-panel .label.label-audit-Delete {
    background-color: #E53935; }

.well .timeline .timeline-panel {
  background-color: #ffffff; }

.well.well-info .timeline:before {
  background-color: #1976D2; }

.well.well-info .timeline .timeline-panel {
  border-color: #1976D2; }
  .well.well-info .timeline .timeline-panel:before {
    border-left-color: #1976D2;
    border-right-color: #1976D2; }

.well.well-info .timeline .timeline-badge {
  background-color: #1E88E5; }

.well.well-info .timeline.auto-count > li:before {
  background-color: #1E88E5; }

.well.well-success .timeline:before {
  background-color: #388E3C; }

.well.well-success .timeline .timeline-panel {
  border-color: #388E3C; }
  .well.well-success .timeline .timeline-panel:before {
    border-left-color: #388E3C;
    border-right-color: #388E3C; }

.well.well-success .timeline .timeline-badge {
  background-color: #43A047; }

.well.well-success .timeline.auto-count > li:before {
  background-color: #43A047; }

@media (max-width: 767px) {
  ul.timeline:before {
    left: 40px; }
  ul.timeline > li .timeline-panel {
    width: calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px); }
  ul.timeline > li .timeline-badge {
    left: 15px;
    margin-left: 0;
    top: 16px; }
  ul.timeline > li .timeline-panel {
    float: right; }
  ul.timeline > li .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto; }
  ul.timeline > li .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto; } }

/* 
Element: Tooltip

Wrapper for [Bootstrap Tooltip](https://getbootstrap.com/docs/4.3/components/tooltips/).

### Standard UX Behavior
- Tooltips appear on mouse over and disappear on mouse out.

### Standard Verbiage
- Do not use the same text for the tooltip text as the name of the link, column name, toggle, icon, etc. Either provide something of value for the tooltip text or leave it blank.

### Non-Standard Code
- ABBV tag tooltip will not style, we are unable to get the tooltip to display like all our other Bootstrap tooltips so using TEXT component and styling it like an ABBV tag.

Markup:
<p><span data-toggle="tooltip" title="Tooltip here">Lorem ipsum dolor sit amet.</span></p>

Styleguide ElementTooltip
*/
/* 
Direction

Direction is specified using the `data-placement` attribute, ex: `<span data-toggle="tooltip" title="Tooltip here" data-placement="bottom">Lorem ipsum dolor sit amet.</span>`

Markup:
<p><span data-toggle="tooltip" title="Tooltip here" data-placement="{{modifier_class}}">Lorem ipsum dolor sit amet.</span></p>

.top		- &nbsp;
.right		- &nbsp;
.bottom		- &nbsp;
.left		- &nbsp;

Styleguide ElementTooltip.Direction
*/
/* 
Kitchen Sink

Markup: tooltip-kitchensink.hbs

Styleguide ElementTooltip.KitchenSink
*/
span[data-toggle='tooltip'] {
  display: inline-block; }

.backoffice .tooltip .tooltip-inner {
  max-width: 400px; }
  .backoffice .tooltip .tooltip-inner .tooltip-html {
    text-align: left; }
    .backoffice .tooltip .tooltip-inner .tooltip-html ul {
      margin: 0;
      padding-left: 26px; }

/* 
Element: Text

We use the default Bootstrap font size. <span class="text-highlight">Do not override Bootstrap unless explicity required</span>.

Markup:
<p class="{{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra scelerisque pellentesque.</p>

.text-primary		- &nbsp;
.text-secondary		- &nbsp;
.text-info			- &nbsp;
.text-warning		- &nbsp;
.text-danger		- &nbsp;
.text-success		- &nbsp;
.text-inverse		- &nbsp;
.text-muted			- &nbsp;
.text-light			- &nbsp;
.text-dark			- &nbsp;
.text-darkgrey		- &nbsp;
.text-highlight		- &nbsp;

Styleguide ElementText
*/
/* 
Code

Markup:
<p>Lorem ipsum <code>dolor sit amet</code>, consectetur adipiscing elit. Aliquam viverra scelerisque pellentesque.</p>

Styleguide ElementText.Code
*/
/* 
Dotted Underline

Markup:
<p>Lorem ipsum <span id="" class="text-decoration" data-toggle="tooltip" title="" data-placement="top" data-original-title="hover text">dolor sit amet</span>, consectetur adipiscing elit. Aliquam viverra scelerisque pellentesque.</p>

Styleguide ElementText.Dotted
*/
/* 
Padding and Spacing

We use the default Bootstrap padding and spacing. <span class="text-highlight">Do not override Bootstrap unless explicity required</span>.

Markup: text-padding.hbs

Styleguide ElementText.Padding
*/
@font-face {
  font-family: 'Blokk';
  font-weight: 400;
  font-style: normal;
  src: url("https://iwcdn.s3.amazonaws.com/styles/blokkneue-regular.woff2") format("woff2"); }

blockquote {
  padding: 1rem 1.25rem;
  margin: 0 auto;
  width: 70%;
  font-size: 1.2rem;
  line-height: 1.5em;
  border-left: 1px solid #E0E0E0;
  border-left-width: 7px; }
  blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.8em;
    color: #9E9E9E; }

.text-primary {
  color: #3F51B5; }

.text-secondary {
  color: #FF9800; }

.text-success {
  color: #388E3C; }

.text-warning {
  color: #F57F17; }

.text-danger {
  color: #D32F2F; }

.text-info {
  color: #1976D2; }

.text-inverse {
  color: #1976D2; }

.text-muted {
  color: #9E9E9E; }

.fa.fa-primary {
  color: #3F51B5; }

.fa.fa-secondary {
  color: #FF9800; }

.fa.fa-success {
  color: #388E3C; }

.fa.fa-warning {
  color: #F57F17; }

.fa.fa-danger {
  color: #D32F2F; }

.fa.fa-info {
  color: #1976D2; }

.fa.fa-inverse {
  color: #1976D2; }

.text-mockup {
  font-family: "Blokk";
  color: #9E9E9E; }

.text-darkgrey {
  color: #424242; }

.text-small {
  font-size: 0.8em; }

.text-icon .fa:before {
  margin-right: 0.4em; }

.text-highlight {
  background-color: #FFF176;
  padding: 0px 5px;
  font-weight: bold; }

/**Not required for now
.text-more
{
	margin-left: 0.5em;
	a
	{
		span
		{
			&:after
			{
				content: "..."
			}
		}
	}
}
**/
.date-since span:before {
  content: none; }

.date-since span > span:before {
  content: "\f017";
  font-family: FontAwesome;
  padding-right: 0.4em; }

.date-since .tooltip:before {
  content: "";
  display: none; }

.date-since .tooltip span:before {
  content: "";
  display: none; }

code {
  font-size: 100%;
  background-color: #fef6f9;
  color: #E91E63;
  padding: 2px 4px; }

pre.code {
  padding: 0.25rem 0.5rem;
  background-color: #EEEEEE;
  font-family: monospace;
  font-size: 0.8rem; }

p.fieldformat {
  font-size: 85%;
  color: #9E9E9E;
  font-style: italic; }

.dark code {
  background-color: #5a0934;
  color: #F8BBD0; }

@media (max-width: 767px) {
  blockquote {
    margin: 0;
    width: auto; } }

.backoffice i.fa.animated {
  animation-iteration-count: infinite;
  animation-duration: 6s; }
  .backoffice i.fa.animated.fa-info-circle {
    color: #424242;
    animation-name: flash; }
    .backoffice i.fa.animated.fa-info-circle.text-danger {
      color: #D32F2F; }
    .backoffice i.fa.animated.fa-info-circle.text-success {
      color: #388E3C; }
  .backoffice i.fa.animated.fa-check-square {
    color: #388E3C;
    animation-duration: 2s;
    animation-name: heartBeat; }
  .backoffice i.fa.animated.fa-exclamation-triangle {
    color: #D32F2F;
    animation-duration: 2s;
    animation-name: heartBeat; }
  .backoffice i.fa.animated.rollIn {
    animation-iteration-count: 1;
    animation-duration: 1s; }

/* 
Element: Environment Header

Following are environment banners are used according to each environment. This is placed right after <code>&lt;body&gt;</code>.

Markup:
<div id="app-environment-header" class="{{modifier_class}}" style="position:initial; width:40%;"><span></span></div>

.app-dev		- &nbsp;
.app-uat		- &nbsp;
.app-beta		- &nbsp;

Styleguide ElementEnvironmentHeader
*/
#app-environment-header,
.app-environment-header {
  height: 30px;
  padding: 10px 3%;
  text-align: center;
  background-size: 120px 120px;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
  #app-environment-header span:before,
  .app-environment-header span:before {
    display: block;
    margin-top: 5px;
    font-size: 2em;
    font-weight: bold;
    color: #ffffff; }
  #app-environment-header.app-dev,
  .app-environment-header.app-dev {
    background-color: #E53935; }
    #app-environment-header.app-dev span:before,
    .app-environment-header.app-dev span:before {
      content: "DEV"; }
  #app-environment-header.app-uat,
  .app-environment-header.app-uat {
    background-color: #FB8C00; }
    #app-environment-header.app-uat span:before,
    .app-environment-header.app-uat span:before {
      content: "UAT"; }
  #app-environment-header.app-beta,
  .app-environment-header.app-beta {
    background-color: #1E88E5; }
    #app-environment-header.app-beta span:before,
    .app-environment-header.app-beta span:before {
      content: "BETA"; }

body.backoffice #app-environment-header,
body.backoffice .app-environment-header {
  height: 46px;
  padding: 4px 2%;
  text-align: center;
  background-size: 100px 100px;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  position: absolute;
  top: 0;
  right: 10%;
  z-index: 10000;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }

body.backoffice #app-environment-header {
  right: 245px; }
  body.backoffice #app-environment-header span:before {
    margin-top: 8px;
    font-size: 1.5em; }
  body.backoffice #app-environment-header.app-prod {
    display: none; }

body.backoffice #cl-environment-header {
  right: 70px; }
  body.backoffice #cl-environment-header span:before {
    margin-top: 8px;
    font-size: 1.5em; }
  body.backoffice #cl-environment-header.app-mo {
    background-color: #FB8C00; }
    body.backoffice #cl-environment-header.app-mo span:before {
      content: "CL MO"; }
  body.backoffice #cl-environment-header.app-prod {
    background-color: #43A047; }
    body.backoffice #cl-environment-header.app-prod span:before {
      content: "CL PROD"; }

body.backoffice #pl-environment-header {
  right: 70px;
  background-color: #FB8C00;
  padding: 4px 1.5rem; }
  body.backoffice #pl-environment-header span {
    display: block;
    margin-top: 8px;
    font-size: 1.5em;
    font-weight: bold;
    color: #ffffff; }

form .twitter-typeahead {
  width: 100%; }
  form .twitter-typeahead .tt-dropdown-menu, form .twitter-typeahead .tt-menu {
    position: absolute;
    top: 100% !important;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 0px 0 0;
    list-style: none;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-clip: padding-box; }
    form .twitter-typeahead .tt-dropdown-menu .tt-highlight, form .twitter-typeahead .tt-menu .tt-highlight {
      background-color: #ffff99; }
  form .twitter-typeahead .tt-menu {
    width: 100%; }
    form .twitter-typeahead .tt-menu p {
      font-size: 1rem; }
  form .twitter-typeahead .tt-suggestion {
    display: block; }
    form .twitter-typeahead .tt-suggestion p {
      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight: normal;
      color: #333333;
      white-space: nowrap;
      margin: 0; }
      form .twitter-typeahead .tt-suggestion p span.specs {
        display: inline; }
      form .twitter-typeahead .tt-suggestion p:hover {
        color: #ffffff;
        text-decoration: none;
        outline: 0;
        background-color: #428bca; }
        form .twitter-typeahead .tt-suggestion p:hover span.specs {
          color: #ffffff; }
        form .twitter-typeahead .tt-suggestion p:hover .tt-highlight {
          background-color: #428bca; }
      form .twitter-typeahead .tt-suggestion p:focus {
        color: #ffffff;
        text-decoration: none;
        outline: 0;
        background-color: #428bca; }
  form .twitter-typeahead .tt-suggestion.tt-cursor p {
    color: #ffffff;
    background-color: #428bca; }
  form .twitter-typeahead .tt-suggestion.tt-cursor p span.specs {
    color: #ffffff; }
  form .twitter-typeahead .tt-suggestion.tt-cursor .tt-highlight {
    background-color: #428bca; }

form .input-group span.twitter-typeahead {
  display: block !important; }
  form .input-group span.twitter-typeahead .tt-dropdown-menu {
    top: 32px !important; }

form .input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
  top: 44px !important; }

form .input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
  top: 28px !important; }

.switch {
  border: 1px solid #3F51B5;
  width: 22px;
  height: 13px;
  border-radius: 13px;
  cursor: pointer;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: 2px; }
  .switch .switch-toggle {
    border: 1px solid #3F51B5;
    width: 11px;
    height: 11px;
    left: 0;
    border-radius: 12px;
    background: white;
    position: relative;
    transition: left .2s ease-in-out; }
  .switch.on {
    background: #3F51B5; }
    .switch.on .switch-toggle {
      left: 10px; }
  .switch.disabled {
    cursor: not-allowed; }

/*
-------------------------------------------------------------------------------
DOM Elements
-------------------------------------------------------------------------------
*/
html, body {
  height: 100%; }

body {
  line-height: 1.5em; }
  body #contentwrapper {
    padding: 0 3em;
    padding-top: 1em;
    margin-left: 112px; }
    body #contentwrapper.slide-panel-active {
      margin-right: 400px;
      transition: .31s; }
    body #contentwrapper .container {
      padding: 20px 20px 4em 20px; }
  body.print #contentwrapper {
    margin-left: auto; }

i.loading-status {
  color: #9E9E9E;
  font-size: 3em;
  text-align: center;
  padding: 1em 0;
  display: block; }

i.get-flow {
  display: inline-block; }

form.resizeClass textarea {
  resize: vertical; }

.workflow-expand-chevron {
  font-size: 1em !important; }

.workflow-grid-text {
  font-weight: normal; }

.modal-content.modal-secondary {
  overflow: visible !important; }

.remove-self-from-team[data-is-owner="1"] {
  pointer-events: none; }

.deleteWorkflowStepButton {
  display: block !important; }

.delete-adhoc-step-icon {
  position: relative;
  bottom: 0.25em;
  float: right; }

#toggleButton {
  border: 1px solid #000000;
  width: 22px;
  height: 13px;
  border-radius: 13px;
  cursor: pointer;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: 2px;
  background: #EEEEEE; }
  #toggleButton #switchToggle {
    border: 1px solid #000000;
    width: 11px;
    height: 11px;
    left: 0;
    border-radius: 12px;
    background: #FFFFFF;
    position: relative;
    transition: left 0.2s ease-in-out; }
  #toggleButton[data-is-toggle="1"] {
    background: #3F51B5; }
  #toggleButton #switchToggle[data-is-toggle="1"] {
    left: 9px; }

.navbar-fixed-left.sidenav.navbar {
  z-index: 1; }

.request-detail-bundle-dropdown {
  color: #3F51B5; }

.step-detail-notes [data-can-delete="0"] .delete-button-hover {
  display: none; }

.more-actions-request-grid .dropdown {
  top: 0.25em !important; }

.toggleBtn {
  margin-left: 70%; }

.request-activity {
  margin-top: 3em; }

/* 
Component: Activity Feed

Markup: activityfeed.hbs

### Standard UX Behavior

- Key Step activities are denoted with an avatar and black text. Key activities are the following:
  - `AddNote`
  - `CancelRequest`
  - `CloseRequest`
  - `RejectStep`
  - `RejectWithInterimStep`
  - `UpdateRequestField`
  - `UploadFile`
- All other activities under More Actions or system activities do not have an avatar and muted text

Weight: 100

Styleguide ComponentActivityFeed
*/
/* 
Mini

Mini activity feed should only be used in context:
- Request Step

### Standard UX Behavior

- <span class="text-highlight">The delete icon should appear only on hover</span>

Markup: activityfeed-mini.hbs

Styleguide ComponentActivityFeed.Mini
*/
.activity-feed-items .activity-feed-item, .activity-feed-items .media, .activity-feed-box .activity-feed-item, .activity-feed-box .media {
  margin-top: 1em;
  margin-bottom: 1em; }
  .activity-feed-items .activity-feed-item .media-left, .activity-feed-items .media .media-left, .activity-feed-box .activity-feed-item .media-left, .activity-feed-box .media .media-left {
    min-width: 37px; }
    .activity-feed-items .activity-feed-item .media-left img, .activity-feed-items .media .media-left img, .activity-feed-box .activity-feed-item .media-left img, .activity-feed-box .media .media-left img {
      border: none;
      width: 36px;
      height: 36px; }
  .activity-feed-items .activity-feed-item .media-body, .activity-feed-items .media .media-body, .activity-feed-box .activity-feed-item .media-body, .activity-feed-box .media .media-body {
    vertical-align: top; }
    .activity-feed-items .activity-feed-item .media-body p, .activity-feed-items .media .media-body p, .activity-feed-box .activity-feed-item .media-body p, .activity-feed-box .media .media-body p {
      color: #424242;
      word-wrap: break-word;
      margin-bottom: 0; }
  .activity-feed-items .activity-feed-item.user-activity, .activity-feed-items .media.user-activity, .activity-feed-box .activity-feed-item.user-activity, .activity-feed-box .media.user-activity {
    font-size: .75rem;
    overflow: hidden;
    word-break: break-word; }
    .activity-feed-items .activity-feed-item.user-activity .media-left .avatar-xs, .activity-feed-items .media.user-activity .media-left .avatar-xs, .activity-feed-box .activity-feed-item.user-activity .media-left .avatar-xs, .activity-feed-box .media.user-activity .media-left .avatar-xs {
      height: 36px;
      width: 36px; }
      .activity-feed-items .activity-feed-item.user-activity .media-left .avatar-xs span.user, .activity-feed-items .media.user-activity .media-left .avatar-xs span.user, .activity-feed-box .activity-feed-item.user-activity .media-left .avatar-xs span.user, .activity-feed-box .media.user-activity .media-left .avatar-xs span.user {
        font-size: 1.4em;
        top: 23%; }
    .activity-feed-items .activity-feed-item.user-activity .media-body table, .activity-feed-items .media.user-activity .media-body table, .activity-feed-box .activity-feed-item.user-activity .media-body table, .activity-feed-box .media.user-activity .media-body table {
      background-color: #F5F5F5; }
      .activity-feed-items .activity-feed-item.user-activity .media-body table tr, .activity-feed-items .media.user-activity .media-body table tr, .activity-feed-box .activity-feed-item.user-activity .media-body table tr, .activity-feed-box .media.user-activity .media-body table tr {
        display: block;
        margin-bottom: 0.3em; }
        .activity-feed-items .activity-feed-item.user-activity .media-body table tr td, .activity-feed-items .media.user-activity .media-body table tr td, .activity-feed-box .activity-feed-item.user-activity .media-body table tr td, .activity-feed-box .media.user-activity .media-body table tr td {
          padding: 0 !important;
          display: block; }
          .activity-feed-items .activity-feed-item.user-activity .media-body table tr td p, .activity-feed-items .media.user-activity .media-body table tr td p, .activity-feed-box .activity-feed-item.user-activity .media-body table tr td p, .activity-feed-box .media.user-activity .media-body table tr td p {
            margin-left: 0; }
    .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update, .activity-feed-items .media.user-activity .media-body .activity-update, .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update, .activity-feed-box .media.user-activity .media-body .activity-update {
      padding: .5em 1em;
      border-radius: 3px;
      background-color: #F5F5F5;
      margin: 0 0 .5em 0;
      font-size: 1.1em;
      line-height: 1.7em; }
      .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update > p, .activity-feed-items .media.user-activity .media-body .activity-update > p, .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update > p, .activity-feed-box .media.user-activity .media-body .activity-update > p {
        margin: 0; }
      .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update > ul, .activity-feed-items .media.user-activity .media-body .activity-update > ul, .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update > ul, .activity-feed-box .media.user-activity .media-body .activity-update > ul {
        list-style-type: initial; }
        .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update > ul > li > ul, .activity-feed-items .media.user-activity .media-body .activity-update > ul > li > ul, .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update > ul > li > ul, .activity-feed-box .media.user-activity .media-body .activity-update > ul > li > ul {
          list-style-type: circle; }
      .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update ul, .activity-feed-items .media.user-activity .media-body .activity-update ul, .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update ul, .activity-feed-box .media.user-activity .media-body .activity-update ul {
        margin: 0.5em 0; }
        .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update ul li, .activity-feed-items .media.user-activity .media-body .activity-update ul li, .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update ul li, .activity-feed-box .media.user-activity .media-body .activity-update ul li {
          margin-bottom: 0; }
      .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update .text-mention, .activity-feed-items .media.user-activity .media-body .activity-update .text-mention, .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update .text-mention, .activity-feed-box .media.user-activity .media-body .activity-update .text-mention {
        font-weight: bold;
        padding: 3px 7px;
        display: inline-block;
        color: #FFFFFF;
        border-radius: 10px;
        line-height: 1em;
        margin-right: 3px;
        background-color: #1E88E5; }
      .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update .text-hashtag, .activity-feed-items .media.user-activity .media-body .activity-update .text-hashtag, .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update .text-hashtag, .activity-feed-box .media.user-activity .media-body .activity-update .text-hashtag {
        font-weight: bold;
        padding: 3px 7px;
        display: inline-block;
        color: #FFFFFF;
        border-radius: 10px;
        line-height: 1em;
        margin-right: 3px;
        background-color: #616161; }
    .activity-feed-items .activity-feed-item.user-activity .media-body .step-file:before, .activity-feed-items .media.user-activity .media-body .step-file:before, .activity-feed-box .activity-feed-item.user-activity .media-body .step-file:before, .activity-feed-box .media.user-activity .media-body .step-file:before {
      content: "\f016";
      font-family: "FontAwesome";
      margin-right: 5px; }
    .activity-feed-items .activity-feed-item.user-activity .media-body p .datetime, .activity-feed-items .media.user-activity .media-body p .datetime, .activity-feed-box .activity-feed-item.user-activity .media-body p .datetime, .activity-feed-box .media.user-activity .media-body p .datetime {
      display: inline;
      color: #9E9E9E;
      font-size: 85%;
      font-style: italic; }
    .activity-feed-items .activity-feed-item.user-activity .media-body p code, .activity-feed-items .media.user-activity .media-body p code, .activity-feed-box .activity-feed-item.user-activity .media-body p code, .activity-feed-box .media.user-activity .media-body p code {
      font-size: 90%; }
    .activity-feed-items .activity-feed-item.user-activity .media-body .delete-button-hover, .activity-feed-items .media.user-activity .media-body .delete-button-hover, .activity-feed-box .activity-feed-item.user-activity .media-body .delete-button-hover, .activity-feed-box .media.user-activity .media-body .delete-button-hover {
      visibility: hidden; }
    .activity-feed-items .activity-feed-item.user-activity .media-body:hover .delete-button-hover, .activity-feed-items .media.user-activity .media-body:hover .delete-button-hover, .activity-feed-box .activity-feed-item.user-activity .media-body:hover .delete-button-hover, .activity-feed-box .media.user-activity .media-body:hover .delete-button-hover {
      visibility: visible; }
  .activity-feed-items .activity-feed-item.system-activity .media-body p .datetime, .activity-feed-items .media.system-activity .media-body p .datetime, .activity-feed-box .activity-feed-item.system-activity .media-body p .datetime, .activity-feed-box .media.system-activity .media-body p .datetime {
    display: inline;
    color: #9E9E9E;
    font-size: 85%;
    font-style: italic; }
  .activity-feed-items .activity-feed-item.ident, .activity-feed-items .media.ident, .activity-feed-box .activity-feed-item.ident, .activity-feed-box .media.ident {
    margin-left: 50px; }
  .activity-feed-items .activity-feed-item.system-activity, .activity-feed-items .media.system-activity, .activity-feed-box .activity-feed-item.system-activity, .activity-feed-box .media.system-activity {
    margin: 0;
    font-size: .75rem;
    color: #9E9E9E; }
    .activity-feed-items .activity-feed-item.system-activity .media-left, .activity-feed-items .media.system-activity .media-left, .activity-feed-box .activity-feed-item.system-activity .media-left, .activity-feed-box .media.system-activity .media-left {
      display: none; }
    .activity-feed-items .activity-feed-item.system-activity .media-body, .activity-feed-items .media.system-activity .media-body, .activity-feed-box .activity-feed-item.system-activity .media-body, .activity-feed-box .media.system-activity .media-body {
      padding-left: 53px; }
      .activity-feed-items .activity-feed-item.system-activity .media-body p, .activity-feed-items .media.system-activity .media-body p, .activity-feed-box .activity-feed-item.system-activity .media-body p, .activity-feed-box .media.system-activity .media-body p {
        margin: 0;
        color: #9E9E9E;
        line-height: 1.7em; }
        .activity-feed-items .activity-feed-item.system-activity .media-body p strong, .activity-feed-items .media.system-activity .media-body p strong, .activity-feed-box .activity-feed-item.system-activity .media-body p strong, .activity-feed-box .media.system-activity .media-body p strong {
          font-weight: initial; }
        .activity-feed-items .activity-feed-item.system-activity .media-body p .datetime, .activity-feed-items .media.system-activity .media-body p .datetime, .activity-feed-box .activity-feed-item.system-activity .media-body p .datetime, .activity-feed-box .media.system-activity .media-body p .datetime {
          display: inline; }
  .activity-feed-items .activity-feed-item[data-activity-type='CompleteStep'], .activity-feed-items .media[data-activity-type='CompleteStep'], .activity-feed-box .activity-feed-item[data-activity-type='CompleteStep'], .activity-feed-box .media[data-activity-type='CompleteStep'] {
    font-weight: bold; }
    .activity-feed-items .activity-feed-item[data-activity-type='CompleteStep'] .media-body p:before, .activity-feed-items .media[data-activity-type='CompleteStep'] .media-body p:before, .activity-feed-box .activity-feed-item[data-activity-type='CompleteStep'] .media-body p:before, .activity-feed-box .media[data-activity-type='CompleteStep'] .media-body p:before {
      content: "\f00C";
      font-family: "FontAwesome";
      margin-right: 5px;
      color: #9E9E9E; }
    .activity-feed-items .activity-feed-item[data-activity-type='CompleteStep'] .media-body p strong, .activity-feed-items .media[data-activity-type='CompleteStep'] .media-body p strong, .activity-feed-box .activity-feed-item[data-activity-type='CompleteStep'] .media-body p strong, .activity-feed-box .media[data-activity-type='CompleteStep'] .media-body p strong {
      font-weight: bold; }
  .activity-feed-items .activity-feed-item[data-activity-type='DeliverEmail'] .media-body p:before, .activity-feed-items .media[data-activity-type='DeliverEmail'] .media-body p:before, .activity-feed-box .activity-feed-item[data-activity-type='DeliverEmail'] .media-body p:before, .activity-feed-box .media[data-activity-type='DeliverEmail'] .media-body p:before {
    content: "\f0e0";
    font-family: "FontAwesome";
    margin-right: 5px;
    color: #9E9E9E; }
  .activity-feed-items .activity-feed-item[data-activity-type='ViewActionRequiredEmail'] .media-body p:before, .activity-feed-items .media[data-activity-type='ViewActionRequiredEmail'] .media-body p:before, .activity-feed-box .activity-feed-item[data-activity-type='ViewActionRequiredEmail'] .media-body p:before, .activity-feed-box .media[data-activity-type='ViewActionRequiredEmail'] .media-body p:before {
    content: "\f2b6";
    font-family: "FontAwesome";
    margin-right: 5px;
    color: #9E9E9E; }
  .activity-feed-items .activity-feed-item.mini, .activity-feed-items .media.mini, .activity-feed-box .activity-feed-item.mini, .activity-feed-box .media.mini {
    background-color: #ffffff;
    position: relative; }
    .activity-feed-items .activity-feed-item.mini .media-left, .activity-feed-items .media.mini .media-left, .activity-feed-box .activity-feed-item.mini .media-left, .activity-feed-box .media.mini .media-left {
      font-size: 2.5em;
      padding-top: 0.25em;
      color: #9E9E9E;
      padding-right: 0;
      min-width: 27px; }
    .activity-feed-items .activity-feed-item.mini .media-body a i.fa, .activity-feed-items .media.mini .media-body a i.fa, .activity-feed-box .activity-feed-item.mini .media-body a i.fa, .activity-feed-box .media.mini .media-body a i.fa {
      font-size: 1.2em;
      display: none; }
    .activity-feed-items .activity-feed-item.mini:hover .media-body a i.fa, .activity-feed-items .media.mini:hover .media-body a i.fa, .activity-feed-box .activity-feed-item.mini:hover .media-body a i.fa, .activity-feed-box .media.mini:hover .media-body a i.fa {
      display: inline-block; }
    .activity-feed-items .activity-feed-item.mini[data-activity-item-type='AddNote']:last-child, .activity-feed-items .media.mini[data-activity-item-type='AddNote']:last-child, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='AddNote']:last-child, .activity-feed-box .media.mini[data-activity-item-type='AddNote']:last-child {
      margin-bottom: 0; }
    .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'], .activity-feed-items .media.mini[data-activity-item-type='UploadFile'], .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile'], .activity-feed-box .media.mini[data-activity-item-type='UploadFile'] {
      border: 1px solid #E0E0E0;
      padding: 1em 1em;
      margin-top: 0;
      width: 30%;
      float: left;
      margin-right: 3%;
      height: 240px; }
      .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-left, .activity-feed-items .media.mini[data-activity-item-type='UploadFile'] .media-left, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-left, .activity-feed-box .media.mini[data-activity-item-type='UploadFile'] .media-left {
        position: absolute;
        padding: 0;
        margin: 0;
        width: 90%; }
        .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-left img, .activity-feed-items .media.mini[data-activity-item-type='UploadFile'] .media-left img, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-left img, .activity-feed-box .media.mini[data-activity-item-type='UploadFile'] .media-left img {
          width: auto;
          height: auto;
          margin: 0; }
      .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body, .activity-feed-items .media.mini[data-activity-item-type='UploadFile'] .media-body, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body, .activity-feed-box .media.mini[data-activity-item-type='UploadFile'] .media-body {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        padding: 1em 1em;
        height: 80px;
        background-color: #ffffff;
        border-top: 1px solid #E0E0E0; }
        .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body a.file-link, .activity-feed-items .media.mini[data-activity-item-type='UploadFile'] .media-body a.file-link, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body a.file-link, .activity-feed-box .media.mini[data-activity-item-type='UploadFile'] .media-body a.file-link {
          display: block; }
        .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body .avatar, .activity-feed-items .media.mini[data-activity-item-type='UploadFile'] .media-body .avatar, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body .avatar, .activity-feed-box .media.mini[data-activity-item-type='UploadFile'] .media-body .avatar {
          float: left;
          margin-right: 13px; }
          .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body .avatar img, .activity-feed-items .media.mini[data-activity-item-type='UploadFile'] .media-body .avatar img, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body .avatar img, .activity-feed-box .media.mini[data-activity-item-type='UploadFile'] .media-body .avatar img {
            padding: 0; }
        .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body p, .activity-feed-items .media.mini[data-activity-item-type='UploadFile'] .media-body p, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile'] .media-body p, .activity-feed-box .media.mini[data-activity-item-type='UploadFile'] .media-body p {
          margin-bottom: 0; }
      .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile']::after, .activity-feed-items .media.mini[data-activity-item-type='UploadFile']::after, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile']::after, .activity-feed-box .media.mini[data-activity-item-type='UploadFile']::after {
        content: ""; }
      .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile']:hover, .activity-feed-items .media.mini[data-activity-item-type='UploadFile']:hover, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile']:hover, .activity-feed-box .media.mini[data-activity-item-type='UploadFile']:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        border: solid 1px #9E9E9E; }
      .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'][data-is-thumbnail='0'] .media-left, .activity-feed-items .media.mini[data-activity-item-type='UploadFile'][data-is-thumbnail='0'] .media-left, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='UploadFile'][data-is-thumbnail='0'] .media-left, .activity-feed-box .media.mini[data-activity-item-type='UploadFile'][data-is-thumbnail='0'] .media-left {
        text-align: center;
        font-size: 6em;
        padding-top: 0.3em;
        height: 129px;
        background-color: #3F51B5;
        color: #FFFFFF; }
    .activity-feed-items .activity-feed-item.mini[data-activity-item-type='AddNote'], .activity-feed-items .media.mini[data-activity-item-type='AddNote'], .activity-feed-box .activity-feed-item.mini[data-activity-item-type='AddNote'], .activity-feed-box .media.mini[data-activity-item-type='AddNote'] {
      border: 1px solid #E0E0E0;
      padding: 1em 1em;
      margin-bottom: 1.5em;
      margin-top: 0; }
      .activity-feed-items .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content, .activity-feed-items .media.mini[data-activity-item-type='AddNote'] .note-content, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content, .activity-feed-box .media.mini[data-activity-item-type='AddNote'] .note-content {
        margin-bottom: 1em;
        background-color: #EEEEEE;
        padding: 1em;
        border-radius: 0.5rem; }
        .activity-feed-items .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content .text-mention, .activity-feed-items .media.mini[data-activity-item-type='AddNote'] .note-content .text-mention, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content .text-mention, .activity-feed-box .media.mini[data-activity-item-type='AddNote'] .note-content .text-mention {
          font-weight: bold;
          padding: 3px 7px;
          display: inline-block;
          color: #FFFFFF;
          border-radius: 10px;
          line-height: 1em;
          margin-right: 3px;
          background-color: #1E88E5; }
        .activity-feed-items .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content .text-hashtag, .activity-feed-items .media.mini[data-activity-item-type='AddNote'] .note-content .text-hashtag, .activity-feed-box .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content .text-hashtag, .activity-feed-box .media.mini[data-activity-item-type='AddNote'] .note-content .text-hashtag {
          font-weight: bold;
          padding: 3px 7px;
          display: inline-block;
          color: #FFFFFF;
          border-radius: 10px;
          line-height: 1em;
          margin-right: 3px;
          background-color: #616161; }

.activity-feed-box.panel .panel-actions {
  margin-left: 0; }
  .activity-feed-box.panel .panel-actions .btn-group.keywordsearch .form-search {
    width: 250px; }

#request-view-step-tile .activity-feed-items {
  margin-top: 1.5em; }
  #request-view-step-tile .activity-feed-items .activity-feed-item {
    margin-bottom: 2em;
    overflow: none;
    display: flex; }
    #request-view-step-tile .activity-feed-items .activity-feed-item .media-left .avatar {
      margin-right: 0; }
    #request-view-step-tile .activity-feed-items .activity-feed-item .media-body {
      font-size: 1.13em; }
      #request-view-step-tile .activity-feed-items .activity-feed-item .media-body p a i.fa {
        display: none; }
    #request-view-step-tile .activity-feed-items .activity-feed-item:hover p a i.fa {
      display: inline-block; }

#request-view-step-tile .step-detail-notes .activity-feed-items .activity-feed-item {
  background-color: inherit;
  border-width: 0px;
  margin-bottom: 0;
  padding: 0.25em 0; }
  #request-view-step-tile .step-detail-notes .activity-feed-items .activity-feed-item .avatar img {
    padding: 0; }
  #request-view-step-tile .step-detail-notes .activity-feed-items .activity-feed-item .avatar.avatar-sm span {
    font-size: 0.6em;
    top: 24%; }
  #request-view-step-tile .step-detail-notes .activity-feed-items .activity-feed-item .note-content {
    margin-bottom: 0.1em; }
  #request-view-step-tile .step-detail-notes .activity-feed-items .activity-feed-item:hover .avatar.avatar-text {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  #request-view-step-tile .step-detail-notes .activity-feed-items .activity-feed-item:hover .avatar.avatar-img img {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  #request-view-step-tile .step-detail-notes .activity-feed-items .activity-feed-item:hover .note-content {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }

body.dark .activity-feed-items .activity-feed-item.user-activity .media-body p, body.dark .activity-feed-items .media.user-activity .media-body p, body.dark .activity-feed-box .activity-feed-item.user-activity .media-body p, body.dark .activity-feed-box .media.user-activity .media-body p {
  color: #E0E0E0; }

body.dark .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update, body.dark .activity-feed-items .media.user-activity .media-body .activity-update, body.dark .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update, body.dark .activity-feed-box .media.user-activity .media-body .activity-update {
  background-color: #424242; }
  body.dark .activity-feed-items .activity-feed-item.user-activity .media-body .activity-update .text-hashtag, body.dark .activity-feed-items .media.user-activity .media-body .activity-update .text-hashtag, body.dark .activity-feed-box .activity-feed-item.user-activity .media-body .activity-update .text-hashtag, body.dark .activity-feed-box .media.user-activity .media-body .activity-update .text-hashtag {
    background-color: #E0E0E0;
    color: #424242; }

body.dark .activity-feed-items .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content, body.dark .activity-feed-items .media.mini[data-activity-item-type='AddNote'] .note-content, body.dark .activity-feed-box .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content, body.dark .activity-feed-box .media.mini[data-activity-item-type='AddNote'] .note-content {
  background-color: #424242;
  color: #E0E0E0; }
  body.dark .activity-feed-items .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content .text-hashtag, body.dark .activity-feed-items .media.mini[data-activity-item-type='AddNote'] .note-content .text-hashtag, body.dark .activity-feed-box .activity-feed-item.mini[data-activity-item-type='AddNote'] .note-content .text-hashtag, body.dark .activity-feed-box .media.mini[data-activity-item-type='AddNote'] .note-content .text-hashtag {
    background-color: #E0E0E0;
    color: #424242; }

@media (max-width: 767.98px) {
  .request-steps .activity-feed-items .activity-feed-item {
    margin-bottom: 1em !important; }
    .request-steps .activity-feed-items .activity-feed-item.mini[data-activity-item-type='UploadFile'] {
      width: 100%; } }

.analytics-backtotop {
  padding-top: 25px;
  display: inline-block; }

body.external-form #contentwrapper #content .panel #pagewrapper {
  position: relative; }
  body.external-form #contentwrapper #content .panel #pagewrapper #logo-account-wrapper {
    position: absolute;
    right: 1.25rem;
    top: -65px; }
  body.external-form #contentwrapper #content .panel #pagewrapper #page p > iframe {
    display: block;
    margin: auto;
    background-color: #ffffff;
    padding: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
    body.external-form #contentwrapper #content .panel #pagewrapper #page p > iframe[src*="vimeo.com"], body.external-form #contentwrapper #content .panel #pagewrapper #page p > iframe[src*="youtube.com"], body.external-form #contentwrapper #content .panel #pagewrapper #page p > iframe[src*="youtube-nocookie.com"] {
      position: relative !important;
      width: 40vw !important;
      height: calc((40vw) * 9 / 16) !important;
      border-radius: 1rem; }

/* 
View Tour

### UX Behavior
- User tours can always be activated via the View Tour button located in the More Actions dropdown.

Markup: appcues-viewtour.hbs

Styleguide UXUserTours.ViewTour
*/
/* 
Hotspots

For user tours, we use Hotspots, not callouts

Markup: appcues-callouts.hbs

Styleguide UXUserTours.Hotspot
*/
/* 
Slideout


Styleguide UXUserTours.Slideout
*/
#app-environment-header {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  z-index: -99;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  height: 32px !important;
  padding: 4px 3% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  #app-environment-header span:before {
    margin-top: 0px !important;
    font-size: 1.5em !important; }
  #app-environment-header.app-beta span:before {
    content: "INNOVATIVE WAY"; }

/* 
Element: License Header

Following are license banners are based on the subscription type.

Markup:
<div id="app-license-header" class="{{modifier_class}}" style="position:initial; width:40%;"><span></span></div>

.license-demo	- &nbsp;
.license-trial	- &nbsp;

Styleguide ElementLicenseHeader
*/
#app-license-header {
  text-align: center;
  background-size: 120px 120px;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  position: absolute;
  top: 0;
  left: 43%;
  width: 20%;
  z-index: -99;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  height: 32px !important;
  padding: 4px 3% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: none; }
  #app-license-header span:before {
    display: block;
    font-weight: bold;
    color: #ffffff;
    margin-top: 0px !important;
    font-size: 1.5em !important; }
  #app-license-header.license-demo {
    display: block;
    background-color: #E53935; }
    #app-license-header.license-demo span:before {
      content: "14 Day Trial"; }
  #app-license-header.license-trial {
    display: block;
    background-color: #1E88E5; }
    #app-license-header.license-trial span:before {
      content: "Extended Trial"; }

/* 
Element: Avatar

React [`<Avatar>`](https://uat.pipelineapp.io/app/pattern-library/elements#avatar)

Image url: [`https://d1v1s76gnntd7e.cloudfront.net/pipeline/contact-blank.png`](https://d1v1s76gnntd7e.cloudfront.net/pipeline/contact-blank.png)

Markup:
<div class="avatar {{modifier_class}}">
	<img src="https://d1v1s76gnntd7e.cloudfront.net/pipeline/contact-blank.png">
</div>

.avatar-xs		- size: 28x28
.avatar-sm		- size: 40x40
.avatar-md		- size: 48x48
.avatar-lg		- size: 64x64

Styleguide ElementAvatar
*/
/* 
Deactivated

Image url: [`https://d1v1s76gnntd7e.cloudfront.net/pipeline/contact-deactivated.png`](https://d1v1s76gnntd7e.cloudfront.net/pipeline/contact-deactivated.png)

Markup:
<div class="avatar {{modifier_class}}">
	<img src="https://d1v1s76gnntd7e.cloudfront.net/pipeline/contact-deactivated.png">
</div>

.avatar-xs		- size: 28x28
.avatar-sm		- size: 40x40
.avatar-md		- size: 48x48
.avatar-lg		- size: 64x64

Styleguide ElementAvatar.Deactivated
*/
/* 
Team

Image url: [`https://d1v1s76gnntd7e.cloudfront.net/pipeline/team-blank.png`](https://d1v1s76gnntd7e.cloudfront.net/pipeline/team-blank.png)

Markup:
<div class="avatar {{modifier_class}}">
	<img src="https://d1v1s76gnntd7e.cloudfront.net/pipeline/team-blank.png">
</div>

.avatar-xs		- size: 28x28
.avatar-sm		- size: 40x40
.avatar-md		- size: 48x48
.avatar-lg		- size: 64x64

Styleguide ElementAvatar.Team
*/
/* 
Team: Deactivated

Image url: [`https://d1v1s76gnntd7e.cloudfront.net/pipeline/team-deactivated.png`](https://d1v1s76gnntd7e.cloudfront.net/pipeline/team-deactivated.png)

Markup:
<div class="avatar {{modifier_class}}">
	<img src="https://d1v1s76gnntd7e.cloudfront.net/pipeline/team-deactivated.png">
</div>

.avatar-xs		- size: 28x28
.avatar-sm		- size: 40x40
.avatar-md		- size: 48x48
.avatar-lg		- size: 64x64

Styleguide ElementAvatar.TeamDeactivated
*/
/* 
Initials

Markup:
<div class="avatar avatar-sm {{modifier_class}}">
	<span class="user">MA</span>
</div>

.success		- &nbsp;
.danger			- &nbsp;
.warning		- &nbsp;
.info			- &nbsp;

Styleguide ElementAvatar.Initials
*/
/* 
Initials and Sizes

Markup:
<div class="avatar success {{modifier_class}}">
	<span class="user">MA</span>
</div>

.avatar-xs		- &nbsp;
.avatar-sm		- &nbsp;
.avatar-md		- &nbsp;
.avatar-lg		- &nbsp;

Styleguide ElementAvatar.InitialsSizes
*/
/* 
Component: Avatar Grid

This avatar grid is used to display a grid of avatars, ex: followers, team members, team owners, etc.

### Standard UX Behavior

- <span class="text-highlight">The delete icon should appear only on hover</span>
- Avatars should be sorted by alpha: `Last ASC, First ASC`
- The grid size should be `2` columns wide when the grid is half screen or less.
- The grid size should be `3` columns wide when the grid is between half screen and full screen.
- The grid size should be `4` columns wide when the grid is full screen.

### Components

- [`Avatar`](section-elementavatar.html)
- [`React Select`](section-componentreactselect.html)

Markup: tile-grid-avatar-4.hbs

Weight: 100

Styleguide ComponentAvatarGrid
*/
.avatar {
  display: inline-block;
  position: relative;
  margin-right: .5em;
  height: 28px;
  width: 28px;
  font-weight: normal !important; }
  .avatar span {
    color: #FFFFFF;
    text-transform: uppercase;
    text-align: center;
    font-family: sans-serif;
    top: 16%;
    position: relative; }
    .avatar span:empty:before {
      content: "?"; }
  .avatar img {
    border-radius: 50%;
    height: 28px;
    width: 28px; }
  .avatar.success {
    background-color: #81C784;
    border-radius: 50%; }
    .avatar.success img {
      display: none; }
    .avatar.success span {
      display: block; }
  .avatar.danger {
    background-color: #E57373;
    border-radius: 50%; }
    .avatar.danger img {
      display: none; }
    .avatar.danger span {
      display: block; }
  .avatar.warning {
    background-color: #FFB74D;
    border-radius: 50%; }
    .avatar.warning img {
      display: none; }
    .avatar.warning span {
      display: block; }
  .avatar.info {
    background-color: #64B5F6;
    border-radius: 50%; }
    .avatar.info img {
      display: none; }
    .avatar.info span {
      display: block; }
  .avatar.avatar-xs {
    height: 28px;
    width: 28px; }
    .avatar.avatar-xs span {
      font-size: .9em;
      top: 16%; }
      .avatar.avatar-xs span.icon-base {
        font-size: 1em;
        top: 0; }
        .avatar.avatar-xs span.icon-base .fa-users {
          margin: 0;
          padding: 6px; }
    .avatar.avatar-xs.pull-left {
      margin-right: 0.5em; }
    .avatar.avatar-xs img {
      height: 28px;
      width: 28px; }
  .avatar.avatar-sm {
    height: 40px;
    width: 40px; }
    .avatar.avatar-sm span {
      font-size: 1.3em;
      top: 26%; }
      .avatar.avatar-sm span.icon-base {
        font-size: 1.7em;
        top: 0; }
        .avatar.avatar-sm span.icon-base .fa-users {
          margin: 0;
          padding: 8px; }
    .avatar.avatar-sm.pull-left {
      margin-right: 0.5em; }
    .avatar.avatar-sm img {
      height: 40px;
      width: 40px; }
  .avatar.avatar-md {
    height: 48px;
    width: 48px; }
    .avatar.avatar-md span {
      font-size: 1.6em;
      top: 29%; }
      .avatar.avatar-md span.icon-base {
        font-size: 1.7em;
        top: 0; }
        .avatar.avatar-md span.icon-base .fa-users {
          margin: 0;
          padding: 8px; }
    .avatar.avatar-md.pull-left {
      margin-right: 0.5em; }
    .avatar.avatar-md img {
      height: 48px;
      width: 48px; }
  .avatar.avatar-lg {
    height: 64px;
    width: 64px; }
    .avatar.avatar-lg span {
      font-size: 2.3em;
      top: 35%; }
      .avatar.avatar-lg span.icon-base {
        top: 0; }
        .avatar.avatar-lg span.icon-base .fa-users {
          margin: 0;
          padding: 12px; }
    .avatar.avatar-lg.pull-left {
      margin-right: 0.5em; }
    .avatar.avatar-lg img {
      height: 64px;
      width: 64px; }

.avatar-upload button.avatar-upload.fa-cloud-upload::before {
  font-family: "FontAwesome";
  margin-right: 4px; }

.list-avatar {
  margin-bottom: 0.5rem; }
  .list-avatar .list-inline-item {
    position: relative;
    margin-right: 0; }
    .list-avatar .list-inline-item .avatar {
      margin-right: 0; }
      .list-avatar .list-inline-item .avatar.avatar-text {
        top: -3px; }

/*Icon links*/
.icon-list {
  list-style: none;
  margin: 0;
  padding: 0; }
  .icon-list li {
    float: left;
    margin: 0 0.5em 0.5em 0;
    font-size: .8rem; }
    .icon-list li .fa.fa-gift {
      font-size: 1.2rem; }
    .icon-list li .btn-link {
      margin: 0 0 .4em 0 !important;
      padding: 0;
      box-shadow: none; }
    .icon-list li a, .icon-list li .btn-link {
      margin-bottom: 1em;
      outline: none; }
      .icon-list li a .fa.fa-heart.fa-active, .icon-list li .btn-link .fa.fa-heart.fa-active {
        color: #F45239; }
  .icon-list li:before {
    float: left;
    margin: 0 .5em 0 0;
    content: "|";
    color: #939393; }
  .icon-list li:first-child:before {
    content: ""; }
  .icon-list li:last-child {
    margin: 0; }

.badge {
  padding: 0.35em 0.4em 0.1em 0.4em; }
  .badge.badge-systemvar {
    color: #FFFFFF;
    background-color: #616161; }
  .badge.badge-formfield-invalid {
    color: #FFFFFF;
    background-color: #F44336; }
    .badge.badge-formfield-invalid:before {
      content: "\f00d";
      font-family: 'FontAwesome';
      margin-right: 5px;
      font-weight: normal; }
  .badge.badge-yes {
    color: #FFFFFF;
    background-color: #1E88E5;
    display: inline;
    top: 1px;
    margin-left: 0.15rem; }
    .badge.badge-yes:before {
      content: "Yes";
      position: relative;
      top: -1px; }
  .badge.badge-no {
    color: #FFFFFF;
    background-color: #FB8C00;
    display: inline;
    top: 1px;
    margin-left: 0.15rem; }
    .badge.badge-no:before {
      content: "No";
      position: relative;
      top: -1px; }
  .badge.badge-demo {
    font-size: inherit;
    background-color: #FFF176;
    padding: 0.35em 0.6em 0.35em 0.4em;
    border-radius: 0.5rem;
    margin-right: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
    .badge.badge-demo:before {
      content: "👋";
      display: inline-block;
      animation-duration: 3s;
      animation-name: wobble;
      animation-iteration-count: infinite;
      margin-right: 5px; }
    .badge.badge-demo.nonanimated {
      margin-left: 5px; }
      .badge.badge-demo.nonanimated:before {
        animation-name: none; }
    .badge.badge-demo.info {
      background-color: #1E88E5;
      color: #FFFFFF; }
      .badge.badge-demo.info:before {
        content: "⭐";
        animation-name: none; }
  .badge.badge-scorecard {
    font-size: inherit;
    color: #424242;
    background-color: #E0E0E0;
    padding: 0.35em 0.6em 0.35em 0.4em;
    border-radius: 0.5rem;
    margin-right: 5px;
    margin-left: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
    .badge.badge-scorecard:before {
      display: inline-block;
      animation-duration: 3s;
      animation-name: wobble;
      animation-iteration-count: infinite;
      margin-right: 5px; }
    .badge.badge-scorecard.badge-danger:before {
      content: "🚨"; }
    .badge.badge-scorecard.badge-success {
      color: #FFFFFF;
      background-color: #43A047; }
      .badge.badge-scorecard.badge-success:before {
        content: "⭐"; }

/* 
Element: Breadcrumbs

Markup:
<ul class="breadcrumb">
	<li class="breadcrumb-item"><a href="">Home</a></li>
	<li class="breadcrumb-item"><a href="">Grand Parent</a></li>
	<li class="breadcrumb-item"><a href="">Parent</a></li>
	<li class="breadcrumb-item">Current Page</li>
</ul>

Styleguide ElementBreadcrumbs
*/
.breadcrumb {
  background-color: #EEEEEE;
  margin: 2em 0 3em;
  padding: 0.2rem 1rem;
  font-size: 0.8rem; }
  .breadcrumb.anchor-breadcrumb {
    background-color: transparent !important;
    padding-left: 0;
    margin-bottom: 1.5em; }
  .breadcrumb.breadcrumb-form-details:before {
    content: "Workflow Step: ";
    margin-right: 5px; }
  .breadcrumb.breadcrumb-request-summary-details:before {
    content: "On this page: ";
    margin-right: 5px; }

body.dark .breadcrumb {
  background-color: #212121; }

@media (max-width: 767.98px) {
  .breadcrumb {
    display: none; } }

@media (max-width: 1199.98px) {
  .breadcrumb {
    margin-bottom: 2em; } }

#bundle-description h1 {
  font-size: 2em; }

#bundle-description h2 {
  font-size: 1.7em; }

#bundle-description h3 {
  font-size: 1.2em; }

#bundle-description h4, #bundle-description h5, #bundle-description h6 {
  font-size: 1em; }

#bundle-description table {
  border-color: #E0E0E0;
  border-width: 0; }
  #bundle-description table th, #bundle-description table td {
    padding: 1em;
    line-height: 1.5em;
    vertical-align: top; }

#bundle-description span.text-highlight {
  font-weight: bold;
  padding: 0px 5px;
  background-color: #ffff00; }

#bundle-description .alert {
  font-weight: bold; }

#bundle-description img {
  padding: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

#bundle-description .card-deck {
  margin-right: -10px;
  margin-left: -10px;
  margin-bottom: 1em; }
  #bundle-description .card-deck .card:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  #bundle-description .card-deck .card h1:first-child, #bundle-description .card-deck .card h2:first-child, #bundle-description .card-deck .card h3:first-child {
    margin-top: 0; }
  #bundle-description .card-deck .card img.card-img-top {
    padding: 0;
    box-shadow: none; }

#RemoveRequestButton {
  margin-bottom: 20px; }

#project-status[data-isowner="false"] #cancelBundleLink {
  display: none; }

#project-status[data-isowner="false"] #edit-project {
  display: none; }

#project-status[data-isowner="false"] #deactivateBundleLink {
  display: none; }

#project-status #project-view-title:before {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  padding-left: 0.6em;
  padding-right: 0.6em;
  position: relative;
  top: -1px;
  border-radius: 10rem;
  font-size: 65%;
  margin-right: 10px;
  top: -0.2rem; }

#project-status[data-status="Canceled"] #project-view-top-tile #project-view-title:before {
  color: #FFFFFF;
  background-color: #616161;
  content: "Canceled"; }

#project-status[data-status="Canceled"] #project-view-top-tile .contentwithborder,
#project-status[data-status="Canceled"] #project-view-top-tile .panel-body {
  background-color: #EEEEEE; }
  #project-status[data-status="Canceled"] #project-view-top-tile .contentwithborder:before,
  #project-status[data-status="Canceled"] #project-view-top-tile .panel-body:before {
    content: "\f00d";
    font-family: "FontAwesome";
    font-size: 7em;
    position: absolute;
    color: #BDBDBD;
    left: 47%;
    top: 275px; }

#project-status[data-status="Canceled"] #cancelBundleLink {
  display: none; }

#project-status[data-status="Completed"] #project-view-top-tile #project-view-title:before {
  color: #FFFFFF;
  background-color: #43A047;
  content: "Completed"; }

#project-status[data-status="Completed"] #project-view-top-tile .contentwithborder,
#project-status[data-status="Completed"] #project-view-top-tile .panel-body {
  background-color: #E8F5E9; }
  #project-status[data-status="Completed"] #project-view-top-tile .contentwithborder:before,
  #project-status[data-status="Completed"] #project-view-top-tile .panel-body:before {
    content: "\f00c";
    font-family: "FontAwesome";
    font-size: 7em;
    position: absolute;
    color: #A5D6A7;
    left: 47%;
    top: 275px; }

#project-status[data-status="Deactivated"] #project-view-top-tile #project-view-title:before {
  color: #FFFFFF;
  background-color: #616161;
  content: "Deactivated"; }

#bundle-view-request-tab[data-is-readonly="1"] input[type="checkbox"] {
  pointer-events: none;
  cursor: default; }

#bundle-view-owners-tab[data-is-readonly="1"] #bundles-select-owner {
  pointer-events: none !important; }

#bundle-view-followers-tab[data-is-readonly="1"] #bundles-select-follower {
  pointer-events: none !important; }

#bundle-view-followers-tab[data-is-deactivated="1"] #bundles-select-follower {
  pointer-events: none !important; }

.btn {
  font-size: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  .btn:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .btn:active {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .btn.btn-default {
    border-color: #E0E0E0;
    box-shadow: none; }
    .btn.btn-default:hover {
      border-color: #9E9E9E;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.card {
  border-radius: 1rem; }
  .card .card-body.card-stars {
    border-left: 7px solid var(--primary);
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem; }
  .card.card-promo {
    margin-top: 0; }
    .card.card-promo .card-header {
      background-color: inherit;
      border-width: 0;
      padding: 1rem 1.25rem;
      position: relative;
      overflow: hidden;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      border-top: 5px solid #E0E0E0;
      border-top-color: #E0E0E0;
      border-bottom: 1px solid #E0E0E0; }
      .card.card-promo .card-header h4 {
        font-size: 1rem;
        margin-bottom: 0;
        margin-top: 0; }
        .card.card-promo .card-header h4 .fa {
          margin-right: 7px;
          padding: 7px;
          border-radius: 4px;
          font-weight: normal;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
    .card.card-promo .card-body > div > h4 {
      font-size: 1.2rem; }
    .card.card-promo .card-body > h4 {
      font-size: 1.2rem; }
    .card.card-promo .card-body > iframe {
      display: block;
      margin: auto;
      background-color: #ffffff;
      padding: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      width: 100% !important; }
    .card.card-promo.card-success .card-header {
      border-top-color: #43A047; }
      .card.card-promo.card-success .card-header .fa {
        background-color: #43A047;
        color: #FFFFFF; }
    .card.card-promo.card-danger .card-header {
      border-top-color: #E53935; }
      .card.card-promo.card-danger .card-header .fa {
        background-color: #E53935;
        color: #FFFFFF; }
    .card.card-promo.card-warning .card-header {
      border-top-color: #FB8C00; }
      .card.card-promo.card-warning .card-header .fa {
        background-color: #FB8C00;
        color: #FFFFFF; }
    .card.card-promo.card-info .card-header {
      border-top-color: #1E88E5; }
      .card.card-promo.card-info .card-header .fa {
        background-color: #1E88E5;
        color: #FFFFFF; }
    .card.card-promo.card-primary .card-header {
      border-top-color: #3F51B5; }
      .card.card-promo.card-primary .card-header .fa {
        background-color: #3F51B5;
        color: #FFFFFF; }
  .card.card-message.card-promo {
    margin-left: 50%;
    width: 100%; }

.card-deck .card.card-message.card-promo {
  margin-left: auto;
  width: auto;
  margin-right: 0px; }

.mce-content-body .card-deck, .mce-preview .card-deck {
  flex-flow: row wrap;
  display: flex; }
  .mce-content-body .card-deck .card, .mce-preview .card-deck .card {
    display: flex;
    flex: 1 0 0%;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px; }
    .mce-content-body .card-deck .card img.card-img-top, .mce-preview .card-deck .card img.card-img-top {
      padding: 0;
      box-shadow: none; }
    .mce-content-body .card-deck .card .card-body, .mce-preview .card-deck .card .card-body {
      flex: 1 1 auto;
      padding: 1.25rem; }

.panel .request-steps .step-detail .card-deck .card-body.card-status-danger .card-body-diagnosis::before {
  font-family: "FontAwesome";
  content: "\f071";
  margin-right: 5px;
  color: #D32F2F;
  display: inline-block;
  animation-duration: 2s;
  animation-name: heartBeat;
  animation-fill-mode: both;
  animation-iteration-count: infinite; }

.panel .request-steps .step-detail .card-deck .card-body.card-status-danger .card-body-diagnosis:empty {
  display: none; }

.panel .request-steps .step-detail .card-deck .card-body.card-status-warning .card-body-diagnosis::before {
  font-family: "FontAwesome";
  content: "\f071";
  margin-right: 5px;
  color: #F57F17;
  display: inline-block; }

.panel .request-steps .step-detail .card-deck .card-body.card-status-warning .card-body-diagnosis:empty {
  display: none; }

.panel .request-steps .step-detail .card-deck .card-body.card-status-success .card-body-diagnosis::before {
  font-family: "FontAwesome";
  content: "\f05a";
  margin-right: 5px;
  display: inline-block; }

.panel .request-steps .step-detail .card-deck .card-body.card-status-success .card-body-diagnosis:empty {
  display: none; }

@keyframes promoBackSlideDown {
  from {
    top: -70px;
    transform: skewY(0deg); }
  to {
    top: -60px;
    transform: skewY(-1.5deg); } }

@keyframes promoFrontSlideDown {
  from {
    top: -70px;
    transform: skewY(0deg); }
  to {
    top: -50px;
    transform: skewY(3deg); } }

@keyframes promoHeaderSlideDown {
  from {
    padding-top: 2rem; }
  to {
    padding-top: 3rem; } }

@media (max-width: 1199.98px) {
  #chat-widget-container {
    display: none; } }

.cell-css:before {
  display: inline-block; }

.cell-css.cell-numerichighlight:not([data-value='0']) {
  background-color: #A5D6A7; }

.cell-css.cell-numerichighlight[data-value='0'] {
  background-color: #EF9A9A; }

.cell-css.cell-numericyesno:not([data-value='0']):before {
  color: #3F51B5; }

.cell-css.cell-numericyesno[data-value='0']:before {
  color: #9E9E9E; }

.cell-css.cell-numericnoyes:not([data-value='0']):before {
  color: #9E9E9E; }

.cell-css.cell-numericnoyes[data-value='0']:before {
  color: #3F51B5; }

.cell-css.cell-numericthumbs:not([data-value='0']):before {
  color: #3F51B5; }

.cell-css.cell-numericthumbs[data-value='0']:before {
  color: #D32F2F; }

.cell-css.cell-contactinfo {
  color: #9E9E9E;
  font-style: italic;
  font-size: .85em;
  display: block;
  margin-top: 5px; }
  .cell-css.cell-contactinfo:before {
    margin-right: 4px; }
  .cell-css.cell-contactinfo.cell-submitter:before {
    content: "Submitter:"; }
  .cell-css.cell-contactinfo.cell-owner:before {
    content: "Owner:"; }
  .cell-css.cell-contactinfo.cell-assigned .label.label-deactive:before {
    animation-fill-mode: both;
    animation-duration: 8s;
    animation-name: shake;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; }
  .cell-css.cell-contactinfo.cell-assigned .label-unassigned:before {
    font-style: normal;
    margin-left: 0; }
  .cell-css.cell-contactinfo.cell-assigned:before {
    content: "Owner:"; }

.cell-css.cell-stepstatus[data-value='0']:before, .cell-css.cell-stepstatus[data-value='2']:before, .cell-css.cell-stepstatus[data-value='3']:before, .cell-css.cell-stepstatus[data-value='6']:before {
  font-family: "FontAwesome";
  content: "\f096";
  color: #000000;
  font-size: 1.4em;
  text-align: center;
  display: block; }

.cell-css.cell-stepstatus[data-value='1']:before {
  font-family: "FontAwesome";
  content: "\f046";
  color: #43A047;
  font-size: 1.4em;
  text-align: center;
  display: block; }

.cell-css.cell-stepstatus[data-value='4']:before, .cell-css.cell-stepstatus[data-value='5']:before {
  font-family: "FontAwesome";
  content: "\f096";
  color: #000000;
  font-size: 1.4em;
  text-align: center;
  display: block; }

.row-css.row-stepstatus[data-value='0'] td.cell-stepstatus:before, .row-css.row-stepstatus[data-value='2'] td.cell-stepstatus:before, .row-css.row-stepstatus[data-value='3'] td.cell-stepstatus:before, .row-css.row-stepstatus[data-value='6'] td.cell-stepstatus:before {
  font-family: "FontAwesome";
  content: "\f096";
  color: #000000;
  font-size: 1.4em;
  text-align: center;
  display: block; }

.row-css.row-stepstatus[data-value='1'] td.cell-stepstatus:before {
  font-family: "FontAwesome";
  content: "\f046";
  color: #43A047;
  font-size: 1.4em;
  text-align: center;
  display: block; }

.row-css.row-stepstatus[data-value='4'] td.cell-stepstatus:before, .row-css.row-stepstatus[data-value='5'] td.cell-stepstatus:before {
  font-family: "FontAwesome";
  content: "\f096";
  color: #000000;
  font-size: 1.4em;
  text-align: center;
  display: block; }

/* 
Element: Developer Only

<span class="text-highlight">Developer only elements (text, links, banners, etc.) are only availble in `localhost`, `GOLD`, and `DEV` environments.</span> 

The purpose behind these elements are for development, testing, and troubleshooting. They are the equivalent to developer tools or developer shortcuts, ex: Apollo. 

<span class="text-highlight">These elements do NOT affect or impact how the application works for `UAT`, `IW PROD` or `Client PROD`</span>. So, they will NOT be documented as business rules.

Styleguide ElementDeveloperOnly
*/
/* 
Link

Markup:
<p><a data-isdevonly="1" href="">Link</a></p>

Styleguide ElementDeveloperOnly.Link
*/
a[data-isdevonly='1'] {
  color: #FF9800 !important; }
  a[data-isdevonly='1']:before {
    font-family: "FontAwesome";
    content: '\f0ad';
    margin-right: 0.2em; }

body:not([data-isdevonly="1"]) a[data-isdevonly="1"] {
  display: none; }

/* 
Text

Markup:
<p><code data-isdevonly="1">Lorem ipsum</code></p>

Styleguide ElementDeveloperOnly.Text
*/
code {
  cursor: pointer; }
  code[data-isdevonly='1'] {
    background-color: #FFF3E0;
    color: #FF9800; }

body.dark code[data-isdevonly='1'] {
  background-color: #4d1b00;
  color: #FF9800; }

/* 
Element: Dropdowns

Wrapper for [Bootstrap dropdowns](http://getbootstrap.com/docs/4.1/components/dropdowns/) and React [`<Dropdowns>`](https://uat.pipelineapp.io/app/pattern-library/elements#dropdown)

### Standard UX Behavior

- Dropdowns close by clicking outside the dropdown or by pressing <kbd>ESC</kbd>
- Dropdowns should not launch another dropdown
- Links in dropdowns cannot span multiple lines
- Per [Google Material Design](https://material.io/components/menus/#exposed-dropdown-menu), dropdown arrow indicator should change direction based on the state of the dropdown, matching expand/collapse states

Markup:
<div class="btn-group">
	<button class="btn {{modifier_class}} dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
		Dropdown
		<span class="caret"></span>
	</button>
	<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div role="separator" class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>

.btn-primary		- &nbsp;
.btn-secondary		- &nbsp;
.btn-info			- &nbsp;
.btn-warning		- &nbsp;
.btn-danger			- &nbsp;
.btn-success		- &nbsp;
.btn-inverse		- &nbsp;
.btn-light			- &nbsp;
.btn-dark			- &nbsp;

Styleguide ElementDropdowns
*/
/* 
Icon

Icon based [Bootstrap dropdowns](http://getbootstrap.com/docs/4.1/components/dropdowns/) and React [`Dropdowns`](https://react-bootstrap.github.io/components/dropdowns/)

<span class="text-highlight">Note, for React, icon based dropdowns need to created using the Custom Toggle option.</span>

Markup:
<div class="btn-group">
	<a class="dropdown dropdown-toggle" data-toggle="dropdown"><i class="fa fa-chevron-down"></i></a>
	<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div role="separator" class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>

Styleguide ElementDropdowns.Icon
*/
/* 
Icon: More Actions

Dropdown in the Action Bar per [Google Material Design Cards](https://material.io/design/components/cards.html) using Bootstrap Dropdowns and React [`Dropdowns`](https://react-bootstrap.github.io/components/dropdowns/) with a custom toggle.

### Standard UX Behavior

- <span class="text-highlight">More Actions is always be the LAST action in the action bar.</span>
- Links in the More Action dropdowns cannot have icons

Markup:
<div class="panel panel-default" style="width:20rem;">
	<div class="panel-body" style="padding-bottom: 5em;">
		<div class="panel-actions">
			<div class="btn-group">
				<a class="dropdown dropdown-toggle" data-toggle="dropdown"></a>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">Action</a>
					<a class="dropdown-item" href="#">Another action</a>
					<a class="dropdown-item" href="#">Something else here</a>
					<div role="separator" class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">Separated link</a>
				</div>
			</div>
		</div>
	</div>
</div>

Styleguide ElementDropdowns.IconMoreAction
*/
/* 
Icon: Filter

Dropdown in [`Table`](section-elementtables.html) columns.

### Sizing
To control the filter width, use the `data-columns` attribute, ex:
- <code>&lt;div class="dropdown-menu" <span class="text-highlight">data-columns="1"</span>&gt;</code> for 1 column width
- <code>&lt;div class="dropdown-menu" <span class="text-highlight">data-columns="2"</span>&gt;</code> for 2 columns width

<span class="text-highlight">Note, for React, the filter is managed by [`React Select`](section-componentreactselect.html), and it can be integrated into the dropdown using the Custom Menu option.</span>

### Components
- [`React-Select`](section-componentreactselect.html)

Markup: tables-filterable.hbs

Styleguide ElementDropdowns.IconFilter
*/
.btn-group .dropdown-toggle::after {
  display: none; }

.btn-group .dropdown-toggle .caret {
  width: auto;
  height: auto;
  border-width: 0; }
  .btn-group .dropdown-toggle .caret::before {
    font-family: "FontAwesome";
    content: "\f107"; }

.btn-group .dropdown-menu {
  border-radius: 0.5rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  font-size: inherit;
  will-change: auto !important;
  /* we need this; otherwise the modal won't appear inside a dropdown */ }
  .btn-group .dropdown-menu > a {
    color: #3F51B5 !important; }
    .btn-group .dropdown-menu > a:hover {
      color: #3F51B5 !important; }
    .btn-group .dropdown-menu > a.dropdown-item.disabled {
      color: #9E9E9E !important; }
  .btn-group .dropdown-menu .dropdown-item {
    padding-right: 1rem;
    padding-left: 1rem; }
    .btn-group .dropdown-menu .dropdown-item:hover {
      background-color: #F5F5F5; }
    .btn-group .dropdown-menu .dropdown-item[data-isdevonly='1'] {
      color: #FF9800 !important; }
    .btn-group .dropdown-menu .dropdown-item.disabled {
      color: #9E9E9E; }
    .btn-group .dropdown-menu .dropdown-item.btn {
      background-color: inherit;
      box-shadow: none;
      border: none; }
      .btn-group .dropdown-menu .dropdown-item.btn:hover {
        background-color: #F5F5F5; }
      .btn-group .dropdown-menu .dropdown-item.btn:active {
        border: none; }
  .btn-group .dropdown-menu .dropdown-header {
    font-size: 0.8rem;
    padding-right: 1.8rem;
    padding-left: 1.8rem; }

.btn-group.show > .dropdown {
  background-color: #FFFFFF; }
  .btn-group.show > .dropdown:hover {
    background-color: #FFFFFF; }

.btn-group.show > .dropdown-toggle {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
  .btn-group.show > .dropdown-toggle .caret::before {
    content: "\f106"; }
  .btn-group.show > .dropdown-toggle.btn-default {
    border-color: #424242; }
  .btn-group.show > .dropdown-toggle.btn-secondary {
    color: #FFFFFF;
    background-color: #BDBDBD;
    border-color: #424242; }

.btn-group.introjs-showElement > .dropdown-menu {
  display: block !important; }

.dropdown-menu-container {
  position: relative; }
  .dropdown-menu-container a.btn i {
    float: right;
    margin-left: 5px;
    padding-top: 3px; }
  .dropdown-menu-container.right ul.dropdown-menu {
    right: 0;
    left: auto; }

/*New react dropdown*/
.dropdown {
  display: inline-block; }
  .dropdown .dropdown__content {
    background-color: #fff;
    text-align: left;
    position: absolute;
    right: 0px;
    width: max-content;
    line-height: 2.5;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    z-index: 1;
    display: none; }
    .dropdown .dropdown__content ul {
      margin: 2px 0 0;
      padding: 5px 0; }
      .dropdown .dropdown__content ul li {
        list-style: none; }
        .dropdown .dropdown__content ul li a {
          cursor: pointer;
          padding: .5em 2.5em .5em 1.5em; }
        .dropdown .dropdown__content ul li:hover {
          background-color: #F5F5F5; }
  .dropdown .dropdown-menu {
    left: -50px;
    margin: 2px 0 0;
    padding: 5px 0; }
    .dropdown .dropdown-menu li {
      list-style: none; }
      .dropdown .dropdown-menu li a {
        cursor: pointer;
        padding: 0.3rem 0.5rem;
        display: block;
        line-height: 1.42857143;
        white-space: nowrap; }
      .dropdown .dropdown-menu li:hover {
        background-color: #F5F5F5; }

.step-detail .dropdown .dropdown-menu {
  right: auto;
  left: 0; }

.dropdown--active .dropdown__content {
  display: block; }

/****IE Edge hack****/
_:-ms-lang(x),
.dropdown__content {
  min-width: 175px; }

/* 
Email: Layout

### Standard UX

- Top bar is `7px` height with color set to the account's brand colors.
- Logo is upper right set to the account's logo.
- Footer is Pipeline marketing boilerplate separated from the body with a gray line.

Markup: email.hbs

Styleguide Email
*/
/* 
Email: Ask: Step

Styleguide EmailAskStep
*/
/* 
Contact: Action Required

Email ID `16`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=16)

### Standard UX
- This email can be disabled in the user settings and is `ON` by default

Markup: email-actionrequired-contact.hbs

Styleguide EmailAskStep.Contact
*/
/* 
Contact: Action Required: External

Email ID `75`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=75)

Markup: email-actionrequired-contact-external.hbs

Styleguide EmailAskStep.Contact-External
*/
/* 
Contact: Reminder

Email ID `56`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=56)

Markup: email-actionrequiredreminder-contact.hbs

Styleguide EmailAskStep.ContactReminder
*/
/* 
Contact: Reminder: External

Email ID `76`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=76)

Markup: email-actionrequiredreminder-contact-external.hbs

Styleguide EmailAskStep.ContactReminder-External
*/
/* 
Team: Action Required

Email ID `68`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=68)

Markup: email-actionrequired-team.hbs

Styleguide EmailAskStep.Team
*/
/* 
Team: Action Required: External

Email ID `77`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=77)

Markup: email-actionrequired-team-external.hbs

Styleguide EmailAskStep.Team-External
*/
/* 
Team: Reminder

Email ID `69`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=69)

Markup: email-actionrequiredreminder-team.hbs

Styleguide EmailAskStep.TeamReminder
*/
/* 
Team: Reminder: External

Email ID `78`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=78)

Markup: email-actionrequiredreminder-team-external.hbs

Styleguide EmailAskStep.TeamReminder-External
*/
/* 
Update

Email ID `18`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=18)

### Standard UX
- This email can be disabled in the user settings and <span class="text-highlight">is `OFF` by default</span>

Markup: email-update.hbs

Styleguide EmailAskStep.Update
*/
/* 
Note Added

Email ID `49`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=49)

### Standard UX
- This email can be disabled in the user settings and <span class="text-highlight">is `OFF` by default</span>

Markup: email-noteadded.hbs

Styleguide EmailAskStep.NoteAdded
*/
/* 
Email: Bundles

Styleguide EmailBundles
*/
/* 
Bundle Owner Transferred to Team

Email ID `72`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=72)

### Standard UX
- This email can be disabled in the user settings and is `ON` by default

Markup: email-bundleownertransferred-team.hbs

Styleguide EmailBundles.BundleOwnerTransferredTeam
*/
/* 
Bundle Owner Transferred to Contact

Email ID `73`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=73)

### Standard UX
- This email can be disabled in the user settings and is `ON` by default

Markup: email-bundleownertransferred-contact.hbs

Styleguide EmailBundles.BundleOwnerTransferredContact
*/
/* 
Email: Flow

Styleguide EmailFlows
*/
/* 
Flow Owner: Transferred to Team

Email ID `65`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=65)

### Standard UX
- This email can be disabled in the user settings and is `ON` by default

Markup: email-workflowownertransferred-team.hbs

Styleguide EmailFlows.FlowOwnerTransferredTeam
*/
/* 
Flow Owner: Transferred to Contact

Email ID `64`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=64)

### Standard UX
- This email can be disabled in the user settings and is `ON` by default

Markup: email-workflowownertransferred-contact.hbs

Styleguide EmailFlows.FlowOwnerTransferredContact
*/
/* 
Email: Contact

Styleguide EmailContact
*/
/* 
Invited

Email ID `6`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=6)

Markup: email-invited-contact.hbs

Styleguide EmailContact.Invited
*/
/* 
Temp Access

Email ID `8`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=8)

Markup: email-invited-tempaccess.hbs

Styleguide EmailContact.TempAccess
*/
/* 
Lock Out (Almost)

<span class="text-highlight">This is a Sentinel email and cannot be customized.</span>

Email ID `11`. Update in [Genesis](https://dev.pipelineapp.io/genesis/applications/email-update.aspx?email_id=11&app_id=-3)

Markup: email-lockout.hbs

Styleguide EmailContact.LockOut
*/
/* 
Email: Admin

Styleguide EmailAdmin
*/
/* 
Account Created

Email ID `10`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=10)

Markup: email-invited-admin.hbs

Styleguide EmailAdmin.AccountCreated
*/
/* 
Create New Password

Email ID `5`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=5)

Markup: email-actionrequired-createnewpassword.hbs

Styleguide EmailAdmin.CreateNewPassword
*/
/* 
Email: Team

Styleguide EmailTeam
*/
/* 
Deactivated

Email ID `11`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=11)

Markup: email-deactivated-team.hbs

Styleguide EmailTeam.Deactivated
*/
/* 
Email: Third-Party Users

Styleguide EmailThirdPartyUsers
*/
/* 
Sponsor: Action Required

Email ID `1`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=1)

Markup: email-actionrequired-sponsor.hbs

Styleguide EmailThirdPartyUsers.SponsorActionRequired
*/
/* 
Denied

Email ID `3`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=3)

Markup: email-denied.hbs

Styleguide EmailThirdPartyUsers.Denied
*/
/* 
Approved

Email ID `2`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=2)

Markup: email-approved.hbs

Styleguide EmailThirdPartyUsers.Approved
*/
/* 
Sponsorship Transferred

Email ID `4`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=4)

Markup: email-sponsorshiptransferred.hbs

Styleguide EmailThirdPartyUsers.SponsorshipTransferred
*/
/* 
Email: Ask

Styleguide EmailAsk
*/
/* 
Canceled

Email ID `17`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=17)

### Standard UX
- This email can be disabled in the user settings and is `ON` by default

Markup: email-ask-canceled.hbs

Styleguide EmailAsk.Canceled
*/
/* 
Recurrence

Email ID `9`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=9)

Markup: email-ask-recurrence.hbs

Styleguide EmailAsk.Recurrence
*/
/* 
Recurrence Flow Deactivated

Email ID `74`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=74)

Markup: email-ask-recurrence-flow-deactivated.hbs

Styleguide EmailAsk.RecurrenceFlowDeactivated
*/
/* 
Reopened

Email ID `7`. Update in [Genesis](https://dev.pipelineapp.io/backoffice/users/email-update.aspx?email_id=7)

Markup: email-request-reopened.hbs

Styleguide EmailAsk.Reopened
*/
.table-email {
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
  /* Hotmail classes */
  /* Trigger view-in-browser button in Outlook */
  /* Table and cell alignment */
  /* Image fix */
  /* Type */
  /* Links */
  /* Containers */
  /* Main and Footer content */
  /* styles for .cta-button */ }
  .table-email img {
    max-width: 100%;
    margin-bottom: 14px; }
  .table-email .ExternalClass {
    width: 100%; }
  .table-email .ExternalClass,
  .table-email .ExternalClass p,
  .table-email .ExternalClass span,
  .table-email .ExternalClass font,
  .table-email .ExternalClass td,
  .table-email .ExternalClass div {
    line-height: 100%; }
  .table-email #outlook a {
    padding: 0; }
  .table-email table {
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt; }
  .table-email table td {
    vertical-align: top; }
  .table-email img {
    -ms-interpolation-mode: bicubic; }
  .table-email p, .table-email ul, .table-email ol {
    margin-bottom: 14px;
    font-weight: normal; }
  .table-email pre,
  .table-email code {
    font-family: monospace;
    white-space: pre-wrap;
    background-color: yellow;
    padding: 0 5px; }
  .table-email ul, .table-email ol, .table-email li {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0; }
  .table-email ul, .table-email ol {
    margin-left: 20px; }
  .table-email ol, .table-email ol li {
    list-style-type: decimal; }
  .table-email b,
  .table-email strong {
    font-weight: bold; }
  .table-email h1,
  .table-email h1 a {
    font-size: 20px;
    font-weight: bold; }
  .table-email h2,
  .table-email h2 a {
    font-size: 16px;
    font-weight: bold; }
  .table-email h3,
  .table-email h3 a {
    font-size: 14px;
    font-weight: bold; }
  .table-email h1 {
    margin: 0 0 15px 0;
    color: #222222 !important; }
  .table-email h2 {
    margin: 0 0 12px 0;
    color: #222222 !important; }
  .table-email h3 {
    margin: 0 0 14px 0;
    color: #222222 !important; }
  .table-email a,
  .table-email a:link {
    color: #3F51B5;
    text-decoration: underline; }
  .table-email a:visited {
    color: purple !important; }
  .table-email a:active {
    color: #3F51B5 !important; }
  .table-email .body-wrap {
    background-color: #ffffff;
    width: 100%; }
  .table-email .container {
    display: block !important;
    max-width: 630px !important;
    overflow: visible;
    margin: 0 !important;
    clear: both !important; }
  .table-email .content {
    max-width: 600px;
    overflow: visible;
    margin: 0;
    display: block; }
  .table-email .main-content {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 14px;
    color: #222222;
    line-height: 1.5;
    padding: 25px;
    border-top: 5px solid #3F51B5; }
  .table-email .main-content img {
    margin-top: 14px; }
  .table-email .sub-content {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    width: 100%;
    clear: both;
    color: #222222;
    padding: 25px;
    padding-bottom: 0;
    border-top: 1px solid #d0d0d0; }
  .table-email .footer-content {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    width: 100%;
    clear: both;
    color: #777;
    font-size: 85%;
    padding: 25px; }
  .table-email .cta-button,
  .table-email [owa] .cta-button,
  .table-email [class="cta-button"],
  .table-email .cta-button:link {
    display: inline-block;
    margin: 12px 0;
    background: #3F51B5;
    color: #FFFFFF;
    border: 8px solid #3F51B5;
    border-radius: 3px;
    border-width: 8px;
    border-left-width: 16px;
    border-right-width: 16px;
    border-color: #3F51B5;
    border-style: solid;
    cursor: pointer;
    text-decoration: none !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    white-space: nowrap; }
  .table-email .cta-button span,
  .table-email [owa] .cta-button span,
  .table-email [class="cta-button"] span {
    color: #ffffff;
    text-decoration: none !important;
    text-decoration: none;
    border-color: #F2AB27;
    border: 12px solid #F2AB27; }

body.email {
  margin: 1em auto; }
  body.email .email-headers {
    padding: 1em;
    background-color: #F5F5F5;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 2em; }
    body.email .email-headers p {
      margin-bottom: 0; }
  body.email iframe, body.email embed {
    display: none; }

/* 
Component: Error Messages

Weight: 100

Styleguide ComponentErrorMessages
*/
/* 
Access Denied

Markup: error-accessdenied.hbs

Weight: 100

Styleguide ComponentErrorMessages.AccessDenied
*/
/* 
Access Revoked

Markup: error-accessrevoked.hbs

Weight: 100

Styleguide ComponentErrorMessages.AccessRevoked
*/
/* 
Content Not Found

Markup: error-contentnotfound.hbs

Weight: 100

Styleguide ComponentErrorMessages.ContentNotFound
*/
/* 
Error

Markup: error-error.hbs

Weight: 100

Styleguide ComponentErrorMessages.Error
*/
/* 
Flow Not Found

Markup: error-flownotfound.hbs

Weight: 100

Styleguide ComponentErrorMessages.FlowNotFound
*/
.panel.panel-message .panel-body .panel-message-guide {
  padding-right: 140px;
  background-image: url(http://iwcdn.s3.amazonaws.com/pipeline/owlbert-gamify-green-cap-email-header.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  margin-right: -20px; }

.panel.panel-message.panel-oops .panel-body .panel-message-guide {
  background-image: url(http://iwcdn.s3.amazonaws.com/pipeline/owlbert-oops-brown-staring.png); }

/* 
Component: Error Messages: External

Weight: 100

Generic external error message

### Standard UX

- Tile body must start with red alert with "Oops".
- The tile footer must be gray with 2 color background on the right. Verbiage must match marketing boilerplate.

### Verbiage
Follow the format and sentence structure in the examples below.

<div class="panel panel-default">
<div class="panel-body">
	<table class="table table-inverse">
	<thead>
	<tr><th>Type</th><th>Message</th><th>Show Email Button?</th></tr>
	</thead>
	<tbody>
	<tr><td>Access Denied</td><td>To see the content, please ask someone associated with it to make you a follower or add you as a member of the team who owns the content.</td><td class="cell-css cell-numericyesno" data-value="0"></td></tr>
	<tr><td>Content Not Found</td><td>The content you're looking for has either been deleted or canceled.</td><td class="cell-css cell-numericyesno" data-value="0"></td></tr>
	<tr><td>Error</td><td>Please let us know what happened so we can resolve your issue.</td><td class="cell-css cell-numericyesno" data-value="1"></td></tr>
	</tbody>
	</table>
</div>
</div>

Markup: error-external.hbs

Styleguide ComponentErrorMessagesExternal
*/
body.external-form #content .panel .panel-body .panel-message-guide {
  background-image: none; }
  body.external-form #content .panel .panel-body .panel-message-guide h4 {
    display: none; }

body.external-form #content .panel[data-is-step='1'] .panel-footer {
  display: none; }

body.external-form #content .panel.panel-oops {
  border-width: 0;
  box-shadow: none; }
  body.external-form #content .panel.panel-oops .panel-heading {
    background-color: #EF9A9A;
    border-color: #E57373;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-width: 1px 1px 1px 1px;
    padding: .75rem 1.25rem;
    border-radius: .25rem;
    color: #9f1815;
    margin-bottom: 1em; }
    body.external-form #content .panel.panel-oops .panel-heading:before {
      font-family: 'FontAwesome';
      margin-right: 5px;
      font-weight: normal;
      color: #9f1815;
      content: "\f071"; }
  body.external-form #content .panel.panel-oops .panel-body {
    padding-top: 1em;
    padding-left: 0;
    padding-right: 0; }
  body.external-form #content .panel.panel-oops[data-messagetype="NotStepOwner"] .panel-heading:after {
    content: "Oops!";
    color: #9f1815; }
  body.external-form #content .panel.panel-oops[data-messagetype="NotStepOwner"] .panel-message-guide .heading {
    margin-top: 0; }
    body.external-form #content .panel.panel-oops[data-messagetype="NotStepOwner"] .panel-message-guide .heading:after {
      content: "Sorry, you are no longer the step owner";
      font-size: 1.3rem;
      font-weight: normal; }
  body.external-form #content .panel.panel-oops[data-messagetype="NotStepOwner"] .panel-message-guide .message:after {
    content: "Sorry, you do not have access to view the step, because you are not the step owner."; }
  body.external-form #content .panel.panel-oops[data-messagetype="StepKickback"] .panel-heading {
    background-color: #FFCC80;
    border-color: #FFB74D; }
    body.external-form #content .panel.panel-oops[data-messagetype="StepKickback"] .panel-heading:after {
      content: "Step Kicked Back";
      color: #955300; }
  body.external-form #content .panel.panel-oops[data-messagetype="StepKickback"] .panel-message-guide .heading {
    margin-top: 0; }
    body.external-form #content .panel.panel-oops[data-messagetype="StepKickback"] .panel-message-guide .heading:after {
      content: "Step Kicked Back";
      font-size: 1.3rem;
      font-weight: normal; }
  body.external-form #content .panel.panel-oops[data-messagetype="StepKickback"] .panel-message-guide .message:after {
    content: "This step was kicked back to a previous step. Please wait until this becomes the current step in the flow again."; }
  body.external-form #content .panel.panel-oops[data-messagetype="StepNotOpen"] .panel-heading {
    background-color: #FFCC80;
    border-color: #FFB74D; }
    body.external-form #content .panel.panel-oops[data-messagetype="StepNotOpen"] .panel-heading:before {
      content: "\f071";
      color: #955300; }
    body.external-form #content .panel.panel-oops[data-messagetype="StepNotOpen"] .panel-heading:after {
      content: "Step Not Open Yet";
      color: #955300; }
  body.external-form #content .panel.panel-oops[data-messagetype="StepNotOpen"] .panel-message-guide .heading {
    margin-top: 0; }
    body.external-form #content .panel.panel-oops[data-messagetype="StepNotOpen"] .panel-message-guide .heading:after {
      content: "Step Closed";
      font-size: 1.3rem;
      font-weight: normal; }
  body.external-form #content .panel.panel-oops[data-messagetype="StepNotOpen"] .panel-message-guide .message:after {
    content: "This step cannot be acted on out-of-turn. Please wait until this becomes the current step in the flow."; }

body.external-form #content .panel.panel-done {
  border-width: 0;
  box-shadow: none; }
  body.external-form #content .panel.panel-done .panel-heading {
    background-color: #A5D6A7;
    border-color: #81C784;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-width: 1px 1px 1px 1px;
    padding: .75rem 1.25rem;
    border-radius: .25rem;
    color: #255827;
    margin-bottom: 1em;
    display: none; }
    body.external-form #content .panel.panel-done .panel-heading:before {
      font-family: 'FontAwesome';
      margin-right: 5px;
      font-weight: normal;
      color: #255827;
      content: "\f046";
      display: none; }
  body.external-form #content .panel.panel-done .panel-body {
    padding-top: 1em;
    padding-left: 0;
    padding-right: 0; }
  body.external-form #content .panel.panel-done[data-messagetype="StepComplete"] .panel-heading:after {
    content: "Step Closed";
    color: #255827;
    display: none; }
  body.external-form #content .panel.panel-done[data-messagetype="StepComplete"] .panel-message-guide .heading {
    margin-top: 0; }
    body.external-form #content .panel.panel-done[data-messagetype="StepComplete"] .panel-message-guide .heading:after {
      content: "Step Closed";
      font-size: 1.3rem;
      font-weight: normal; }
  body.external-form #content .panel.panel-done[data-messagetype="StepComplete"] .panel-message-guide .message:after {
    display: none; }
  body.external-form #content .panel.panel-done[data-messagetype="StepUpdated"] .panel-heading:after {
    content: "Step Updated";
    color: #255827; }
  body.external-form #content .panel.panel-done[data-messagetype="StepUpdated"] .panel-message-guide .heading {
    margin-top: 0; }
    body.external-form #content .panel.panel-done[data-messagetype="StepUpdated"] .panel-message-guide .heading:after {
      content: "Step Updated";
      font-size: 1.3rem;
      font-weight: normal; }
  body.external-form #content .panel.panel-done[data-messagetype="StepUpdated"] .panel-message-guide .message:after {
    content: "Your step has been updated."; }

/* 
Component: Header

Markup: header.hbs

Weight: 100

Styleguide ComponentHeader
*/
/* 
Alerts

Markup: header-alerts.hbs

Weight: 100

Styleguide ComponentHeader.Alerts
*/
#action-bar-panel {
  background-color: #ffffff;
  border-bottom: #E0E0E0 1px solid;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 1.2em; }
  #action-bar-panel .list-inline {
    text-align: center;
    font-size: 1rem;
    margin: 0; }
    #action-bar-panel .list-inline li {
      padding: 0; }
      #action-bar-panel .list-inline li a {
        color: #424242; }
        #action-bar-panel .list-inline li a i {
          color: #FF9800;
          padding-right: .4em; }
        #action-bar-panel .list-inline li a:hover {
          color: #3F51B5; }
        #action-bar-panel .list-inline li a .badge-danger {
          position: relative;
          top: -10px;
          left: -8px;
          padding: 2px 5px;
          font-size: 11px; }
    #action-bar-panel .list-inline li:before {
      content: "|";
      color: #E0E0E0;
      margin: 0 1.5em; }
    #action-bar-panel .list-inline li:first-child:before {
      content: "";
      margin: 0; }

#headerwrapper {
  height: 50px;
  position: absolute;
  top: 0;
  width: 100%; }
  #headerwrapper.slide-panel-active {
    margin-right: 400px;
    transition: .31s; }
  #headerwrapper #app-environment-header {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  #headerwrapper #header {
    width: auto; }
    #headerwrapper #header #header-profile {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      padding: 0 1em; }
      #headerwrapper #header #header-profile a {
        padding: 0.5em 0.5em;
        margin: 0; }
        #headerwrapper #header #header-profile a:before {
          display: none; }
        #headerwrapper #header #header-profile a#style-guide i, #headerwrapper #header #header-profile a#pattern-library i, #headerwrapper #header #header-profile a#backoffice i, #headerwrapper #header #header-profile a#qa i, #headerwrapper #header #header-profile a#screenshot i, #headerwrapper #header #header-profile a#zapier i {
          color: #FF9800; }
        #headerwrapper #header #header-profile a#style-guide.fa-inverse, #headerwrapper #header #header-profile a#pattern-library.fa-inverse, #headerwrapper #header #header-profile a#backoffice.fa-inverse, #headerwrapper #header #header-profile a#qa.fa-inverse, #headerwrapper #header #header-profile a#screenshot.fa-inverse, #headerwrapper #header #header-profile a#zapier.fa-inverse {
          background-color: var(--primary); }
          #headerwrapper #header #header-profile a#style-guide.fa-inverse i, #headerwrapper #header #header-profile a#pattern-library.fa-inverse i, #headerwrapper #header #header-profile a#backoffice.fa-inverse i, #headerwrapper #header #header-profile a#qa.fa-inverse i, #headerwrapper #header #header-profile a#screenshot.fa-inverse i, #headerwrapper #header #header-profile a#zapier.fa-inverse i {
            color: #FFFFFF; }
      #headerwrapper #header #header-profile .slide-panel {
        display: none;
        transition: .3s; }
        #headerwrapper #header #header-profile .slide-panel.active {
          display: initial;
          width: 400px;
          right: 0px;
          position: fixed;
          height: 100% !important;
          z-index: 9999;
          top: 0; }
        #headerwrapper #header #header-profile .slide-panel h2 a.close-all-alerts {
          float: none;
          font-size: 1em;
          position: absolute;
          opacity: 1;
          right: 40px;
          top: 2px;
          margin: 0;
          padding: 0; }
          #headerwrapper #header #header-profile .slide-panel h2 a.close-all-alerts i.close-all-alerts {
            color: #E53935;
            font-size: 1em;
            font-weight: normal;
            text-shadow: none;
            margin: 0; }
            #headerwrapper #header #header-profile .slide-panel h2 a.close-all-alerts i.close-all-alerts:before {
              content: "\f057";
              font-family: "FontAwesome"; }
      #headerwrapper #header #header-profile a .badge {
        position: relative;
        top: -10px;
        left: -12px;
        padding: 2px 5px;
        font-size: 11px; }
      #headerwrapper #header #header-profile .btn-group .dropdown-menu {
        left: auto;
        right: 0; }
        #headerwrapper #header #header-profile .btn-group .dropdown-menu a {
          margin: 0;
          padding: .25rem 1rem;
          float: none; }
      #headerwrapper #header #header-profile[data-is-admin='0'] .dropdown-menu a.dropdown-item[data-qa='view-account-settings'] {
        display: none; }

body.dark #headerwrapper #header #header-profile {
  background-color: #212121; }

h1, h2, h3 {
  font-weight: normal; }

.sidebar #view-process-overview:before {
  content: "\f013";
  font-family: FontAwesome; }

.form-vertical p, .request-files p {
  margin-bottom: 0; }

.form-vertical .filestack .filestack-files, .request-files .filestack .filestack-files {
  list-style: none;
  margin-left: 0;
  padding-left: 0; }
  .form-vertical .filestack .filestack-files li, .request-files .filestack .filestack-files li {
    float: left;
    padding: 7px 10px; }
    .form-vertical .filestack .filestack-files li a, .request-files .filestack .filestack-files li a {
      display: inline-block; }
      .form-vertical .filestack .filestack-files li a.fa-times-circle, .request-files .filestack .filestack-files li a.fa-times-circle {
        display: inline;
        visibility: hidden; }
    .form-vertical .filestack .filestack-files li:hover a.fa-times-circle, .request-files .filestack .filestack-files li:hover a.fa-times-circle {
      visibility: visible; }
  .form-vertical .filestack .filestack-files:after, .request-files .filestack .filestack-files:after {
    clear: both; }

.request-files {
  margin-bottom: 1em; }
  .request-files .filestack .filestack-files {
    margin-top: 0; }
    .request-files .filestack .filestack-files li {
      padding-top: 0; }

#footerwrapper {
  height: 32px;
  margin-left: 85px;
  background-color: inherit;
  color: #9E9E9E;
  padding: 0;
  z-index: auto;
  transition: all 0s ease 0s; }
  #footerwrapper #footer #footer-copyright {
    float: none;
    text-align: center; }
    #footerwrapper #footer #footer-copyright:before {
      content: "Copyright (c) Pipeline, an Innovative Way solution.";
      color: #9E9E9E; }

.form-editor {
  padding-left: 0;
  margin: auto;
  margin-top: 1em;
  list-style: none;
  width: 1040px; }
  .form-editor li {
    margin-top: 0.5em;
    margin-bottom: 1em; }
    .form-editor li .field {
      position: relative; }
      .form-editor li .field .field-prompt {
        padding-top: 5px; }
      .form-editor li .field .field-drag {
        position: absolute;
        left: calc(50% - 6px); }
      .form-editor li .field .field-body p.field-title {
        margin-bottom: 0.5rem; }
        .form-editor li .field .field-body p.field-title[data-field-type="HIDDEN"] > strong:before {
          font-family: 'FontAwesome';
          content: "\f070";
          margin-right: 5px;
          font-weight: normal; }
        .form-editor li .field .field-body p.field-title[data-field-type="HIDDENLINKFIELD"] > strong:before {
          font-family: 'FontAwesome';
          content: "\f0ec";
          margin-right: 5px;
          font-weight: normal; }
        .form-editor li .field .field-body p.field-title[data-field-type="LISTSET"] > strong:before {
          font-family: 'FontAwesome';
          content: "\f02e";
          margin-right: 5px;
          font-weight: normal; }
        .form-editor li .field .field-body p.field-title[data-toggle="tooltip"] {
          display: inline-block; }
      .form-editor li .field .field-body .help-block {
        margin-bottom: 5px; }
        .form-editor li .field .field-body .help-block .fieldhelp {
          font-style: italic;
          font-size: 90%;
          color: #9E9E9E; }
      .form-editor li .field .field-body .field-properties {
        margin-bottom: 0.5rem; }
        .form-editor li .field .field-body .field-properties a {
          margin-right: 15px; }
      .form-editor li .field .field-body input,
      .form-editor li .field .field-body select {
        font-size: 0.8rem; }
      .form-editor li .field .field-utils {
        padding-top: 5px; }
        .form-editor li .field .field-utils a.fa {
          font-size: 1.4em;
          padding-right: 7px;
          padding-left: 7px;
          display: none;
          text-decoration: none; }
          .form-editor li .field .field-utils a.fa.fa-times-circle {
            color: #E53935; }
            .form-editor li .field .field-utils a.fa.fa-times-circle.text-muted {
              color: #BDBDBD; }
          .form-editor li .field .field-utils a.fa.text-muted {
            color: #BDBDBD; }
      .form-editor li .field .iframe-wrapper.iframe-boldsign {
        border: 1px dashed #E0E0E0;
        padding: 1em;
        margin-left: 0;
        margin-top: 2em;
        position: relative;
        border-radius: 1rem;
        margin-bottom: 1em;
        text-align: left;
        position: relative;
        height: auto; }
        .form-editor li .field .iframe-wrapper.iframe-boldsign img {
          box-shadow: none;
          padding: 0; }
        .form-editor li .field .iframe-wrapper.iframe-boldsign:before {
          font-size: 0.8em;
          color: #9E9E9E;
          display: inline-block;
          position: absolute;
          top: -2em;
          width: 100%; }
        .form-editor li .field .iframe-wrapper.iframe-boldsign:before {
          content: "App Widget"; }
        .form-editor li .field .iframe-wrapper.iframe-boldsign iframe {
          display: none; }
        .form-editor li .field .iframe-wrapper.iframe-boldsign:after {
          content: "Sample Signature";
          font-family: 'Over the Rainbow', cursive;
          font-size: 2rem;
          display: block; }
      .form-editor li .field .field-add {
        position: relative;
        border-bottom: solid 2px #3F51B5;
        font-size: 2em;
        text-align: center;
        height: 0px;
        margin-bottom: 0px;
        visibility: hidden; }
        .form-editor li .field .field-add .add-before {
          position: relative;
          display: inline;
          top: -14px;
          background-color: #ffffff; }
        .form-editor li .field .field-add .add-after {
          position: relative;
          display: inline;
          bottom: 0px;
          background-color: #ffffff; }
        .form-editor li .field .field-add:last-child {
          height: 15px;
          margin-bottom: 15px; }
      .form-editor li .field.field-LISTSET .field-listset-container {
        border: 1px dashed #E0E0E0;
        padding: 1em;
        margin-left: 0;
        margin-top: 2em;
        position: relative;
        border-radius: 1rem;
        margin-bottom: 1em;
        text-align: left;
        padding-bottom: 0; }
        .form-editor li .field.field-LISTSET .field-listset-container img {
          box-shadow: none;
          padding: 0; }
        .form-editor li .field.field-LISTSET .field-listset-container:before {
          font-size: 0.8em;
          color: #9E9E9E;
          display: inline-block;
          position: absolute;
          top: -2em;
          width: 100%; }
        .form-editor li .field.field-LISTSET .field-listset-container:before {
          content: "Form Field Library Template"; }
        .form-editor li .field.field-LISTSET .field-listset-container p.field-title {
          margin-top: 1rem; }
          .form-editor li .field.field-LISTSET .field-listset-container p.field-title:first-child {
            margin-top: 0; }
      .form-editor li .field[data-hideable='0'] .field-body .field-properties a.link-hidden {
        display: none; }
      .form-editor li .field[data-id-required='1'] .field-body .field-properties a.link-required {
        pointer-events: none;
        color: #9e9e9e; }
        .form-editor li .field[data-id-required='1'] .field-body .field-properties a.link-required:before {
          color: #9e9e9e; }
      .form-editor li .field[data-is-system-field='1'] .field-utils a.fa.fa-pencil-square-o.disabled, .form-editor li .field[data-is-system-field='1'] .field-utils a.fa.fa-times-circle.disabled, .form-editor li .field[data-is-system-field='1'] .field-utils a.fa.fa-magic.disabled {
        color: #9E9E9E; }
      .form-editor li .field[data-order='1'] .field-add:first-child {
        height: 25px;
        margin-top: 20px;
        border-bottom-width: 0px;
        border-top: solid 2px #3F51B5; }
      .form-editor li .field[data-order='1']:hover .field-add:first-child {
        visibility: visible; }
      .form-editor li .field:hover .field-utils a.fa {
        display: inline-block; }
      .form-editor li .field:hover .field-add:last-child {
        visibility: visible; }
    .form-editor li.sortable-chosen {
      max-height: 120px !important;
      overflow: hidden; }
      .form-editor li.sortable-chosen .field:hover .field-add {
        visibility: hidden !important; }
  .form-editor[data-count='1'] li a.drag-handle {
    display: none; }

form .control-group .formlistgrid label.fdradiolabel input.icon {
  width: 1em;
  margin-right: 2em; }
  form .control-group .formlistgrid label.fdradiolabel input.icon::before {
    content: "";
    font-family: "FontAwesome"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon::after {
    content: "";
    font-family: "FontAwesome";
    position: relative;
    top: -3px;
    left: 1.5em; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='SELECT']::after {
    content: "\f150"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='SELECTCONTACT']::after {
    content: "\f007"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='SELECTTEAMMEMBER']::after {
    content: "\f0c0"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='LISTCHECKBOXES']::after {
    content: "\f046"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='LISTRADIOBOXES']::after {
    content: "\f192"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='TEXTAREA']::after {
    content: "\f039"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='LABEL']::after {
    content: "\f1dc"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='LABELTEXT']::after {
    content: "\f031"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='TEXT']::after {
    content: "\f068"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='DATE']::after {
    content: "\f133"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='TIME']::after {
    content: "\f017"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='NUMBER']::after {
    content: "\f292"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='EMAIL']::after {
    content: "\f003"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='url']::after {
    content: "\f08e"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='HIDDEN']::after {
    content: "\f070"; }
  form .control-group .formlistgrid label.fdradiolabel input.icon.form-editor-field-types[value='HIDDENLINKFIELD']::after {
    content: "\f0ec"; }

#form-field-preview form input[type="text"] {
  pointer-events: none;
  background-color: #e9ecef; }

#form-field-preview form input[type="date"] {
  pointer-events: none;
  background-color: #e9ecef; }

#form-field-preview form iframe {
  height: 100px !important; }

#field-condition h4 {
  display: none; }

#field-condition .panel {
  box-shadow: none;
  margin-top: 1em;
  border-top: 1px solid #E0E0E0;
  padding-top: 1em; }
  #field-condition .panel .panel-body {
    padding: 0; }

#process-field-footer #footer-copyright {
  display: none; }

/* 
Component: Form

This is a form component based on the [IW JS API Form Object](https://insight.innovativewayinc.com/development/languages/javascript/iw-sitemaker-api/form/).

<span class="text-highlight">Forms are HTML fields that need a `Submit` button to trigger the action.</span> Singular HTML fields that do not need a `Submit` button to trigger the action are NOT forms and are not governed by the form styles guide, ex: [React Select](section-componentreactselect.html).

### Standard UX
- <span class="text-highlight">Note, the HTML and CSS is auto-generated by FormDesign, so do NOT recreate it.</span>
- There can be only 1 button named `Submit`, unless otherwise specified
- Buttons should be styled with `btn-primary` with the standard Bootstrap size, unless otherwise specified
- Form fields must be left-aligned, without any padding

### Component
- [`Button`](section-elementbuttons.html)

Markup: form.hbs

Weight: 100

Styleguide ComponentForm
*/
/* 
Field: Select

`SELECT` fields should have `fix-width` (not full-width) applied unless the field is 3-column width or less, ex: `<select class="form-control fix-width"></select>`

### Standard UX

- `SELECT` fields should have the placeholder text `Select ...`
- `SELECT` fields that are required <strong><em>and</em></strong> that will <Strong><em>always</em></strong> have `1` option should be the following:
	- `READONLY`
	- Not have the placeholder text
	- The only option should be pre-selected

Markup: form-select.hbs

Styleguide ComponentForm.FieldSelect
*/
/* 
Field: TextArea

`TEXTAREA` fields should have `js-tinymce` applied to turn it into a TinyMCE GUI editor, ex: `<textarea class="form-control js-tinymce" data-preset-config="customvariable" cols="80" rows="10"></textarea>`

Markup: form-textarea.hbs

Styleguide ComponentForm.FieldTextArea
*/
/* 
Required Fields

Required fields are notated with an `*` before the field name. If a field is required, it must have the `*` even if the field is pre-populated.

Markup: form-required.hbs

Styleguide ComponentForm.RequiredFields
*/
/* 
Fields w/ Placeholder Text

This uses the `placeholder` HTML attribute, which you can define via FormDesign.

<span class="text-highlight">Note, this only applies to forms.</span> HTML fields that are not part of a form are not covered by this.

### Standard UX
- Placeholder text only applies to: `TEXT` and `SELECT` fields

### Standard Verbiage

- For `TEXT` fields, only use "Type ..."
- For `SELECT` fields, only use "Select ..."

Markup: form-placeholdertext.hbs

Styleguide ComponentForm.PlaceholderText
*/
/* 
Fields w/ Help Text

Help text can contain plain text or HTML.

Markup: form-helptext.hbs

Styleguide ComponentForm.HelpText
*/
/* 
Layouts

Field layouts follow the Bootstrap Grid. Bootstrap uses a 12-column grid. 

Minimum widths:
- In general, fields should have a minimum width of 3 columns. 
- Fields for dates (ex: datepicker), numbers, dropdowns, radio buttons, or checkboxes can have a minimum width of 2 columns.
- <span class="text-highlight">Dependent fields should only shift other fields VERTICALLY</span>&mdash;they should NOT shift other fields horizontally

Markup: form-layouts.hbs

Styleguide ComponentForm.Layouts
*/
/* 
Validation Errors

Markup: form-error.hbs

Styleguide ComponentForm.ValidationErrors
*/
/* 
Kitchen Sink

### Component
- [`Button`](section-elementbuttons.html)

Markup: form-kitchensink.hbs

Weight: 100

Styleguide ComponentForm.KitchenSink
*/
form .pin.pin-warning {
  display: none; }

form div[data-expandcollapse="1"] {
  padding-left: 0px;
  margin-bottom: 12px; }

form div.control-group {
  position: relative; }

form p.label-text {
  margin-bottom: 1em; }

form fieldset {
  position: relative; }
  form fieldset h3 small {
    padding-left: 5px;
    font-size: 0.9rem; }
  form fieldset .fieldset-fields {
    position: relative; }
  form fieldset[data-is-valid="1"] .fieldset-heading h3 small:before {
    font-family: "FontAwesome";
    content: "\f046";
    color: #388E3C;
    margin-right: 5px;
    font-size: 1rem; }
  form fieldset[data-field-count="0"] .fieldset-heading h3 small {
    display: none; }

form h3 {
  padding-top: 0.75em; }

form .panel-actions {
  float: none;
  margin-bottom: 0;
  position: absolute;
  right: 0;
  top: -2em; }
  form .panel-actions .formexpand:before {
    font-family: "FontAwesome";
    content: "\f103";
    padding: 0 0.2em; }
  form .panel-actions .formcollapse:before {
    font-family: "FontAwesome";
    content: "\f102";
    padding: 0 0.2em; }
  form .panel-actions.stage-actions {
    top: unset !important;
    bottom: 0;
    z-index: 1; }

form .accordion-toggle h3 {
  color: #424242; }
  form .accordion-toggle h3:before {
    font-family: "FontAwesome";
    content: "\f106";
    padding: 0 0.2em 0 0; }

form .accordion-toggle.collapsed h3 {
  color: #424242; }
  form .accordion-toggle.collapsed h3:before {
    font-family: "FontAwesome";
    content: "\f107";
    padding: 0 0.2em; }

form #formerror {
  display: none; }
  form #formerror h4 i:first-child {
    display: none; }

form .control-group .formrequired {
  display: none; }
  form .control-group .formrequired + label:before {
    color: #D32F2F; }
  form .control-group .formrequired + span:before {
    color: #D32F2F; }

form .control-group .formnonrequired {
  display: none; }
  form .control-group .formnonrequired + label + input[type="text"],
  form .control-group .formnonrequired + label + input[type="url"] {
    border-style: dashed; }

form .control-group .fieldprompt-category {
  display: none; }

form .form-control.form-signature {
  font-family: 'Over the Rainbow', cursive;
  font-size: 2em; }

form .form-control.is-invalid {
  animation-name: none;
  /*
			animation-name: shake;
			animation-duration: 3s;
			animation-iteration-count: infinite;
			&:focus
			{
				animation-iteration-count: 0;
			}
			*/ }

form .form-control .fieldprompt-category {
  display: none; }

form .fdcheckboxlabel:has(input[type='checkbox'].form-switch):before {
  font-family: "FontAwesome";
  content: "\f204";
  color: #9E9E9E;
  margin-left: 5px; }

form .fdcheckboxlabel:has(input[type='checkbox'].form-switch):checked:before {
  font-family: "FontAwesome";
  content: "\f205";
  color: #388E3C;
  margin-left: 5px; }

form .formlistgrid tbody tr td {
  padding: 0;
  border-top-width: 0px; }

form .formlistgrid label.fdcheckboxlabel.disabled,
form .formlistgrid label.fdradiolabel.disabled {
  pointer-events: none;
  opacity: 0.5; }

form .formlistgrid[data-is-system="1"][data-dropdown="9"] {
  margin-bottom: 1.5rem;
  /* SMFD - No/Yes (numeric) */ }
  form .formlistgrid[data-is-system="1"][data-dropdown="9"] td label {
    font-size: 0;
    position: absolute; }
    form .formlistgrid[data-is-system="1"][data-dropdown="9"] td label input {
      display: none; }
    form .formlistgrid[data-is-system="1"][data-dropdown="9"] td label:before {
      font-family: "FontAwesome";
      font-size: 1.5rem;
      z-index: 2;
      color: #3F51B5; }
      form .formlistgrid[data-is-system="1"][data-dropdown="9"] td label:before[data-is-checked="0"] {
        z-index: 2; }
      form .formlistgrid[data-is-system="1"][data-dropdown="9"] td label:before[data-is-checked="1"] {
        z-index: 1; }
    form .formlistgrid[data-is-system="1"][data-dropdown="9"] td label:hover {
      background-color: inherit; }
    form .formlistgrid[data-is-system="1"][data-dropdown="9"] td label[data-value="1"]:before {
      content: "\f204"; }
    form .formlistgrid[data-is-system="1"][data-dropdown="9"] td label[data-value="0"]:before {
      content: "\f205"; }
  form .formlistgrid[data-is-system="1"][data-dropdown="9"] td.highlight {
    background-color: inherit; }
    form .formlistgrid[data-is-system="1"][data-dropdown="9"] td.highlight label {
      display: none; }
  form .formlistgrid[data-is-system="1"][data-dropdown="9"] td.input-readonly label {
    pointer-events: none;
    cursor: not-allowed; }
  form .formlistgrid[data-is-system="1"][data-dropdown="9"] td.pad15 {
    padding-right: 0; }
  form .formlistgrid[data-is-system="1"][data-dropdown="9"]:not(.has-highlight) label[data-value="0"] {
    display: none; }

form .form-actions {
  margin-top: 2em;
  position: relative; }

form[data-is-submitting="1"] .form-actions input[type=submit] {
  pointer-events: none;
  color: #9E9E9E;
  background-color: #E0E0E0;
  border-color: #E0E0E0; }

form[data-is-mutation="1"] .form-actions:before {
  font-family: "FontAwesome";
  content: "\f110";
  animation: fa-spin 2s infinite linear;
  display: inline-block;
  position: absolute;
  top: 0.5em;
  left: 10px;
  color: #424242; }

form[data-is-mutation="1"] .form-actions input[type=submit] {
  padding-left: 32px;
  pointer-events: none;
  color: #9E9E9E;
  background-color: #E0E0E0;
  border-color: #E0E0E0; }

form .form-control[disabled],
form .form-control[readonly] {
  pointer-events: none; }

form .label-text p {
  margin-bottom: 1rem; }
  form .label-text p:empty {
    display: none; }
  form .label-text p > img {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-top: 5px solid #E0E0E0;
    border-top-color: #E0E0E0;
    border-top-color: #000000;
    display: block;
    border-radius: 1rem;
    margin: auto;
    padding: 1rem; }

form .label-text pre.code {
  border-radius: 1.5rem;
  padding: 0.75rem 1.25rem; }
  form .label-text pre.code code {
    color: #E91E63;
    background-color: #fef6f9; }

form#ajax-formdesign > [id$="-header"].control-group {
  margin-bottom: 0; }

.form-entries .section-heading-entries {
  padding-top: 0.75em; }

.form-entries .fieldprompt-category[data-value="mask"] .fieldprompt-category-label {
  display: none; }

.form-entries .fieldprompt-category[data-value="mask"]:before {
  content: "🔓 ";
  display: inline; }

.form-entries .fieldprompt-category[data-value="category"] .fieldprompt-category-label {
  display: none; }

.icon-list form .validationerrors .validationerroritem {
  float: none;
  margin: 0;
  font-size: 1em; }

.icon-list form li:before {
  display: none; }

#ajax-formdesign-create-ask {
  position: relative; }
  #ajax-formdesign-create-ask .panel-actions {
    float: none;
    margin-bottom: 0;
    position: absolute;
    right: 0;
    top: -2em; }

.panel .panel-body form .control-group[data-fft-type="api"] {
  display: none; }

#content[data-isdevonly="1"] .panel .panel-body form .control-group[data-fft-type="api"] {
  display: block !important; }
  #content[data-isdevonly="1"] .panel .panel-body form .control-group[data-fft-type="api"] label {
    color: #FF9800; }
    #content[data-isdevonly="1"] .panel .panel-body form .control-group[data-fft-type="api"] label:before {
      font-family: "FontAwesome";
      content: "\f0ad";
      margin-right: 5px; }
  #content[data-isdevonly="1"] .panel .panel-body form .control-group[data-fft-type="api"] .form-control {
    border-color: #F57C00;
    display: block !important; }

body.dark form .form-control {
  color: #E0E0E0;
  background-color: #424242;
  border-color: #616161; }
  body.dark form .form-control::placeholder {
    color: #9E9E9E; }

body.external-form #mainbody:before {
  content: " ";
  height: 75%;
  width: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

body.external-form #contentwrapper {
  margin-left: 0;
  margin-top: 0;
  padding-top: 0; }
  body.external-form #contentwrapper #content {
    margin: 0;
    padding-top: 1em; }
    body.external-form #contentwrapper #content .flownote-only {
      display: none; }
    body.external-form #contentwrapper #content #caf-external form .pin.pin-warning {
      display: none; }
    body.external-form #contentwrapper #content #caf-external .external-frame[data-is-anonymous="1"] .form-container [id^="fd-"][id$="-form"] > .row {
      display: none; }
    body.external-form #contentwrapper #content #caf-external .external-frame[data-is-anonymous="1"] .caf-required {
      display: none; }
      body.external-form #contentwrapper #content #caf-external .external-frame[data-is-anonymous="1"] .caf-required + hr {
        display: none; }
    body.external-form #contentwrapper #content #caf-external .panel-body[data-is-draft="1"] form .form-save-actions:after {
      content: "Note: This form, flow, and subsequent steps are in DRAFT and may be subject to change.";
      font-size: 0.8em;
      margin-top: 0.5em;
      display: block;
      font-weight: normal;
      background-color: #FFF3E0; }
    body.external-form #contentwrapper #content #caf-external .panel-body[data-is-readonly="1"] .form-title .fa-question-circle {
      display: none; }
    body.external-form #contentwrapper #content #caf-external .panel-body p > iframe {
      display: block;
      margin: auto;
      background-color: #ffffff;
      padding: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
      body.external-form #contentwrapper #content #caf-external .panel-body p > iframe[src*="vimeo.com"], body.external-form #contentwrapper #content #caf-external .panel-body p > iframe[src*="youtube.com"], body.external-form #contentwrapper #content #caf-external .panel-body p > iframe[src*="youtube-nocookie.com"] {
        position: relative !important;
        width: 40vw !important;
        height: calc((40vw) * 9 / 16) !important;
        border-radius: 1rem; }
    body.external-form #contentwrapper #content #step-external form .pin.pin-warning {
      display: block; }
    body.external-form #contentwrapper #content .panel-default .panel-body .process-header {
      position: relative; }
    body.external-form #contentwrapper #content .panel-default .panel-body .form-title {
      margin-top: 0; }
    body.external-form #contentwrapper #content .panel-default .panel-body #logo-account-wrapper {
      float: right;
      margin-left: 3em;
      margin-bottom: 2rem;
      padding: 4px;
      background-color: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      border-radius: 1rem; }
      body.external-form #contentwrapper #content .panel-default .panel-body #logo-account-wrapper #logo-account {
        text-align: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top right;
        margin-bottom: 0; }
        body.external-form #contentwrapper #content .panel-default .panel-body #logo-account-wrapper #logo-account a[href=''] {
          pointer-events: none; }
        body.external-form #contentwrapper #content .panel-default .panel-body #logo-account-wrapper #logo-account img {
          width: 64px;
          height: 64px;
          background-color: transparent;
          margin: 0;
          box-shadow: none; }
    body.external-form #contentwrapper #content .panel-default .panel-body .clearfix {
      height: auto; }
    body.external-form #contentwrapper #content .panel-default .panel-body .form-fields {
      margin-left: 0px; }
    body.external-form #contentwrapper #content .panel-default .panel-body form#ajax-formdesign-external-step-owner .pin.pin-warning {
      display: none; }
    body.external-form #contentwrapper #content .panel-default .panel-body form h3 {
      font-size: 1.3rem; }
    body.external-form #contentwrapper #content .panel-default .panel-body form h4 {
      font-size: 0.9rem;
      margin-bottom: 1.25rem;
      border-top: 1px solid #E0E0E0;
      border-top-style: dashed;
      padding-top: 0.5rem;
      text-transform: uppercase;
      color: #9E9E9E; }
    body.external-form #contentwrapper #content .panel-default .panel-body form #fb_item_contact_first_name ~ .help-inline .fieldformat {
      display: none; }
    body.external-form #contentwrapper #content .panel-default .panel-body form #fb_item_contact_last_name ~ .help-inline .fieldformat {
      display: none; }
    body.external-form #contentwrapper #content .panel-default .panel-body form #fb_item_contact_email ~ .help-inline .fieldformat {
      display: none; }
    body.external-form #contentwrapper #content .panel-default .panel-body form #fb_item_request_name ~ .help-inline .fieldformat {
      display: none; }
    body.external-form #contentwrapper #content .panel-default .panel-body form fieldset h3 {
      font-weight: normal; }
    body.external-form #contentwrapper #content .panel-default .panel-body form fieldset a.btn[value="Next"] {
      animation-fill-mode: both;
      animation-duration: 8s;
      animation-name: shake;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out; }
    body.external-form #contentwrapper #content .panel-default .panel-body form fieldset[data-is-valid="0"]:not([data-field-count="0"]) .fieldset-heading {
      position: relative;
      /*
                                        &:before
                                        {
                                            content: "\f178";
                                            font-family: 'FontAwesome';
                                            position: absolute;
                                            animation-name: shake;
                                            animation-duration: 16s;
                                            animation-iteration-count: infinite;
                                            left: -1.7em;
                                            top: 0.9em;
                                            font-size: 1.25em;
                                            color: $alert-base-link-danger;
                                        }
                                        */ }
    body.external-form #contentwrapper #content .panel-default .panel-body form fieldset[data-is-valid="1"]:not([data-field-count="0"]) .fieldset-heading {
      position: relative; }
      body.external-form #contentwrapper #content .panel-default .panel-body form fieldset[data-is-valid="1"]:not([data-field-count="0"]) .fieldset-heading .fieldset-summary:before {
        display: none; }
      body.external-form #contentwrapper #content .panel-default .panel-body form fieldset[data-is-valid="1"]:not([data-field-count="0"]) .fieldset-heading .fieldset-summary:after {
        content: "\f046";
        font-family: 'FontAwesome';
        font-size: 1.3em;
        margin-left: 5px;
        color: #255827; }
    body.external-form #contentwrapper #content .panel-default .panel-body .cta {
      margin-top: 3rem; }
  body.external-form #contentwrapper #step-external #content #request-view-step-tile .step {
    padding: 0; }

body.external-form #footerwrapper {
  margin-left: 0px;
  background-color: inherit; }

body.external-form.branded #contentwrapper #content .panel-default:before {
  content: " ";
  height: 150px;
  width: 100%;
  display: block;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem; }

body.external-form.branded #contentwrapper #content .panel .panel-body #logo-account-wrapper {
  float: none;
  right: 0;
  position: absolute !important;
  display: inline-block;
  margin-left: 0;
  position: relative;
  top: -85px;
  margin-bottom: 1rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  body.external-form.branded #contentwrapper #content .panel .panel-body #logo-account-wrapper #logo-account {
    background-position: top center; }
    body.external-form.branded #contentwrapper #content .panel .panel-body #logo-account-wrapper #logo-account img {
      width: 88px;
      height: 88px; }

body.external-form.branded #contentwrapper #content .panel .panel-body .steps-header .clearfix {
  height: 0; }

body.external-form.whitelabel #contentwrapper #content #external-marketing {
  background-color: transparent;
  background-image: none; }
  body.external-form.whitelabel #contentwrapper #content #external-marketing p {
    display: none; }

body.external-form.whitelabel #footerwrapper {
  display: none; }

@media (max-width: 767px) {
  body.external-form {
    background-color: #ffffff; }
    body.external-form #contentwrapper {
      padding: 0; }
      body.external-form #contentwrapper #content {
        margin-top: 0;
        padding-top: 0;
        padding-right: 0;
        padding-left: 0; }
        body.external-form #contentwrapper #content #request-view-step-tile > .panel {
          box-shadow: none; }
        body.external-form #contentwrapper #content .panel .panel-body .steps-header .clearfix {
          height: 0; }
        body.external-form #contentwrapper #content .panel .panel-body form .form-actions input.btn-primary[name='submit_action'] {
          display: block;
          text-align: left;
          margin-bottom: 1em;
          margin-right: 0 !important;
          width: 100%;
          animation-fill-mode: both;
          animation-duration: 8s;
          animation-name: shake;
          animation-iteration-count: infinite;
          animation-timing-function: ease-in-out; }
        body.external-form #contentwrapper #content .panel .panel-body p > iframe[src*="vimeo.com"], body.external-form #contentwrapper #content .panel .panel-body p > iframe[src*="youtube.com"], body.external-form #contentwrapper #content .panel .panel-body p > iframe[src*="youtube-nocookie.com"] {
          width: 100% !important;
          height: auto !important; }
        body.external-form #contentwrapper #content #caf-external .panel .panel-body p > iframe[src*="vimeo.com"], body.external-form #contentwrapper #content #caf-external .panel .panel-body p > iframe[src*="youtube.com"], body.external-form #contentwrapper #content #caf-external .panel .panel-body p > iframe[src*="youtube-nocookie.com"] {
          width: 100% !important;
          height: auto !important; }
    body.external-form.branded #contentwrapper #content .panel .panel-body #logo-account-wrapper {
      float: right;
      display: block;
      margin-left: 0;
      position: relative;
      top: -55px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
      body.external-form.branded #contentwrapper #content .panel .panel-body #logo-account-wrapper #logo-account {
        background-position: top center; }
        body.external-form.branded #contentwrapper #content .panel .panel-body #logo-account-wrapper #logo-account img {
          width: 64px;
          height: 64px; }
    body.external-form.whitelabel #contentwrapper #content {
      padding-bottom: 0; }
    body.external-form.whitelabel #footerwrapper {
      display: none; } }

/* 
Element: KPIs

Styleguide ElementKPIs
*/
/* 
Circle

This is a KPI Circleelement.

Markup:
<div class="panel panel-kpi kpi-circle {{modifier_class}}">                  
    <div class="panel-heading">KPI Name</div>                    
    <div class="panel-body">
        <div class="kpi">
            <a href="">999</a>
        </div>
    </div>
    <div class="panel-footer">
        KPI description
    </div>                    
</div>

.panel-primary		- &nbsp;
.panel-secondary	- &nbsp;
.panel-info			- &nbsp;
.panel-warning		- &nbsp;
.panel-danger		- &nbsp;
.panel-success		- &nbsp;
.panel-inverse		- &nbsp;
.panel-light		- &nbsp;
.panel-dark			- &nbsp;

Styleguide ElementKPIs.Circle
*/
.panel.panel-kpi.kpi-circle {
  text-align: center;
  box-shadow: none;
  background-color: transparent; }
  .panel.panel-kpi.kpi-circle .panel-heading {
    border-width: 0;
    font-size: 1.3em;
    background-color: transparent;
    padding: 0;
    min-height: 40px;
    position: relative; }
    .panel.panel-kpi.kpi-circle .panel-heading span {
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%; }
  .panel.panel-kpi.kpi-circle .panel-body {
    font-size: 2em;
    padding-bottom: 1.25rem;
    background: transparent; }
    .panel.panel-kpi.kpi-circle .panel-body .kpi {
      height: 96px;
      width: 96px;
      margin: auto;
      border-radius: 1rem;
      color: #FFFFFF;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      background-color: #ffffff; }
      .panel.panel-kpi.kpi-circle .panel-body .kpi a {
        color: #FFFFFF !important;
        display: block;
        height: 90px;
        width: 96px;
        padding: 1.15em 0 1.25em 0; }
        .panel.panel-kpi.kpi-circle .panel-body .kpi a i.fa {
          color: #9E9E9E !important; }
  .panel.panel-kpi.kpi-circle .panel-footer {
    background-color: transparent;
    border-width: 0;
    color: #9E9E9E;
    padding: 0; }
  .panel.panel-kpi.kpi-circle.panel-warning .panel-body .kpi {
    border-top: 5px solid #FB8C00;
    background-color: #FFA726; }
  .panel.panel-kpi.kpi-circle.panel-success .panel-body .kpi {
    border-top: 5px solid #43A047;
    background-color: #66BB6A; }
  .panel.panel-kpi.kpi-circle.panel-danger .panel-body .kpi {
    border-top: 5px solid #E53935;
    background-color: #EF5350; }
  .panel.panel-kpi.kpi-circle.panel-info .panel-body .kpi {
    border-top: 5px solid #1E88E5; }
  .panel.panel-kpi.kpi-circle.panel-primary .panel-body .kpi {
    border-top: 5px solid #3F51B5;
    background-color: #5C6BC0; }
  .panel.panel-kpi.kpi-circle.panel-inverse .panel-heading {
    color: #424242; }
  .panel.panel-kpi.kpi-circle.panel-inverse .panel-body .kpi {
    background-color: #212121; }
  .panel.panel-kpi.kpi-circle.panel-light .panel-body .kpi {
    border-top: 5px solid #BDBDBD; }
  .panel.panel-kpi.kpi-circle.panel-dark .panel-body .kpi {
    border-top: 5px solid #616161;
    background-color: #757575; }
  .panel.panel-kpi.kpi-circle.panel-default .panel-body .kpi {
    border-top: 5px solid #3F51B5; }
  .panel.panel-kpi.kpi-circle.panel-secondary .panel-body .kpi {
    border-top: 5px solid #BDBDBD; }

.panel.panel-kpi:hover .panel-body .kpi {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }

.kpi-bar {
  height: 20px;
  position: absolute;
  background-color: #9FA8DA;
  width: 50%;
  top: 50%;
  left: 20%; }

@media (max-width: 767.98px) {
  .panel.panel-kpi.kpi-circle .panel-body {
    padding: 0 !important;
    font-size: 1.5em; }
    .panel.panel-kpi.kpi-circle .panel-body .kpi {
      height: 48px;
      width: 100%;
      border-radius: 0;
      text-align: center; }
      .panel.panel-kpi.kpi-circle .panel-body .kpi a {
        padding: 0.6em 0;
        width: initial;
        height: initial; } }

/* 
App

Application labels by applying the `app` CSS class. React [`<LabelApp>`](https://uat.pipelineapp.io/app/pattern-library/elements#labelapp)

Markup:
<span class="label app {{modifier_class}}"></span>

.label-note			- &nbsp;
.label-new			- &nbsp;
.label-owner		- &nbsp;
.label-member		- &nbsp;
.label-unassigned	- &nbsp;
.label-completed	- &nbsp;
.label-canceled		- &nbsp;
.label-live			- &nbsp;
.label-deactive		- &nbsp;
.label-draft		- &nbsp;

Styleguide ElementLabels.App
*/
/* 
Kitchen Sink

Markup: label-kitchensink.hbs

Styleguide ElementLabels.KitchenSink
*/
.label {
  padding: 0.1em 0.7em 0.2em;
  border-radius: 1em;
  font-weight: bold;
  position: relative;
  font-size: 75%;
  margin-left: 5px;
  font-style: normal; }
  .label.app:before {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    padding-left: 0.6em;
    padding-right: 0.6em;
    position: relative;
    top: -1px;
    border-radius: 10rem;
    font-size: 0.68rem; }
  .label.app.label-owner:before {
    color: #FFFFFF;
    background-color: #1E88E5;
    content: "Owner"; }
  .label.app.label-stepowner:before {
    color: #FFFFFF;
    background-color: #1E88E5;
    content: "Step Owner"; }
  .label.app.label-member:before {
    color: #FFFFFF;
    background-color: #1E88E5;
    content: "Member"; }
  .label.app.label-new:before {
    color: #FFFFFF;
    background-color: #FB8C00;
    content: "New"; }
  .label.app.label-delayed:before {
    color: #FFFFFF;
    background-color: #FB8C00;
    content: "Delayed"; }
  .label.app.label-external:before {
    color: #FFFFFF;
    background-color: #FB8C00;
    content: "External"; }
  .label.app.label-externalFacing:before {
    color: #FFFFFF;
    background-color: #1E88E5;
    content: "External-Facing"; }
  .label.app.label-delayedRequest:before {
    color: #FFFFFF;
    background-color: #FB8C00;
    border-color: #FFCC80;
    font-size: 120% !important;
    content: "Delayed"; }
  .label.app.label-steponhold:before {
    color: #FFFFFF;
    background-color: #FB8C00;
    content: "On-Hold"; }
  .label.app.label-pastDue:before {
    color: #FFFFFF;
    background-color: #E53935;
    content: "Past Due"; }
  .label.app.label-unassigned:before {
    color: #FFFFFF;
    background-color: #E53935;
    content: "Unassigned"; }
  .label.app.label-open:before {
    color: #FFFFFF;
    background-color: #E53935;
    content: "Open"; }
  .label.app.label-completed:before {
    color: #FFFFFF;
    background-color: #43A047;
    content: "Completed"; }
  .label.app.label-canceled:before {
    color: #FFFFFF;
    background-color: #616161;
    content: "Canceled"; }
  .label.app.label-deactive:before {
    color: #FFFFFF;
    background-color: #616161;
    content: "Deactivated"; }
  .label.app.label-live:before {
    color: #FFFFFF;
    background-color: #43A047;
    content: "Live"; }
  .label.app.label-draft:before {
    color: #FFFFFF;
    background-color: #1E88E5;
    content: "Draft"; }
  .label.label-xl {
    font-size: 150%; }
  .label.label-lg {
    font-size: 125%; }
  .label.label-md {
    font-size: 100%; }
  .label.label-sm {
    font-size: 75%; }
  .label.label-xs {
    font-size: 50%; }
  .label.label-version {
    color: #9E9E9E;
    background-color: transparent;
    font-size: 100%;
    font-style: italic;
    padding: 0em 0.6em 0em;
    margin: 0 2px;
    font-weight: bold; }
    .label.label-version.draft {
      color: #2196F3; }
    .label.label-version.live {
      color: #4CAF50; }
    .label.label-version.deactive {
      color: #9E9E9E; }
    .label.label-version:before {
      content: "v"; }
  .label.label-recurring {
    color: #9E9E9E;
    background-color: transparent;
    font-size: 100%;
    font-style: italic;
    padding: 0em 0.6em 0em;
    margin: 0 2px;
    top: 0em;
    font-weight: bold; }
  .label.label-date-range {
    color: #9E9E9E;
    background-color: transparent;
    font-size: 70%;
    font-style: italic;
    font-family: "Open Sans", sans-serif;
    padding: 0em 0.6em 0em 1em;
    margin: 0 2px;
    top: -0.12em; }

ul.dropdown-menu li .label.app::before {
  font-size: 1em; }

table tr td.grey-panel .label.app::before, table tr td.child .label.app::before {
  font-size: 0.82em; }

/* 
Element: Links (Action)

Action links are links that users click on to execute an action. The following are standard action links for `add`, `update`, `delete` actions

### Standard Icons

Action links use icons from [Font Awesome v4](https://fontawesome.com/v4.7.0/icons/).

Spacing between the icon and the text is a space, ex: `<i class="fa fa-plus-circle"></i> Create XXXX`.

### Standard Verbiage

- For `add` actions, use "Create ..."
- For `update` actions, use "Update ..."
- For `delete` actions, use "Delete ..."
- For `preview` actions, use "Preview ..."

### Standard UX

- Action links always have an icon
- Action links do NOT appear in a sentence

Markup:
<p><a href=""><i class="fa fa-plus-circle"></i> Create XXXX</a></p>
<hr />
<p><a href=""><i class="fa fa-times-circle"></i> Delete XXXX</a></p>
<hr />
<p><a href=""><i class="fa fa-eye"></i> Preview XXXX</a></p>
<hr />
<p><a href=""><i class="fa fa-pencil-square-o"></i> Update XXXX</a></p>

Styleguide ElementLinksAction
*/
/* 
Expand/Collapse

Expand/collapse are action links that toggle the size of a container. We follow the standard from [Google Material Design](https://material.io/components/lists/#types).

### Standard Icons

Expand/Collapse action links use icons from [Font Awesome v4](https://fontawesome.com/v4.7.0/icons/).

Markup:
<p><a href=""><i class="fa fa-angle-down"></i> Expand</a><br /><a href=""><i class="fa fa-angle-up"></i> Collapse</a></p>
<hr />
<p><a href=""><i class="fa fa-angle-double-down"></i> Expand All</a><br /><a href=""><i class="fa fa-angle-double-up"></i> Collapse All</a></p>

Styleguide ElementLinksAction.ExpandCollapse
*/
/* 
Other

Other action links may be necessary, ex: `View Analytics`, `Send Email`, etc. See below for examples of such action links.

### Standard Icons

Action links use icons from [Font Awesome v4](https://fontawesome.com/v4.7.0/icons/).

### Standard Verbiage

- The link name should start with a verb

Markup:
<p><a href=""><i class="fa fa-envelope"></i> Send Email</a></p>
<hr />
<p><a href=""><i class="fa fa-bar-chart-o"></i> View Analytics</a></p>
<hr />
<p><a href=""><i class="fa fa-user-circle"></i> View User</a></p>
<hr />
<p><a href=""><i class="fa fa-chevron-up"></i> Back to top</a></p>

Styleguide ElementLinksAction.Other
*/
/* 
Toggle

Toggles are action links that toggle the state of a setting. We follow the standard from [Google Material Design](https://material.io/components/selection-controls/#switches).

If you need additional verbiage or instructions, use a [tooltip](section-elementtooltip.html).

### Standard Icons

Toggle action links use icons from [Font Awesome v4](https://fontawesome.com/v4.7.0/icons/).

### Standard Verbiage

- Per Google Material Design, the link name should describe a setting and typically should start with a noun, ex: External-Facing
- The link name should NOT describe an action, ex: Make External-Facting
- Per Google Material Design, do not use "on" or "off" in the link name or change the name of the link based on state. The toggle indicator will indicate state.
- Do not start the label with a verb, unless it is part of a noun, ex: Opt-out

Markup:
<p><a href=""><i class="fa fa-toggle-on"></i> External-facing</a><br /><a href=""><i class="fa fa-toggle-off"></i> External-facing</a></p>
<hr />
<p><a href="" data-placement="right" data-toggle="tooltip" title="Lorem ipsum dolor sit amet"><i class="fa fa-toggle-on"></i> Opt-out (w/ tooltip)</a><br /><a href="" data-placement="right" data-toggle="tooltip" title="Lorem ipsum dolor sit amet"><i class="fa fa-toggle-off"></i> Opt-out (w/ tooltip)</a></p>

Styleguide ElementLinksAction.Toggle
*/
a {
  text-decoration: none !important;
  color: #3F51B5;
  cursor: pointer; }
  a:hover, a:active {
    color: #606fc7; }
  a.always-active {
    color: #3F51B5 !important; }
  a code {
    /* note the space */
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px; }
  a[href*="vimeo.com"]:before, a[href*="youtube.com"]:before, a[href*="youtube-nocookie.com"]:before {
    font-family: "FontAwesome";
    content: "\f144";
    margin-right: 5px; }

body.dark a {
  color: #8C9EFF; }

.license-team + #app-react #workflow-rules > .panel .panel-body:before {
  content: "This feature is only available for Professional or Enterprise plans. Upgrade your plan to use this feature.";
  display: block;
  font-weight: bold;
  border: 1px solid #FFB74D;
  background-color: #FFCC80;
  border-color: #FFB74D;
  color: #955300;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.license-team + #app-react #workflow-rules > .panel .panel-body .panel-actions a {
  color: #9E9E9E !important;
  pointer-events: none; }

.license-team + #app-react #workflow-due-dates > .panel .panel-body:before {
  content: "This feature is only available for Professional or Enterprise plans. Upgrade your plan to use this feature.";
  display: block;
  font-weight: bold;
  border: 1px solid #FFB74D;
  background-color: #FFCC80;
  border-color: #FFB74D;
  color: #955300;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.license-team + #app-react #workflow-due-dates > .panel .panel-body .panel-actions a {
  color: #9E9E9E !important;
  pointer-events: none; }

.license-team + #app-react #workflow-due-dates > .panel .panel-body > .alert.alert-warning {
  display: none; }

.license-team + #app-react #marketplace-templates:before {
  content: "This feature is only available for Professional or Enterprise plans. Upgrade your plan to use this feature.";
  display: block;
  font-weight: bold;
  border: 1px solid #FFB74D;
  background-color: #FFCC80;
  border-color: #FFB74D;
  color: #955300;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.license-team + #app-react #marketplace-templates .panel-actions span.text {
  pointer-events: none; }
  .license-team + #app-react #marketplace-templates .panel-actions span.text a.btn {
    color: #FFFFFF;
    background-color: #E0E0E0;
    border-color: #E0E0E0;
    pointer-events: none;
    box-shadow: none; }

.app-marketplace .row .col-md-6 .panel-template {
  width: 95%;
  margin-right: 5%;
  margin-bottom: 3em; }
  .app-marketplace .row .col-md-6 .panel-template .panel-heading .panel-userinfo {
    width: calc(100% - 130px); }
    .app-marketplace .row .col-md-6 .panel-template .panel-heading .panel-userinfo .user-name {
      vertical-align: top;
      width: calc(100% - 56px);
      display: inline-block; }
  .app-marketplace .row .col-md-6 .panel-template .panel-heading .panel-actions {
    margin-left: 20px; }
    .app-marketplace .row .col-md-6 .panel-template .panel-heading .panel-actions .tooltip {
      width: 120px; }
  .app-marketplace .row .col-md-6 .panel-template .panel-body {
    min-height: 13em; }

.app-marketplace .row .col-md-6:nth-child(2) .panel-template {
  margin-left: 5%;
  margin-right: 0; }

.offerings .media {
  margin: 2rem 0;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-radius: 1rem;
  border-top: 7px solid #E0E0E0;
  position: relative; }
  .offerings .media .ribbon.ribbon-top-right {
    top: -13px; }
    .offerings .media .ribbon.ribbon-top-right span {
      left: -20px; }
  .offerings .media > img {
    background-color: #ffffff;
    width: 40%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 1.5rem; }
  .offerings .media .media-body {
    padding: 0 1.75rem 0 1.25rem;
    position: relative; }
    .offerings .media .media-body h5 {
      margin-top: 0 !important;
      font-size: 1.7rem;
      font-weight: bold; }
    .offerings .media .media-body .price {
      font-weight: bold;
      font-size: 1.15rem;
      line-height: 1.5rem; }
      .offerings .media .media-body .price em {
        font-weight: normal;
        font-size: 85%; }
    .offerings .media .media-body .cta {
      margin: 0 !important; }
      .offerings .media .media-body .cta a {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        user-select: none;
        border-width: 1px;
        border-style: solid;
        padding: 0.375rem 0.75rem;
        font-size: 1em;
        line-height: 1.5;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        color: #FFFFFF !important;
        background-color: #43A047;
        border-color: #388E3C;
        pointer-events: initial; }
        .offerings .media .media-body .cta a:hover {
          background-color: #43A047;
          border-color: #388E3C;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .offerings .media:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    border-top-color: var(--primary); }
    .offerings .media:hover .media-body .cta a {
      animation-fill-mode: both;
      animation-duration: 6s;
      animation-name: shake;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out; }
      .offerings .media:hover .media-body .cta a:hover {
        animation-name: none; }

@media (max-width: 767px) {
  .offerings .media {
    display: block; }
    .offerings .media > img {
      width: 100%;
      margin-bottom: 1rem; }
    .offerings .media .media-body {
      padding: 0; } }

/* 
Add/Delete

Delete (Remove/Leave/etc.) modals are used as a double confirmation for any removal action.

### Verbiage
Follow the format and sentence structure in the examples below.

<div class="panel panel-default">
<div class="panel-body">
	<table class="table table-inverse">
	<thead>
	<tr><th>Title</th><th>Body</th><th>Button</th></tr>
	</thead>
	<tbody>
	<tr><td>Add Step</td><td>(form fields)</td><td>Add</td></tr>
	<tr><td>Update Step</td><td>(form fields)</td><td>Update</td></tr>
	<tr><td>Delete Bundle</td><td>Delete the ABC bundle (including all files and notes) permanently from the system?</td><td>Delete</td></tr>
	<tr><td>Delete Ask</td><td>Delete the ABC (including all files and notes) permanently from the system?</td><td>Delete</td></tr>
	<tr><td>Delete Step</td><td>Delete the ABC step permanently from the system?</td><td>Delete</td></tr>
	<tr><td>Delete Step Form</td><td>Delete the ABC step form permanently from the system?</td><td>Delete</td></tr>
	<tr><td>Delete Team</td><td>Delete the ABC team permanently from the system?</td><td>Delete</td></tr>
	<tr><td>Delete Flow</td><td>Delete ABC (including all associated Asks) permanently from the system?</td><td>Delete</td></tr>
	<tr><td>Remove Field</td><td>Remove the ABC field permanently from the system?</td><td>Remove</td></tr>
	<tr><td>Remove from Bundle</td><td>Remove the following requests from ABC bundle? Request Name A, Request Name B, Request Name C</td><td>Remove</td></tr>
	<tr><td>Leave Team</td><td>Remove you from the ABC team?</td><td>Remove</td></tr>
	<tr><td>Steps Legend</td><td>(step color dots)</td><td>N/A</td></tr>
	</tbody>
	</table>
</div>
</div>

Markup: modal-delete.hbs

Weight: 101

Styleguide ElementModals.Delete
*/
/* 
Yes/No

Yes/No modals are meant to present users with a choice.

Markup: modal-yesno.hbs

Weight: 101

Styleguide ElementModals.YesNO
*/
/* 
Form

Modals with a form should be medium size or larger: `modal-md`, `modal-lg`, `modal-xl`. The default is `modal-lg`. 

Note, [forms](section-componentform.html) must have a `Submit` button.

Markup: modal-form.hbs

Weight: 102

Styleguide ElementModals.Form
*/
/* 
React Select

Modals with a React Select should be medium size: `modal-md`. 

<span class="text-highlight">Note, [React Select](section-componentreactselect.html) should NOT have a `Submit` button because it is an Action Link.</span>

### Standard UX Behavior

- Modals with a React Select should close when React Select is triggered

Markup: modal-reactselect.hbs

Weight: 102

Styleguide ElementModals.ReactSelect
*/
.modal-container .modal-backdrop {
  opacity: .8; }

.modal-container .modal {
  width: 100vw;
  height: 100vh; }
  .modal-container .modal .modal-dialog .modal-content .modal-body form .pin {
    display: none !important; }
  .modal-container .modal .modal-dialog .modal-content .modal-footer .btn {
    margin-left: 10px; }
  .modal-container .modal .modal-dialog .modal-content.modal-yesno .modal-footer .btn-primary:before {
    content: "Yes"; }
  .modal-container .modal .modal-dialog .modal-content.modal-yesno .modal-footer .btn-secondary:before {
    content: "No"; }

@media (min-width: 1412px) {
  .modal-xl {
    width: 85%; } }

/* 
Component: LeftNav

Wrapper for Bootstrap Navbar

### Standard UX Behavior

- The nav should stay highlighted on all pages in the folder

Markup: leftnav.hbs

Weight: 100

Styleguide ComponentLeftNav
*/
/* 
Full Menu

<p class="text-highlight">DRAFT</p>

Markup: leftnav-fullmenu.hbs

Weight: 100

Styleguide ComponentLeftNav.FullMenu
*/
#mobilenav {
  display: none; }

#sidenav {
  border-right: 1px solid #E0E0E0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  background-color: #FFFFFF;
  border-width: 0px;
  border-left: 12px solid var(--primary); }
  #sidenav .navbar-brand {
    border-bottom: 1px solid #E0E0E0;
    padding: 18px 0;
    width: 100%;
    text-align: center; }
    #sidenav .navbar-brand img {
      margin: 0; }
    #sidenav .navbar-brand:before {
      content: "";
      display: inline-block;
      width: 48px;
      height: 48px;
      background-size: cover; }
    #sidenav .navbar-brand.navbar-brand-bottom {
      position: absolute;
      bottom: 0;
      border-bottom: none; }
      #sidenav .navbar-brand.navbar-brand-bottom:before {
        display: none; }
      #sidenav .navbar-brand.navbar-brand-bottom img {
        width: 40px; }
  #sidenav #sidenav-list .nav-item {
    width: 100px;
    margin: 14px 0 0 0;
    padding: 0;
    position: relative;
    font-size: 0.8rem; }
    #sidenav #sidenav-list .nav-item > a {
      color: #BDBDBD;
      display: block;
      padding: 1em 0em;
      line-height: 1em;
      text-align: center; }
      #sidenav #sidenav-list .nav-item > a > .fa {
        font-size: 2rem;
        margin-bottom: .2em;
        display: block; }
      #sidenav #sidenav-list .nav-item > a > span {
        display: block; }
    #sidenav #sidenav-list .nav-item:hover > a {
      color: #424242; }
      #sidenav #sidenav-list .nav-item:hover > a:after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        bottom: 0px;
        border: 8px solid transparent;
        border-left-width: 10px;
        border-left-style: solid;
        left: 0px;
        top: calc(50% - 14px); }
      #sidenav #sidenav-list .nav-item:hover > a:after {
        border-left-color: #BDBDBD; }
    #sidenav #sidenav-list .nav-item .dropdown-menu {
      top: 65%;
      margin-left: 100px;
      border-left-width: 0px;
      box-shadow: none;
      background-color: #FFFFFF;
      position: absolute;
      border-radius: 0;
      font-size: 0.9rem;
      min-width: 11rem;
      width: 200px; }
      #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item {
        padding-top: 1em;
        padding-bottom: 1em;
        color: #3F51B5;
        text-align: left;
        padding-left: 1rem;
        padding-right: 1rem; }
        #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item > .fa {
          font-size: inherit;
          display: inline; }
        #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item:hover {
          background-color: #FFFFFF; }
        #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item.side-nav-asks-my-todos, #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item.side-nav-asks-my-submitted, #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item.side-nav-asks-my-team-todos, #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item.side-nav-asks-my-team-unassigned, #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item.side-nav-asks-following, #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item.side-nav-asks-all {
          padding-top: 0.2rem;
          padding-bottom: 0.2rem; }
        #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item:hover {
          background-color: #ffffff; }
        #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item .badge.badge-pill {
          float: right;
          position: relative;
          top: 2px; }
      #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-header {
        font-size: 0.8rem;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-top: 0; }
      #sidenav #sidenav-list .nav-item .dropdown-menu.thin .dropdown-item {
        padding-top: .25em;
        padding-bottom: .25em; }
        #sidenav #sidenav-list .nav-item .dropdown-menu.thin .dropdown-item:hover {
          background-color: #F5F5F5; }

#main-content.app-requests #sidenav #sidenav-list #nav-requests {
  color: #424242; }
  #main-content.app-requests #sidenav #sidenav-list #nav-requests:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    bottom: 0px;
    border: 8px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    left: 0px;
    top: calc(50% - 14px); }
  #main-content.app-requests #sidenav #sidenav-list #nav-requests:after {
    border-left-color: var(--primary); }

#main-content.app-bundles #sidenav #sidenav-list #nav-bundle {
  color: #424242; }
  #main-content.app-bundles #sidenav #sidenav-list #nav-bundle:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    bottom: 0px;
    border: 8px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    left: 0px;
    top: calc(50% - 14px); }
  #main-content.app-bundles #sidenav #sidenav-list #nav-bundle:after {
    border-left-color: var(--primary); }

#main-content.app-workflows #sidenav #sidenav-list #nav-workflows {
  color: #424242; }
  #main-content.app-workflows #sidenav #sidenav-list #nav-workflows:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    bottom: 0px;
    border: 8px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    left: 0px;
    top: calc(50% - 14px); }
  #main-content.app-workflows #sidenav #sidenav-list #nav-workflows:after {
    border-left-color: var(--primary); }

#main-content.app-teams #sidenav #sidenav-list #nav-teams {
  color: #424242; }
  #main-content.app-teams #sidenav #sidenav-list #nav-teams:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    bottom: 0px;
    border: 8px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    left: 0px;
    top: calc(50% - 14px); }
  #main-content.app-teams #sidenav #sidenav-list #nav-teams:after {
    border-left-color: var(--primary); }

#main-content.app-marketplace #sidenav #sidenav-list #nav-marketplace {
  color: #424242; }
  #main-content.app-marketplace #sidenav #sidenav-list #nav-marketplace:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    bottom: 0px;
    border: 8px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    left: 0px;
    top: calc(50% - 14px); }
  #main-content.app-marketplace #sidenav #sidenav-list #nav-marketplace:after {
    border-left-color: var(--primary); }

#main-content.app-help #sidenav #sidenav-list #nav-help {
  color: #424242; }
  #main-content.app-help #sidenav #sidenav-list #nav-help:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    bottom: 0px;
    border: 8px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    left: 0px;
    top: calc(50% - 14px); }
  #main-content.app-help #sidenav #sidenav-list #nav-help:after {
    border-left-color: var(--primary); }

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5; }

body.dark #sidenav {
  background-color: #212121; }
  body.dark #sidenav .navbar-brand {
    border-color: #616161; }
  body.dark #sidenav #sidenav-list .nav-item > a {
    color: #757575; }
  body.dark #sidenav #sidenav-list .nav-item .dropdown-menu {
    background-color: #424242; }
    body.dark #sidenav #sidenav-list .nav-item .dropdown-menu .dropdown-item {
      color: #8C9EFF; }
  body.dark #sidenav #sidenav-list .nav-item:hover > a {
    color: #E0E0E0; }
    body.dark #sidenav #sidenav-list .nav-item:hover > a:after {
      position: absolute;
      content: '';
      width: 0px;
      height: 0px;
      bottom: 0px;
      border: 8px solid transparent;
      border-left-width: 10px;
      border-left-style: solid;
      left: 0px;
      top: calc(50% - 14px); }
    body.dark #sidenav #sidenav-list .nav-item:hover > a:after {
      border-left-color: #BDBDBD; }

body.dark #main-content.app-requests #sidenav #sidenav-list #nav-requests {
  color: #E0E0E0; }

body.dark #main-content.app-bundles #sidenav #sidenav-list #nav-bundle {
  color: #E0E0E0; }

body.dark #main-content.app-workflows #sidenav #sidenav-list #nav-workflows {
  color: #E0E0E0; }

body.dark #main-content.app-teams #sidenav #sidenav-list #nav-teams {
  color: #E0E0E0; }

body.dark #main-content.app-marketplace #sidenav #sidenav-list #nav-marketplace {
  color: #E0E0E0; }

body.dark #main-content.app-help #sidenav #sidenav-list #nav-help {
  color: #E0E0E0; }

#noty_bottomRight_layout_container, .noty_bottomRight_layout_container, #noty_bottomCenter_layout_container, .noty_bottomCenter_layout_container {
  width: 299px !important; }
  #noty_bottomRight_layout_container .alert,
  .noty_bottomRight_layout_container .alert,
  #noty_bottomCenter_layout_container .alert,
  .noty_bottomCenter_layout_container .alert {
    padding: 0;
    border-radius: 0.5rem;
    border-width: 0 0 0 7px;
    min-height: auto !important;
    width: 250px !important; }
    #noty_bottomRight_layout_container .alert .noty_bar .noty_message,
    .noty_bottomRight_layout_container .alert .noty_bar .noty_message,
    #noty_bottomCenter_layout_container .alert .noty_bar .noty_message,
    .noty_bottomCenter_layout_container .alert .noty_bar .noty_message {
      padding: 2rem 1rem 0 1rem !important; }
      #noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text .noty_datetime,
      .noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text .noty_datetime,
      #noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text .noty_datetime,
      .noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text .noty_datetime {
        position: absolute;
        top: -2px;
        right: 0;
        z-index: 1;
        color: #424242;
        padding: 0.5rem 0.7rem;
        font-size: 0.75em; }
      #noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text h4,
      .noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text h4,
      #noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text h4,
      .noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text h4 {
        position: absolute;
        padding: .5rem 0.7rem;
        color: #424242;
        font-size: 1em !important;
        width: 100%;
        top: 0;
        left: 0;
        background-color: transparent; }
      #noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text .noty_textcontent, .noty_bottomRight_layout_container .alert .noty_bar .noty_message .noty_text .noty_textcontent, #noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text .noty_textcontent, .noty_bottomCenter_layout_container .alert .noty_bar .noty_message .noty_text .noty_textcontent {
        display: none; }
    #noty_bottomRight_layout_container .alert.alert-primary, .noty_bottomRight_layout_container .alert.alert-primary, #noty_bottomCenter_layout_container .alert.alert-primary, .noty_bottomCenter_layout_container .alert.alert-primary {
      border-color: #3949AB; }
    #noty_bottomRight_layout_container .alert.alert-success, .noty_bottomRight_layout_container .alert.alert-success, #noty_bottomCenter_layout_container .alert.alert-success, .noty_bottomCenter_layout_container .alert.alert-success {
      border-color: #388E3C; }
    #noty_bottomRight_layout_container .alert.alert-warning, .noty_bottomRight_layout_container .alert.alert-warning, #noty_bottomCenter_layout_container .alert.alert-warning, .noty_bottomCenter_layout_container .alert.alert-warning {
      border-color: #F57C00; }
    #noty_bottomRight_layout_container .alert.alert-danger, .noty_bottomRight_layout_container .alert.alert-danger, #noty_bottomCenter_layout_container .alert.alert-danger, .noty_bottomCenter_layout_container .alert.alert-danger {
      border-color: #D32F2F; }
    #noty_bottomRight_layout_container .alert.alert-info, .noty_bottomRight_layout_container .alert.alert-info, #noty_bottomCenter_layout_container .alert.alert-info, .noty_bottomCenter_layout_container .alert.alert-info {
      border-color: #1976D2; }
    #noty_bottomRight_layout_container .alert.alert-inverse, .noty_bottomRight_layout_container .alert.alert-inverse, #noty_bottomCenter_layout_container .alert.alert-inverse, .noty_bottomCenter_layout_container .alert.alert-inverse {
      border-color: #000000; }
    #noty_bottomRight_layout_container .alert.alert-light, .noty_bottomRight_layout_container .alert.alert-light, #noty_bottomCenter_layout_container .alert.alert-light, .noty_bottomCenter_layout_container .alert.alert-light {
      border-color: #BDBDBD; }
    #noty_bottomRight_layout_container .alert.alert-dark, .noty_bottomRight_layout_container .alert.alert-dark, #noty_bottomCenter_layout_container .alert.alert-dark, .noty_bottomCenter_layout_container .alert.alert-dark {
      border-color: #424242; }

#noty_bottomRight_layout_container, .noty_bottomRight_layout_container {
  width: 449px !important; }
  #noty_bottomRight_layout_container .alert, .noty_bottomRight_layout_container .alert {
    width: 400px !important; }

@media (max-width: 575.98px) {
  #noty_bottomRight_layout_container {
    width: 90% !important;
    right: 5% !important; }
    #noty_bottomRight_layout_container li.alert {
      width: initial !important; } }

/* 
Component: Tile

This is a generic tile component based on the [`Panel`](section-elementpanels.html).

### Standard UX
- Content (except Lists) must be all begin left-aligned, without any padding

Markup: tile.hbs

Weight: 100

Styleguide ComponentTile
*/
/* 
Header

A tile can have a gray header to include a user bar and/or an action bar. <span class="text-highlight">Do not add anything else into the header, ex: charts, tables, etc.</span>

Markup: tile-header.hbs

Styleguide ComponentTile.Header
*/
/* 
Title

This is a tile with a title.

### Components

- [`Heading`](section-elementheadings.html)
- [`Panel`](section-elementpanels.html)

Markup: tile-title.hbs

Styleguide ComponentTile.Title
*/
/* 
Title w/ Label

This is a tile with a title and a label.

### Components

- [`Heading`](section-elementheadings.html)
- [`Label`](section-elementlabels.html)
- [`Panel`](section-elementpanels.html)

Markup: tile-titlelabel.hbs

Styleguide ComponentTile.TitleLabel
*/
/* 
Dates

Markup:
<h1>Heading 1 <span class="label label-date-range">Sep 27, 2019</span></h1>
<h2>Heading 2 <span class="label label-date-range">Sep 27, 2019</span></h2>
<h3>Heading 3 <span class="label label-date-range">Sep 27, 2019</span></h3>
<h4>Heading 4 <span class="label label-date-range">Sep 27, 2019</span></h4>
<h5>Heading 5 <span class="label label-date-range">Sep 27, 2019</span></h5>
<h6>Heading 6 <span class="label label-date-range">Sep 27, 2019</span></h6>

Styleguide ElementHeadings.Dates
*/
/* 
Title w/ Date

This is a tile with a title and date or date range.

### Components

- [`Heading`](section-elementheadings.html)
- [`Label`](section-elementlabels.html)
- [`Panel`](section-elementpanels.html)

Markup: tile-titledate.hbs

Styleguide ComponentTile.TitleDate
*/
/* 
Action Bar

This is a tile with an action bar in the header. <span class="text-highlight">The action bar can only have action links</span>.

Key actions are displayed on action bar. Non-key actions are nestled inside More Actions.

### UX Behavior

- The action bar must be aligned to the right, and <span class="text-highlight">all actions must be on the same line</span>.
- Actions in the action bar indicate [Key User Tasks](https://insight.innovativewayinc.com/products/pipeline/app/key-user-tasks/) or actions that are performed most often, per analytics. All other actions must be moved into the More Actions dropdown.
- Since the action bar should only contain Key User Tasks, <span class="text-highlight">there should be no more than 4 actions in the action bar</span>.
- If shown, <a href=""><i class="fa fa-plus-circle"></i> Create</a> and <a href=""><i class="fa fa-pencil-square-o"></i> Edit</a> should always be the first two action links in the action bar.
- Action link names should NOT repeat the name of the noun (object) of the tile, because it is unnecessarily repetitive. For example, on the Flow tile, do not have <a href=""><i class="fa fa-pencil-square-o"></i> Edit Flow</a>, <a href=""><i class="fa fa-minus-circle"></i> Deactivate Flow</a>, etc.
- Action links should NOT contain [`React-Select`](section-componentreactselect.html)

### Components

- [`Dropdowns`](section-elementdropdowns.html)
- [`Links (Action)`](section-elementlinksaction.html)
- [`Panel`](section-elementpanels.html)

Markup: tile-actionbar.hbs

Styleguide ComponentTile.ActionBar
*/
/* 
Action Bar: Body

The action bar an also be located in the tile body.

### UX Behavior

- Action links CAN contain [`React-Select`](section-componentreactselect.html), but it must be the LAST action, not counting More Actions.

Markup: tile-actionbar-body.hbs

Styleguide ComponentTile.ActionBarBody
*/
/* 
Status Bar

The status bar is exclusively for ON/OFF statuses and <span class="text-highlight">can only have [`Toggles`](section-elementlinksaction.html)</span>

### UX Behavior

- Status bar only appears in the tile body, never in the header
- Status bar always appears underneath the action bar, if the action bar exists
    - Status bar can on the same line as the action bar ONLY if the action bar ONLY contains More Actions and no other action links

Markup: tile-statusbar.hbs

Styleguide ComponentTile.StatusBar
*/
/* 
User Bar

This is a tile with a user bar in the header.

### Components

- [`Avatar`](section-elementavatar.html)
- [`Panel`](section-elementpanels.html)

Markup: tile-userbar.hbs

Styleguide ComponentTile.UserBar
*/
/* 
User Bar w/ Action Bar

This is a tile with a user bar in the header. Key actions are displayed on action bar. Non-key actions are nestled inside More Actions.

### Components

- [`Avatar`](section-elementavatar.html)
- [`Dropdowns`](section-elementdropdowns.html)
- [`Panel`](section-elementpanels.html)

Markup: tile-userbar-actionbar.hbs

Styleguide ComponentTile.UserBarActionBar
*/
/* 
Table

This is a tile with a [`Table`](section-elementtables.html). <span class="text-highlight">Tables inside tiles should only use the <code>default</code> style.</span>

Markup: tile-table.hbs

Styleguide ComponentTile.Table
*/
/* 
Table w/ Action Bar

This is a tile with a [`Table`](section-elementtables.html). <span class="text-highlight">Tables inside tiles should only use the <code>default</code> style.</span> Key actions are displayed on action bar. Non-key actions are nestled inside More Actions.

Markup: tile-table-actionbar.hbs

Styleguide ComponentTile.TableActionBar
*/
/* 
Kitchen Sink

This is an example of a tile with all possible action bars and various content.

Markup: tile-kitchensink.hbs

Weight: 100

Styleguide ComponentTile.KitchenSink
*/
/* 
Component: No Items

Weight: 100

Styleguide ComponentNoItems
*/
/* 
Asks

This is the "no items" view for Asks.

Markup: no-items-asks.hbs

Styleguide ComponentNoItems.Asks
*/
/* 
Bundles

This is the "no items" view for Bundles.

Markup: no-items-bundles.hbs

Styleguide ComponentNoItems.Bundles
*/
/* 
Flows

This is the "no items" view for Flows.

Markup: no-items-flows.hbs

Styleguide ComponentNoItems.Flows
*/
/* 
Marketplace

This is the "no items" view for Marketplace.

Markup: no-items-marketplace.hbs

Styleguide ComponentNoItems.Marketplace
*/
/* 
Teams

This is the "no items" view for Teams.

Markup: no-items-teams.hbs

Styleguide ComponentNoItems.Teams
*/
/* 
Promos

Add `panel-promo` to the panel, ex: `<div class="panel panel-primary panel-promo"></div>`

Markup:
<div class="panel {{modifier_class}} panel-promo" style="width:600px;">
    <div class="panel-heading">
        <h4>Lorem Ipsum</h4>
    </div>
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra erat at elementum ultricies. Quisque iaculis, dui eget malesuada congue, dui nibh malesuada sapien, ultrices ultrices nisi nisl et turpis.</p>
    </div>
</div>

.panel-primary		- &nbsp;
.panel-secondary	- &nbsp;
.panel-info			- &nbsp;
.panel-warning		- &nbsp;
.panel-danger		- &nbsp;
.panel-success		- &nbsp;
.panel-inverse		- &nbsp;
.panel-light		- &nbsp;
.panel-dark			- &nbsp;

Styleguide ElementPanels.Promos
*/
/*
.panel {
    .panel-heading {
        border-bottom-width: 1px;
        border-top-width: 6px;
        border-top-style: solid;
    }
    &.panel-default {
        &> .panel-heading {
            border-color: $alert-base-border-light;
        }
    }
}
*/
.panel {
  overflow: visible;
  border-radius: 1rem; }
  .panel .panel-actions {
    float: right;
    text-align: right;
    margin-left: 3em;
    margin-bottom: 1em; }
    .panel .panel-actions > a {
      display: inline-block; }
    .panel .panel-actions a {
      padding: 0.3rem 0.5rem; }
      .panel .panel-actions a.app:before {
        font-family: "FontAwesome";
        display: inline-block;
        margin-right: 3px;
        text-align: center; }
      .panel .panel-actions a.app.action-edit:before {
        content: "\f044"; }
      .panel .panel-actions a.app.action-file:before {
        content: "\f0f6"; }
      .panel .panel-actions a.cell-css.cell-numericyesno:before, .panel .panel-actions a.cell-css.cell-numericnoyes:before {
        font-size: 1rem;
        top: 1px; }
      .panel .panel-actions a.dropdown {
        padding: 0.3rem 0.5rem 0 0.5rem; }
    .panel .panel-actions .form-search {
      width: 400px; }
    .panel .panel-actions .btn-group {
      vertical-align: top; }
      .panel .panel-actions .btn-group > a:empty {
        margin-right: 0; }
        .panel .panel-actions .btn-group > a:empty:before {
          font-family: "FontAwesome";
          content: "\f142"; }
        .panel .panel-actions .btn-group > a:empty:hover {
          background-color: #EEEEEE;
          border-radius: 1rem; }
      .panel .panel-actions .btn-group .dropdown-menu {
        left: auto !important;
        transform: none !important;
        top: 100% !important;
        right: 0;
        min-width: 12em; }
      .panel .panel-actions .btn-group.keywordsearch {
        top: -3px; }
        .panel .panel-actions .btn-group.keywordsearch .form-control:not(:last-child) {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
    .panel .panel-actions .panel-status {
      text-align: right; }
    .panel .panel-actions.panel-actions-left {
      float: none;
      text-align: left;
      margin-left: 0; }
  .panel .panel-heading {
    padding: 1rem 1.25rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem; }
    .panel .panel-heading .badge {
      background-color: #FF9800; }
    .panel .panel-heading .panel-actions {
      font-weight: normal;
      margin-bottom: 0;
      position: relative;
      right: -1rem; }
      .panel .panel-heading .panel-actions #ajax-formdesign-keywordsearch input#keyword-search {
        transition: width .15s ease-in-out; }
        .panel .panel-heading .panel-actions #ajax-formdesign-keywordsearch input#keyword-search:focus {
          width: 50vw; }
        .panel .panel-heading .panel-actions #ajax-formdesign-keywordsearch input#keyword-search:not(:placeholder-shown) {
          width: 50vw; }
    .panel .panel-heading .panel-userinfo {
      float: left;
      margin-right: 25px; }
      .panel .panel-heading .panel-userinfo .avatar {
        margin-right: 0.75em; }
      .panel .panel-heading .panel-userinfo .user-name {
        display: inline-block;
        vertical-align: bottom;
        font-size: 1.1rem; }
        .panel .panel-heading .panel-userinfo .user-name a:after {
          font-family: "FontAwesome";
          content: "\f0e0";
          margin-left: 5px; }
        .panel .panel-heading .panel-userinfo .user-name a.user-anonymous:after {
          display: none; }
        .panel .panel-heading .panel-userinfo .user-name .user-desc {
          font-weight: normal;
          color: #9E9E9E;
          font-size: 0.8rem; }
    .panel .panel-heading .panel-heading-title {
      position: relative;
      top: 0.3rem; }
    .panel .panel-heading + .panel-body {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem; }
  .panel .panel-body {
    border-radius: 1rem; }
    .panel .panel-body h4 {
      font-size: 1.3rem; }
    .panel .panel-body h5:first-child {
      display: inline-block; }
    .panel .panel-body .panel-toggles {
      font-size: 90%; }
      .panel .panel-body .panel-toggles .cell-css.cell-numericyesno:before {
        font-size: 1em;
        top: 1px; }
      .panel .panel-body .panel-toggles .pull-left {
        margin-right: 10px; }
  .panel .panel-footer {
    padding: 1rem 1.25rem; }
    .panel .panel-footer#external-marketing {
      font-size: 95%;
      background-image: url(https://iwcdn.s3.amazonaws.com/pipeline/pipeline-external-panel-footer.png);
      background-position: right bottom;
      background-repeat: no-repeat; }
  .panel.hasbundles .panel-actions {
    visibility: hidden; }
  .panel.hasbundles .resultsnav {
    visibility: hidden; }
  .panel.panel-message .panel-body .panel-message-guide {
    padding-right: 140px;
    background-image: url(https://iwcdn.s3.amazonaws.com/pipeline/owlbert-gamify-green-cap-email-header.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    margin-right: -20px; }
  .panel.panel-message.panel-oops .panel-body .panel-message-guide {
    background-image: url(https://iwcdn.s3.amazonaws.com/pipeline/owlbert-oops-brown-staring.png); }
  .panel.panel-message.panel-promo {
    margin-left: 50%;
    width: 100%; }
  .panel.panel-card {
    margin-bottom: 1.5rem; }
    .panel.panel-card .panel-body {
      border-top-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      border-left: 7px solid #E0E0E0;
      border-left-color: #E0E0E0;
      padding-bottom: 1rem;
      padding-left: 1rem;
      padding-right: 0.5rem; }
      .panel.panel-card .panel-body .avatar {
        margin: 0 0 1em 0;
        float: left;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: 50%; }
        .panel.panel-card .panel-body .avatar img {
          margin: 0; }
      .panel.panel-card .panel-body .user-name .avatar-name {
        font-size: 1rem; }
      .panel.panel-card .panel-body .user-name a {
        font-size: 0.8em; }
      .panel.panel-card .panel-body .user-name.user-name-avatar-card {
        margin-left: 1.25rem;
        text-align: left;
        display: inline-block;
        max-width: calc(100% - 64px - 2.5rem); }
        .panel.panel-card .panel-body .user-name.user-name-avatar-card .avatar-name {
          display: block; }
        .panel.panel-card .panel-body .user-name.user-name-avatar-card .avatar-email {
          display: block; }
          .panel.panel-card .panel-body .user-name.user-name-avatar-card .avatar-email:before {
            content: "\f0e0";
            font-family: "FontAwesome";
            margin-right: 5px; }
        .panel.panel-card .panel-body .user-name.user-name-avatar-card .avatar-phone {
          display: block;
          pointer-events: initial; }
          .panel.panel-card .panel-body .user-name.user-name-avatar-card .avatar-phone:before {
            content: "\f095";
            font-family: "FontAwesome";
            margin-right: 5px; }
      .panel.panel-card .panel-body .panel-toggles {
        font-size: 0.9em;
        margin-top: 1.5em; }
        .panel.panel-card .panel-body .panel-toggles a {
          margin-right: 15px; }
          .panel.panel-card .panel-body .panel-toggles a i.fa-plus-circle, .panel.panel-card .panel-body .panel-toggles a i.fa-minus-circle {
            font-size: 90%;
            color: #9E9E9E; }
      .panel.panel-card .panel-body .clearfix {
        height: 0px; }
    .panel.panel-card[data-isexternal="1"] .panel-body {
      border-left-color: #FFB74D; }
    .panel.panel-card[data-isexternal="1"]:hover .panel-body {
      border-left-color: #F57C00; }
    .panel.panel-card:hover {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
      /*transform: translate3d(0, -2px, 0);    */ }
      .panel.panel-card:hover .panel-body {
        border-left-color: #616161; }
  .panel.panel-promo .panel-heading {
    background-color: inherit;
    border-width: 0;
    padding-top: 3rem;
    padding-bottom: 0.5rem;
    position: relative;
    overflow: hidden; }
    .panel.panel-promo .panel-heading h4 {
      margin-bottom: 0; }
    .panel.panel-promo .panel-heading:before {
      content: " ";
      display: block;
      background-color: #F5F5F5;
      width: 100%;
      height: 80px;
      left: 0;
      top: -60px;
      transform: skewY(-1.5deg);
      position: absolute; }
    .panel.panel-promo .panel-heading:after {
      content: " ";
      display: block;
      background-color: #616161;
      width: 100%;
      height: 80px;
      left: 0;
      top: -50px;
      transform: skewY(3deg);
      position: absolute; }
  .panel.panel-promo.panel-success .panel-heading:before {
    background-color: #C8E6C9; }
  .panel.panel-promo.panel-success .panel-heading:after {
    background-color: #43A047; }
  .panel.panel-promo.panel-danger .panel-heading:before {
    background-color: #FFCDD2; }
  .panel.panel-promo.panel-danger .panel-heading:after {
    background-color: #E53935; }
  .panel.panel-promo.panel-warning .panel-heading:before {
    background-color: #FFE0B2; }
  .panel.panel-promo.panel-warning .panel-heading:after {
    background-color: #FB8C00; }
  .panel.panel-promo.panel-info .panel-heading:before {
    background-color: #BBDEFB; }
  .panel.panel-promo.panel-info .panel-heading:after {
    background-color: #1E88E5; }
  .panel.panel-promo.panel-primary .panel-heading:before {
    background-color: #C5CAE9; }
  .panel.panel-promo.panel-primary .panel-heading:after {
    background-color: #3F51B5; }
  .panel.panel-avatar {
    box-shadow: none; }
    .panel.panel-avatar > .panel-body {
      padding: 0; }
  .panel.panel-flows-used .panel-heading h4:before {
    content: "\f1da";
    font-family: "FontAwesome";
    margin-right: 5px; }
  .panel.panel-flows-used .panel-heading h4:after {
    content: "Asks that I often create are..."; }
  .panel.panel-flows-used .panel-body ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    .panel.panel-flows-used .panel-body ul li:before {
      content: "\f055";
      font-family: "FontAwesome";
      margin-right: 5px;
      color: #3F51B5; }
  .panel.panel-steps-due .panel-heading h4:before {
    content: "\f017";
    font-family: "FontAwesome";
    margin-right: 5px; }
  .panel.panel-steps-due .panel-heading h4:after {
    content: "Asks that are waiting on me..."; }
  .panel.panel-steps-due .panel-body ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    .panel.panel-steps-due .panel-body ul li:before {
      content: "\f1d9";
      font-family: "FontAwesome";
      margin-right: 5px;
      color: #3F51B5; }
  .panel.panel-steps-due .panel-body .request-due-view-more {
    text-align: center; }
  .panel.panel-steps-due .panel-body .panel-message-guide {
    height: 125px;
    padding-right: 140px;
    background-image: url(https://iwcdn.s3.amazonaws.com/pipeline/owlbert-gamify-green-cap-email-header.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    margin-right: -20px; }
  .panel.panel-steps-due .requests-due[data-useduedates="0"] .due-dates {
    display: none; }
  .panel.panel-steps-due .requests-due[data-isadhoc="1"] .due-dates {
    display: none; }
  .panel.panel-steps-due .requests-due .due-dates {
    color: red; }
    .panel.panel-steps-due .requests-due .due-dates[data-ispastdue="0"] .step-pastdue {
      display: none; }
  .panel.panel-steps-due .requests-due .step-info {
    font-size: .85em;
    display: block;
    margin-top: 5px; }
  .panel.panel-steps-due .requests-due .step-name {
    font-style: italic;
    color: #9E9E9E; }
  .panel.panel-announcement {
    margin-bottom: 20px; }
  .panel.panel-announcements .panel-heading h4:before {
    content: "\f05a";
    font-family: "FontAwesome";
    margin-right: 5px; }
  .panel.panel-announcements .panel-heading h4:after {
    content: "Stay in the know..."; }
  .panel.panel-target1:before {
    display: none;
    height: 6px;
    border-left: solid 40px #000000;
    position: absolute;
    top: 40%;
    left: -40px; }
  .panel.panel-target1:after {
    display: none;
    height: 100%;
    border-left: solid 6px #000000;
    position: absolute;
    left: -40px; }
  .panel.panel-target1.panel-target-start:before {
    content: " "; }
  .panel.panel-target1.panel-target-start:after {
    content: " ";
    top: -60%; }
  .panel.panel-target1.panel-target-middle:after {
    height: 100%; }
  .panel.panel-target1.panel-target-end:before {
    content: " "; }
  .panel.panel-target1.panel-target-end:after {
    height: 100%; }

.kpi-home .kpi-due-now .row .kpi:before {
  width: 15%;
  background-color: #3F51B5;
  z-index: 1000;
  height: 20px;
  display: block;
  position: absolute;
  top: 99px;
  left: 31%; }

.kpi-home .kpi-due-now .row .kpi:after {
  width: 15%;
  background-color: #3F51B5;
  z-index: 1000;
  height: 20px;
  display: block;
  position: absolute;
  top: 99px;
  right: 31%; }

.kpi-home .kpi-due-now .row .col-md-offset-1 {
  margin-left: 12.444444%; }

#create-request {
  display: inline-block; }

#edit-process {
  display: inline-block; }

[data-is-readonly="1"] .cell-numericyesno, [data-is-deactivated="1"] .cell-numericyesno {
  display: inline-block; }

[data-is-readonly="1"] #add-rule, [data-is-deactivated="1"] #add-rule {
  display: inline-block; }

[data-is-readonly="1"] .field-properties a, [data-is-deactivated="1"] .field-properties a {
  display: inline-block; }

[data-is-readonly="1"] #add-recurrence, [data-is-deactivated="1"] #add-recurrence {
  display: inline-block; }

[data-is-readonly="1"] .form-process .panel-actions a, [data-is-deactivated="1"] .form-process .panel-actions a {
  display: inline-block; }

[data-is-readonly="1"] .panel, [data-is-deactivated="1"] .panel {
  background-color: #F5F5F5; }
  [data-is-readonly="1"] .panel .panel-body, [data-is-deactivated="1"] .panel .panel-body {
    position: relative;
    min-height: 300px; }

[data-is-readonly="1"][data-is-overview="1"] > .panel > .panel-body:before, [data-is-deactivated="1"][data-is-overview="1"] > .panel > .panel-body:before {
  content: "\f023";
  font-family: "FontAwesome";
  font-size: 7em;
  position: absolute;
  color: #9E9E9E;
  left: 48%;
  top: 100px;
  z-index: 999; }

[data-is-readonly="1"] .process-delete-follower, [data-is-deactivated="1"] .process-delete-follower {
  pointer-events: none !important;
  visibility: hidden !important; }

[data-is-readonly="1"] .panel-body, [data-is-deactivated="1"] .panel-body {
  background-color: #F5F5F5; }

[data-is-readonly="1"] .individual-follower-box .panel-body, [data-is-deactivated="1"] .individual-follower-box .panel-body {
  min-height: auto !important; }

[data-is-readonly="1"] .process-add-follower, [data-is-deactivated="1"] .process-add-follower {
  pointer-events: none !important; }

.workflow-column {
  padding-right: 15px; }

.process-status {
  padding-left: 0.5em;
  padding-right: 0.5em; }
  .process-status:not([data-is-draft="1"]) .label-draft {
    display: none; }
  .process-status:not([data-is-archive="1"]) .label-deactive {
    display: none; }
  .process-status:not([data-is-live="1"]) .label-live {
    display: none; }

#tile-workflows .panel-body .table tr td .label-live:before {
  display: none; }

#tile-workflows .panel-body .table tr.workflow-version {
  display: none; }

#tile-workflows[data-is-display-version="1"] .panel-body .table tr td .label-live:before {
  display: inline-block; }

#tile-workflows[data-is-display-version="1"] .panel-body .table tr.workflow-version {
  display: table-row; }
  #tile-workflows[data-is-display-version="1"] .panel-body .table tr.workflow-version td:first-child {
    padding-left: 60px; }
    #tile-workflows[data-is-display-version="1"] .panel-body .table tr.workflow-version td:first-child .label-live:before {
      display: none; }

.tile-body {
  margin-top: 1.5em; }

.ui-notify {
  height: 10px !important; }

body.dark .panel .panel-body .panel.panel-card .panel-body {
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-left: 7px solid #E0E0E0;
  border-left-color: #E0E0E0;
  border-left-color: #616161; }

@media (max-width: 767.98px) {
  .panel .panel-actions > .btn-group {
    display: none; }
  .panel .panel-body > .panel-actions {
    margin-bottom: 0; } }

@keyframes panelBar {
  0% {
    border-left-color: #E0E0E0; }
  38% {
    border-left-color: #000000; }
  62% {
    border-left-color: #000000; }
  100% {
    border-left-color: #E0E0E0; } }

@keyframes panelBarPrimary {
  0% {
    border-left-color: #E0E0E0; }
  38% {
    border-left-color: var(--primary); }
  62% {
    border-left-color: var(--primary); }
  100% {
    border-left-color: #E0E0E0; } }

/* 
UX: Onboarding: Administrator

Weight: 300

Styleguide UXOnboardingAdministrator
*/
/* 
Welcome

This is the first screen to onboard the account administrator and display the terms and conditions.

Markup: onboarding-admin-welcome.hbs

Weight: 309

Styleguide UXOnboardingAdministrator.Welcome
*/
/* 
Invite Your Team Members

This is the first screen to invite teammates.

Markup: onboarding-admin-invitecontact.hbs

Weight: 311

Styleguide UXOnboardingAdministrator.InviteContacts
*/
/* 
Update Profile

Update administrator contact profile.

Markup: onboarding-admin-profile.hbs

Weight: 310

Styleguide UXOnboardingAdministrator.UpdateProfile
*/
/* 
Create Teams

This is the second screen to create teams.

Markup: onboarding-admin-createteams.hbs

Weight: 312

Styleguide UXOnboardingAdministrator.CreateTeams
*/
/* 
Download Flow Templates

This is the third screen to download flows from the Marketplace.

Markup: onboarding-admin-downloadflows.hbs

Weight: 313

Styleguide UXOnboardingAdministrator.DownloadFlows
*/
/* 
You're All Set

This is the last screen to show the welcome video and display the terms and conditions.

Markup: onboarding-admin-youreallset.hbs

Weight: 314

Styleguide UXOnboardingAdministrator.YourAllSet
*/
/* 
UX: Onboarding: Contact

Weight: 300

Styleguide UXOnboardingContact
*/
/* 
Welcome

This is the first screen to onboard contacts, show the welcome video, and display the terms and conditions.

Markup: onboarding-contact-welcome.hbs

Weight: 309

Styleguide UXOnboardingContact.Welcome
*/
/* 
Update Profile

Update contact profile.

Markup: onboarding-admin-profile.hbs

Weight: 310

Styleguide UXOnboardingContact.UpdateProfile
*/
/* 
Component: Process Step

### Standard UX
- All buttons are disabled
- The drag-and-drop icon is always present and is positioned in the top center

### Component
- [`Avatar`](section-elementavatar.html)
- [`Button`](section-elementbuttons.html)
- [`Drag and Drop`](section-componentdraganddrop.html)

Markup: process-step.hbs

Weight: 100

Styleguide ComponentProcessStep
*/
/* 
With Instructions

### Standard UX
- Instructions are indented

Markup: process-step-instructions.hbs

Styleguide ComponentProcessStep.Instructions
*/
/* 
With Form

### Standard UX
- Expand the Form Fields to preview the form
- All form fields are disabled

Markup: process-step-form.hbs

Styleguide ComponentProcessStep.Form
*/
/* 
With Due Dates

Markup: process-step-due-dates.hbs

Styleguide ComponentProcessStep.DueDates
*/
/* 
Component: Process Steps

### Standard UX
- <span class="text-highlight">For the 1st step, the add step icon appears ABOVE and BELOW the step on hover</span>
- <span class="text-highlight">For all other steps, the add step icon appears BELOW the step on hover</span>

### Component
- [`Process Step`](section-componentprocessstep.html)

Markup: process-steps.hbs

Weight: 100

Styleguide ComponentProcessSteps
*/
#process-steps {
  position: relative; }

.steps-list {
  list-style: none;
  margin: auto;
  margin-bottom: 1.8em;
  padding: 0;
  width: 1040px;
  position: relative; }
  .steps-list > li {
    margin-bottom: 0;
    padding-top: 0; }
    .steps-list > li .step-add {
      position: relative;
      /*border-bottom: solid 2px $border-color;*/
      font-size: 1.8em;
      text-align: center;
      height: 0px;
      margin-bottom: 0px; }
      .steps-list > li .step-add .add-before {
        position: relative;
        display: inline;
        top: -14px;
        /*background-color: #ffffff;*/ }
      .steps-list > li .step-add .add-after {
        position: relative;
        display: inline;
        bottom: -10px;
        z-index: 1;
        color: #BDBDBD;
        opacity: 0.3; }
        .steps-list > li .step-add .add-after.introjs-showElement {
          color: #3F51B5;
          opacity: 1; }
      .steps-list > li .step-add i {
        background-color: #FFFFFF; }
      .steps-list > li .step-add:last-child {
        height: 25px;
        margin-bottom: 0px;
        margin-top: 10px; }
    .steps-list > li .panel {
      padding: 0;
      margin-bottom: 0; }
      .steps-list > li .panel .panel-body {
        padding: 0.75em 1.25rem .75em 1.25em; }
        .steps-list > li .panel .panel-body.step-group {
          background: #F5F5F5; }
          .steps-list > li .panel .panel-body.step-group .step-add .add-after {
            background: #F5F5F5; }
          .steps-list > li .panel .panel-body.step-group .step-add .add-before {
            background: #F5F5F5; }
          .steps-list > li .panel .panel-body.step-group .step-add i {
            color: orange; }
        .steps-list > li .panel .panel-body + .step-conditionals {
          position: absolute;
          top: -2em;
          font-size: 0.72rem;
          left: 1rem; }
          .steps-list > li .panel .panel-body + .step-conditionals .btn-group a {
            color: #3F51B5; }
          .steps-list > li .panel .panel-body + .step-conditionals .btn-group .dropdown-menu .dropdown-item.active {
            color: #424242;
            background-color: inherit; }
            .steps-list > li .panel .panel-body + .step-conditionals .btn-group .dropdown-menu .dropdown-item.active:before {
              animation-fill-mode: both;
              animation-duration: 4s;
              animation-iteration-count: infinite;
              animation-name: wobble;
              animation-timing-function: ease-in-out;
              font-family: "FontAwesome";
              content: "\f0e7";
              display: inline-block;
              margin-right: 5px;
              color: #D32F2F; }
          .steps-list > li .panel .panel-body + .step-conditionals .conditional-criteria {
            margin-bottom: 0; }
            .steps-list > li .panel .panel-body + .step-conditionals .conditional-criteria kbd {
              font-size: 100%;
              font-weight: bold;
              margin-right: 10px; }
        .steps-list > li .panel .panel-body[data-has-errors="1"][data-error-reminders="1"] .panel-toggles [data-analytics-name="toggle-send-reminder"] {
          color: #F44336; }
          .steps-list > li .panel .panel-body[data-has-errors="1"][data-error-reminders="1"] .panel-toggles [data-analytics-name="toggle-send-reminder"]:after {
            animation-fill-mode: both;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-name: wobble;
            animation-timing-function: ease-in-out;
            color: #F44336;
            font-family: "FontAwesome";
            content: "\f071";
            display: inline-block;
            margin-left: 3px; }
          .steps-list > li .panel .panel-body[data-has-errors="1"][data-error-reminders="1"] .panel-toggles [data-analytics-name="toggle-send-reminder"]:before {
            color: #F44336; }
        .steps-list > li .panel .panel-body[data-has-errors="1"][data-error-external="1"] .panel-toggles [data-analytics-name="toggle-is-external"] {
          color: #F44336; }
          .steps-list > li .panel .panel-body[data-has-errors="1"][data-error-external="1"] .panel-toggles [data-analytics-name="toggle-is-external"]:after {
            animation-fill-mode: both;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-name: wobble;
            animation-timing-function: ease-in-out;
            color: #F44336;
            font-family: "FontAwesome";
            content: "\f071";
            display: inline-block;
            margin-left: 3px; }
          .steps-list > li .panel .panel-body[data-has-errors="1"][data-error-external="1"] .panel-toggles [data-analytics-name="toggle-is-external"]:before {
            color: #F44336; }
        .steps-list > li .panel .panel-body .drag-handle-container {
          width: 30px;
          position: relative;
          top: -3px;
          margin: auto; }
        .steps-list > li .panel .panel-body h4 {
          margin-top: 0;
          font-size: 1rem;
          margin-left: 30px;
          position: relative;
          max-width: 760px;
          padding-left: 90px; }
          .steps-list > li .panel .panel-body h4 .step-number {
            margin-right: 15px;
            margin-left: 0;
            position: absolute;
            top: 0px;
            left: 0;
            font-size: 0.8rem;
            color: #FFFFFF;
            background-color: #212121;
            border-width: 0; }
          .steps-list > li .panel .panel-body h4 .avatar {
            margin-right: 0;
            position: absolute;
            top: -7px;
            left: 40px;
            height: 34px;
            width: 34px; }
            .steps-list > li .panel .panel-body h4 .avatar img {
              margin-right: 0;
              height: 34px;
              width: 34px; }
            .steps-list > li .panel .panel-body h4 .avatar.avatar-text {
              top: -10px; }
              .steps-list > li .panel .panel-body h4 .avatar.avatar-text .user {
                top: 23%;
                font-size: 0.9em; }
          .steps-list > li .panel .panel-body h4 .step-name {
            margin-left: 0px;
            position: relative;
            top: -1px; }
          .steps-list > li .panel .panel-body h4 .step-type.fa:before,
          .steps-list > li .panel .panel-body h4 .step-linkstep.fa:before,
          .steps-list > li .panel .panel-body h4 .step-rule.fa:before,
          .steps-list > li .panel .panel-body h4 .step-error.fa:before {
            margin-left: 5px;
            margin-right: 5px; }
          .steps-list > li .panel .panel-body h4 .step-error.fa:before {
            animation-fill-mode: both;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-name: wobble;
            animation-timing-function: ease-in-out;
            color: #F44336;
            display: block; }
        .steps-list > li .panel .panel-body .step-body {
          /*display: none;*/
          /*overflow: hidden;*/
          /*transform: scaleY(0);
					transition: transform 1s ease-out;*/
          position: relative;
          min-height: initial; }
          .steps-list > li .panel .panel-body .step-body .panel-actions {
            margin-left: 20px;
            position: relative;
            z-index: 10 !important; }
            .steps-list > li .panel .panel-body .step-body .panel-actions a.step-delete i {
              color: #D32F2F !important; }
            .steps-list > li .panel .panel-body .step-body .panel-actions.hide a {
              visibility: hidden; }
              .steps-list > li .panel .panel-body .step-body .panel-actions.hide a.fa-times-circle::before {
                color: #E53935; }
          .steps-list > li .panel .panel-body .step-body .step-instructions p > iframe {
            display: block;
            margin: auto;
            background-color: #ffffff;
            padding: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
          .steps-list > li .panel .panel-body .step-body .step-instructions h4 {
            margin-left: 0;
            padding-left: 0;
            max-width: initial; }
          .steps-list > li .panel .panel-body .step-body .step-instructions p {
            position: relative; }
            .steps-list > li .panel .panel-body .step-body .step-instructions p a.btn.animated {
              animation-duration: 5s;
              animation-iteration-count: infinite;
              animation-name: shake; }
            .steps-list > li .panel .panel-body .step-body .step-instructions p .pin.pin-danger.pin-confirm {
              left: -100px;
              padding: 0.3em 0.7em 0.3em 1.2em; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div.email-only,
          .steps-list > li .panel .panel-body .step-body .step-instructions p.email-only {
            border: 1px dashed #E0E0E0;
            padding: 1em;
            margin-left: 0;
            margin-top: 2em;
            position: relative;
            border-radius: 1rem;
            margin-bottom: 1em;
            opacity: 0.4;
            text-align: left; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.email-only img,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.email-only img {
              box-shadow: none;
              padding: 0; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.email-only:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.email-only:before {
              content: "Email only";
              font-size: 0.8em;
              color: #9E9E9E;
              display: inline-block;
              position: absolute;
              top: -2em;
              width: 100%; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.email-only:hover,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.email-only:hover {
              opacity: 1; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div.web-only,
          .steps-list > li .panel .panel-body .step-body .step-instructions p.web-only {
            border: 1px dashed #E0E0E0;
            padding: 1em;
            margin-left: 0;
            margin-top: 2em;
            position: relative;
            border-radius: 1rem;
            margin-bottom: 1em;
            text-align: left;
            display: block !important; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.web-only:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.web-only:before {
              content: "Web only";
              font-size: 0.8em;
              color: #9E9E9E;
              display: inline-block;
              position: absolute;
              top: -2em;
              width: 100%; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div.internal-only,
          .steps-list > li .panel .panel-body .step-body .step-instructions p.internal-only {
            border: 1px dashed #E0E0E0;
            padding: 1em;
            margin-left: 0;
            margin-top: 2em;
            position: relative;
            border-radius: 1rem;
            margin-bottom: 1em;
            text-align: left;
            display: block !important; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.internal-only:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.internal-only:before {
              content: "Internal only";
              font-size: 0.8em;
              color: #9E9E9E;
              display: inline-block;
              position: absolute;
              top: -2em;
              width: 100%; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div.qa-only,
          .steps-list > li .panel .panel-body .step-body .step-instructions p.qa-only {
            border: 1px dashed #E0E0E0;
            border-color: #FF9800;
            padding: 1em;
            margin-left: 0;
            margin-top: 2em;
            position: relative;
            border-radius: 1rem;
            margin-bottom: 1em;
            text-align: left;
            display: block !important; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.qa-only:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.qa-only:before {
              content: "QA only";
              font-size: 0.8em;
              color: #9E9E9E;
              display: inline-block;
              position: absolute;
              color: #FF9800;
              top: -2em;
              width: 100%; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl,
          .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl {
            border: 1px dashed #E0E0E0;
            padding: 1em;
            margin-left: 0;
            margin-top: 2em;
            position: relative;
            border-radius: 1rem;
            margin-bottom: 1em;
            text-align: left; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl img,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl img {
              box-shadow: none;
              padding: 0; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl:before {
              font-size: 0.8em;
              color: #9E9E9E;
              display: inline-block;
              position: absolute;
              top: -2em;
              width: 100%; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl:before {
              content: "Instructions Template"; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .calendly-inline-widget,
            .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .oncehub-inline-widget,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .calendly-inline-widget,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .oncehub-inline-widget {
              border: 1px dashed #E0E0E0;
              padding: 1em;
              margin-left: 0;
              margin-top: 2em;
              position: relative;
              border-radius: 1rem;
              margin-bottom: 1em;
              text-align: left;
              position: relative;
              min-width: 320px;
              height: 700px; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .calendly-inline-widget img,
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .oncehub-inline-widget img,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .calendly-inline-widget img,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .oncehub-inline-widget img {
                box-shadow: none;
                padding: 0; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .calendly-inline-widget:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .oncehub-inline-widget:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .calendly-inline-widget:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .oncehub-inline-widget:before {
                font-size: 0.8em;
                color: #9E9E9E;
                display: inline-block;
                position: absolute;
                top: -2em;
                width: 100%; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .calendly-inline-widget:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .oncehub-inline-widget:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .calendly-inline-widget:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .oncehub-inline-widget:before {
                content: "App Widget"; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper {
              border: 1px dashed #E0E0E0;
              padding: 1em;
              margin-left: 0;
              margin-top: 2em;
              position: relative;
              border-radius: 1rem;
              margin-bottom: 1em;
              text-align: left;
              position: relative;
              min-width: 320px;
              height: 700px; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper img,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper img {
                box-shadow: none;
                padding: 0; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper:before {
                font-size: 0.8em;
                color: #9E9E9E;
                display: inline-block;
                position: absolute;
                top: -2em;
                width: 100%; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper:before {
                content: "App Widget"; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper iframe,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper iframe {
                width: 100% !important;
                height: 100% !important; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper.iframe-sharefile,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper.iframe-sharefile {
                height: 450px; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper.iframe-boldsign,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper.iframe-boldsign {
                border: 1px dashed #E0E0E0;
                padding: 1em;
                margin-left: 0;
                margin-top: 2em;
                position: relative;
                border-radius: 1rem;
                margin-bottom: 1em;
                text-align: left;
                position: relative;
                height: auto; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper.iframe-boldsign img,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper.iframe-boldsign img {
                  box-shadow: none;
                  padding: 0; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper.iframe-boldsign:before,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper.iframe-boldsign:before {
                  font-size: 0.8em;
                  color: #9E9E9E;
                  display: inline-block;
                  position: absolute;
                  top: -2em;
                  width: 100%; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper.iframe-boldsign:before,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper.iframe-boldsign:before {
                  content: "App Widget"; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper.iframe-boldsign iframe,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper.iframe-boldsign iframe {
                  display: none; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.mceTmpl .iframe-wrapper.iframe-boldsign:after,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.mceTmpl .iframe-wrapper.iframe-boldsign:after {
                  content: "Sample Signature";
                  font-family: 'Over the Rainbow', cursive;
                  font-size: 2rem;
                  display: block; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div.conditional,
          .steps-list > li .panel .panel-body .step-body .step-instructions p.conditional {
            border: 1px dashed #E0E0E0;
            padding: 1em;
            margin-left: 0;
            margin-top: 2em;
            position: relative;
            border-radius: 1rem;
            margin-bottom: 1em;
            text-align: left; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.conditional img,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.conditional img {
              box-shadow: none;
              padding: 0; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.conditional:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.conditional:before {
              font-size: 0.8em;
              color: #9E9E9E;
              display: inline-block;
              position: absolute;
              top: -2em;
              width: 100%; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.conditional:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.conditional:before {
              content: "Conditional"; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div p + .contentformula,
          .steps-list > li .panel .panel-body .step-body .step-instructions div ul + .contentformula,
          .steps-list > li .panel .panel-body .step-body .step-instructions div ol + .contentformula,
          .steps-list > li .panel .panel-body .step-body .step-instructions p p + .contentformula,
          .steps-list > li .panel .panel-body .step-body .step-instructions p ul + .contentformula,
          .steps-list > li .panel .panel-body .step-body .step-instructions p ol + .contentformula {
            margin-top: 2rem; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div .contentformula + .contentformula,
          .steps-list > li .panel .panel-body .step-body .step-instructions p .contentformula + .contentformula {
            margin-top: 2rem; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd,
          .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd {
            border: 1px dashed #E0E0E0;
            padding: 1em;
            margin-left: 0;
            margin-top: 2em;
            position: relative;
            border-radius: 1rem;
            margin-bottom: 1em;
            text-align: left;
            display: block;
            background-color: #ffffff;
            margin-top: 3rem;
            margin-bottom: 2rem; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd img,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd img {
              box-shadow: none;
              padding: 0; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd:before {
              font-size: 0.8em;
              color: #9E9E9E;
              display: inline-block;
              position: absolute;
              top: -2em;
              width: 100%; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd:before {
              content: "Conditional"; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd:before {
              font-family: "Inter", "Open Sans", sans-serif;
              font-size: 0.72rem; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd > p,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd > p {
              font-family: "Inter", "Open Sans", sans-serif;
              font-size: 0.9rem; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd > p > kbd,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd > p > kbd {
                font-size: 0.8rem; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd > p:last-child,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd > p:last-child {
                margin-bottom: 0; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd > p:empty,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd > p:empty {
                display: none; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd > p.conditional-criteria,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd > p.conditional-criteria {
                position: absolute;
                top: -1.6rem;
                left: 5.4rem;
                margin-bottom: 0;
                display: none; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd > p.conditional-criteria > kbd,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd > p.conditional-criteria > kbd {
                  font-size: 0.72rem; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd > p.panel-toggles,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd > p.panel-toggles {
                position: absolute;
                top: -1.6rem;
                left: 4.5rem;
                font-size: 0.7rem; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd > p.panel-toggles a + a,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd > p.panel-toggles a + a {
                  margin-left: 10px; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output {
              border: 1px dashed #E0E0E0;
              padding: 1em;
              margin-left: 0;
              margin-top: 2em;
              position: relative;
              border-radius: 1rem;
              margin-bottom: 1em;
              text-align: left;
              font-family: "Inter", "Open Sans", sans-serif;
              font-size: 0.9rem;
              margin-top: 0;
              margin-left: 15px;
              margin-right: 15px;
              margin-bottom: 0; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output img,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output img {
                box-shadow: none;
                padding: 0; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output:before {
                font-size: 0.8em;
                color: #9E9E9E;
                display: inline-block;
                position: absolute;
                top: -2em;
                width: 100%; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output:before {
                content: "Conditional"; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output > kbd,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output > kbd {
                border-color: #E0E0E0;
                background-color: #EEEEEE; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output:before {
                display: inline-block;
                padding: .25em .4em;
                font-size: 75%;
                font-weight: 700;
                line-height: 1;
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline;
                padding-left: 0.6em;
                padding-right: 0.6em;
                position: relative;
                top: -1px;
                border-radius: 10rem;
                font-family: "Inter", "Open Sans", sans-serif;
                font-size: 0.65rem;
                content: 'Yes';
                color: #FFFFFF;
                background-color: #A5D6A7;
                position: absolute;
                top: 0;
                right: 0;
                width: auto; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output > ul,
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output > ol,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output > ul,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output > ol {
                padding-left: 10px; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output > ul > li,
                .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output > ol > li,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output > ul > li,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output > ol > li {
                  display: list-item; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output > ul:last-child,
                .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output > ol:last-child,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output > ul:last-child,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output > ol:last-child {
                  margin-bottom: 0; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output > p:empty,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output > p:empty {
                display: none; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output > p:last-child,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output > p:last-child {
                margin-bottom: 0; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-true:before, .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-True:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-true:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-True:before {
                content: 'True'; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-false:before, .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-False:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-false:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-False:before {
                content: 'False';
                background-color: #EF9A9A; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-no:before, .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-No:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-no:before,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-No:before {
                content: 'No';
                background-color: #EF9A9A; }
              .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-preview,
              .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-preview {
                padding: 0;
                margin: 0;
                border-width: 0px; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-preview:before,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-preview:before {
                  display: none; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-preview .conditional-output-preview-header,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-preview .conditional-output-preview-header {
                  position: absolute;
                  top: -3.2em;
                  font-size: 0.72rem;
                  right: 0; }
                  .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-preview .conditional-output-preview-header:before,
                  .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-preview .conditional-output-preview-header:before {
                    display: none; }
                .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd .conditional-output.conditional-output-preview .conditional-output-preview-body:before,
                .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd .conditional-output.conditional-output-preview .conditional-output-preview-body:before {
                  display: none; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula > kbd > div:last-child,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula > kbd > div:last-child {
              margin-bottom: 0; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div.contentformula:hover > kbd > p.conditional-criteria,
          .steps-list > li .panel .panel-body .step-body .step-instructions p.contentformula:hover > kbd > p.conditional-criteria {
            display: block; }
          .steps-list > li .panel .panel-body .step-body .step-instructions div.account-email-signature,
          .steps-list > li .panel .panel-body .step-body .step-instructions p.account-email-signature {
            border: 1px dashed #E0E0E0;
            padding: 1em;
            margin-left: 0;
            margin-top: 2em;
            position: relative;
            border-radius: 1rem;
            margin-bottom: 1em;
            opacity: 0.4;
            text-align: left; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.account-email-signature img,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.account-email-signature img {
              box-shadow: none;
              padding: 0; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.account-email-signature:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.account-email-signature:before {
              content: "Email only";
              font-size: 0.8em;
              color: #9E9E9E;
              display: inline-block;
              position: absolute;
              top: -2em;
              width: 100%; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.account-email-signature:hover,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.account-email-signature:hover {
              opacity: 1; }
            .steps-list > li .panel .panel-body .step-body .step-instructions div.account-email-signature:before,
            .steps-list > li .panel .panel-body .step-body .step-instructions p.account-email-signature:before {
              content: "Email only (Account Signature)"; }
          .steps-list > li .panel .panel-body .step-body .process-step-form {
            padding: 0.5em 1em;
            background: #F5F5F5;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
            .steps-list > li .panel .panel-body .step-body .process-step-form .panel-actions a.step-delete-form i {
              color: #D32F2F !important; }
            .steps-list > li .panel .panel-body .step-body .process-step-form > h5 {
              font-weight: bold;
              font-size: 1em;
              margin-top: 0.6em;
              margin-bottom: 1.5em; }
              .steps-list > li .panel .panel-body .step-body .process-step-form > h5 a {
                color: #424242; }
            .steps-list > li .panel .panel-body .step-body .process-step-form form img {
              padding: .5rem;
              background-color: #FFFFFF;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
              max-width: 100%; }
            .steps-list > li .panel .panel-body .step-body .process-step-form form a {
              pointer-events: initial;
              color: #3F51B5; }
              .steps-list > li .panel .panel-body .step-body .process-step-form form a:hover > img {
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
                border-color: #9E9E9E; }
            .steps-list > li .panel .panel-body .step-body .process-step-form form input[type="text"] {
              pointer-events: none;
              background-color: #e9ecef; }
            .steps-list > li .panel .panel-body .step-body .process-step-form form input[type="date"] {
              pointer-events: none;
              background-color: #e9ecef; }
            .steps-list > li .panel .panel-body .step-body .process-step-form form .tox.tox-tinymce {
              height: 140px !important; }
              .steps-list > li .panel .panel-body .step-body .process-step-form form .tox.tox-tinymce iframe {
                height: 100px !important; }
            .steps-list > li .panel .panel-body .step-body .process-step-form form div.filestack a.disabled {
              pointer-events: none; }
            .steps-list > li .panel .panel-body .step-body .process-step-form form .iframe-wrapper.iframe-boldsign {
              border: 1px dashed #E0E0E0;
              padding: 1em;
              margin-left: 0;
              margin-top: 2em;
              position: relative;
              border-radius: 1rem;
              margin-bottom: 1em;
              text-align: left;
              position: relative;
              height: auto; }
              .steps-list > li .panel .panel-body .step-body .process-step-form form .iframe-wrapper.iframe-boldsign img {
                box-shadow: none;
                padding: 0; }
              .steps-list > li .panel .panel-body .step-body .process-step-form form .iframe-wrapper.iframe-boldsign:before {
                font-size: 0.8em;
                color: #9E9E9E;
                display: inline-block;
                position: absolute;
                top: -2em;
                width: 100%; }
              .steps-list > li .panel .panel-body .step-body .process-step-form form .iframe-wrapper.iframe-boldsign:before {
                content: "App Widget"; }
              .steps-list > li .panel .panel-body .step-body .process-step-form form .iframe-wrapper.iframe-boldsign iframe {
                display: none; }
              .steps-list > li .panel .panel-body .step-body .process-step-form form .iframe-wrapper.iframe-boldsign:after {
                content: "Sample Signature";
                font-family: 'Over the Rainbow', cursive;
                font-size: 2rem;
                display: block; }
          .steps-list > li .panel .panel-body .step-body .step-actions {
            margin-top: 1.5em; }
          .steps-list > li .panel .panel-body .step-body .step-instructions h5 {
            font-weight: bold;
            font-size: 1em; }
          .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content {
            padding-left: 26px; }
            .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content img {
              padding: .5rem;
              background-color: #FFFFFF;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
              max-width: 100%; }
            .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content a {
              pointer-events: initial;
              color: #3F51B5; }
              .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content a:hover > img {
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
                border-color: #9E9E9E; }
            .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content ol,
            .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content ul {
              margin-bottom: 1em; }
              .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content ol li,
              .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content ul li {
                margin-bottom: 0;
                position: relative; }
            .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content kbd li {
              display: inline; }
            .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content .user-button {
              text-align: center;
              position: relative;
              margin: 1rem 0; }
              .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content .user-button a {
                display: inline-block;
                font-weight: 400;
                text-align: center;
                vertical-align: middle;
                user-select: none;
                border-width: 1px;
                border-style: solid;
                padding: 0.5rem 1rem;
                font-size: 1.25em;
                line-height: 1.5;
                border-radius: 0.3rem;
                animation-fill-mode: both;
                animation-duration: 8s;
                animation-name: shake;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
                color: #424242;
                background-color: #FFFFFF;
                border-color: #424242; }
                .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content .user-button a:hover {
                  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
                  animation-name: none; }
              .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content .user-button.user-button-test a {
                animation-name: none;
                background-color: #FFF3E0;
                border-color: #F57C00;
                position: relative; }
                .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content .user-button.user-button-test a:after {
                  content: 'Test';
                  margin-left: 0.5rem;
                  display: inline-block;
                  display: inline-block;
                  padding: .25em .4em;
                  font-size: 75%;
                  font-weight: 700;
                  line-height: 1;
                  text-align: center;
                  white-space: nowrap;
                  vertical-align: baseline;
                  padding-left: 0.6em;
                  padding-right: 0.6em;
                  position: relative;
                  top: -1px;
                  border-radius: 10rem;
                  background-color: #FF9800;
                  color: #FFFFFF; }
                .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content .user-button.user-button-test a.btn-working {
                  padding-left: 32px;
                  pointer-events: none;
                  color: #9E9E9E;
                  background-color: #E0E0E0;
                  border-color: #E0E0E0; }
                  .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content .user-button.user-button-test a.btn-working:before {
                    font-family: "FontAwesome";
                    content: "\f110" !important;
                    animation: fa-spin 2s infinite linear;
                    display: inline-block;
                    position: absolute;
                    top: 0.5em;
                    left: 10px;
                    color: #424242; }
            .steps-list > li .panel .panel-body .step-body .step-instructions .step-instructions-content .card .card-body h3 > kbd {
              float: right; }
          .steps-list > li .panel .panel-body .step-body .process-step-form .user-button {
            text-align: center;
            position: relative;
            margin: 1rem 0; }
            .steps-list > li .panel .panel-body .step-body .process-step-form .user-button a {
              display: inline-block;
              font-weight: 400;
              text-align: center;
              vertical-align: middle;
              user-select: none;
              border-width: 1px;
              border-style: solid;
              padding: 0.5rem 1rem;
              font-size: 1.25em;
              line-height: 1.5;
              border-radius: 0.3rem;
              animation-fill-mode: both;
              animation-duration: 8s;
              animation-name: shake;
              animation-iteration-count: infinite;
              animation-timing-function: ease-in-out;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
              color: #424242;
              background-color: #FFFFFF;
              border-color: #424242; }
              .steps-list > li .panel .panel-body .step-body .process-step-form .user-button a:hover {
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
                animation-name: none; }
            .steps-list > li .panel .panel-body .step-body .process-step-form .user-button.user-button-test a {
              animation-name: none;
              background-color: #FFF3E0;
              border-color: #F57C00;
              position: relative; }
              .steps-list > li .panel .panel-body .step-body .process-step-form .user-button.user-button-test a:after {
                content: 'Test';
                margin-left: 0.5rem;
                display: inline-block;
                display: inline-block;
                padding: .25em .4em;
                font-size: 75%;
                font-weight: 700;
                line-height: 1;
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline;
                padding-left: 0.6em;
                padding-right: 0.6em;
                position: relative;
                top: -1px;
                border-radius: 10rem;
                background-color: #FF9800;
                color: #FFFFFF; }
              .steps-list > li .panel .panel-body .step-body .process-step-form .user-button.user-button-test a.btn-working {
                padding-left: 32px;
                pointer-events: none;
                color: #9E9E9E;
                background-color: #E0E0E0;
                border-color: #E0E0E0; }
                .steps-list > li .panel .panel-body .step-body .process-step-form .user-button.user-button-test a.btn-working:before {
                  font-family: "FontAwesome";
                  content: "\f110" !important;
                  animation: fa-spin 2s infinite linear;
                  display: inline-block;
                  position: absolute;
                  top: 0.5em;
                  left: 10px;
                  color: #424242; }
          .steps-list > li .panel .panel-body .step-body .step-files {
            margin-top: 1em; }
            .steps-list > li .panel .panel-body .step-body .step-files h5 {
              font-weight: bold;
              font-size: 1em; }
            .steps-list > li .panel .panel-body .step-body .step-files .step-file-required {
              position: relative;
              top: 2px;
              padding-left: 5px; }
          .steps-list > li .panel .panel-body .step-body .step-forms form .form-actions {
            margin-top: 1em; }
            .steps-list > li .panel .panel-body .step-body .step-forms form .form-actions .btn-primary {
              margin-left: 0px;
              color: #424242;
              background-color: #FFFFFF;
              border-color: #424242;
              padding: 1px 5px;
              font-size: 12px;
              line-height: 1.5;
              border-radius: 3px; }
        .steps-list > li .panel .panel-body:hover {
          width: 100%; }
          .steps-list > li .panel .panel-body:hover > .panel-collapse > h4 > .step-number {
            animation-fill-mode: both;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-name: wobble;
            animation-timing-function: ease-in-out; }
          .steps-list > li .panel .panel-body:hover > h4 > .step-number {
            animation-fill-mode: both;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-name: wobble;
            animation-timing-function: ease-in-out; }
          .steps-list > li .panel .panel-body:hover .panel-actions.hide a {
            visibility: visible; }
        .steps-list > li .panel .panel-body[data-form-id='0'] a.step-preview-form {
          display: none; }
        .steps-list > li .panel .panel-body[data-is-editable='0'] {
          position: relative; }
          .steps-list > li .panel .panel-body[data-is-editable='0'] h4 .avatar .user {
            font-size: 1.1em; }
        .steps-list > li .panel .panel-body.step-group li {
          margin-bottom: 0; }
          .steps-list > li .panel .panel-body.step-group li .step-group-add {
            position: relative;
            font-size: 1.8em;
            text-align: center;
            height: 0px;
            margin-bottom: 0px; }
            .steps-list > li .panel .panel-body.step-group li .step-group-add .add-before {
              position: relative;
              display: inline;
              visibility: hidden;
              top: -14px;
              color: #BDBDBD;
              opacity: 0.3; }
            .steps-list > li .panel .panel-body.step-group li .step-group-add .add-after {
              position: relative;
              display: inline;
              bottom: -10px;
              color: #BDBDBD;
              opacity: 0.3; }
            .steps-list > li .panel .panel-body.step-group li .step-group-add:last-child {
              height: 25px;
              margin-bottom: 16px; }
          .steps-list > li .panel .panel-body.step-group li > .panel {
            position: relative; }
            .steps-list > li .panel .panel-body.step-group li > .panel > .panel-body > .panel-collapse > .panel-collapse-action {
              float: left;
              padding-right: 15px;
              top: 17px;
              height: 35px;
              position: relative; }
            .steps-list > li .panel .panel-body.step-group li > .panel > .panel-body > .panel-collapse > .panel-actions > a {
              visibility: hidden; }
            .steps-list > li .panel .panel-body.step-group li > .panel > .panel-body > .panel-collapse > .panel-actions > .btn-group {
              visibility: hidden; }
            .steps-list > li .panel .panel-body.step-group li > .panel:hover {
              box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
              .steps-list > li .panel .panel-body.step-group li > .panel:hover > .panel-body > .panel-collapse .drag-handle-container {
                visibility: visible; }
              .steps-list > li .panel .panel-body.step-group li > .panel:hover > .panel-body > .panel-collapse > .panel-actions > a {
                visibility: visible; }
              .steps-list > li .panel .panel-body.step-group li > .panel:hover > .panel-body > .panel-collapse > .panel-actions > .btn-group {
                visibility: visible; }
          .steps-list > li .panel .panel-body.step-group li[data-order='1'] .step-group-add:first-child {
            height: 25px;
            margin-top: 20px;
            border-bottom-width: 0px; }
            .steps-list > li .panel .panel-body.step-group li[data-order='1'] .step-group-add:first-child .add-before {
              visibility: visible; }
          .steps-list > li .panel .panel-body.step-group li[data-order='1']:hover .step-group-add:first-child .add-before,
          .steps-list > li .panel .panel-body.step-group li[data-order='1']:hover .step-group-add:first-child .add-after {
            opacity: 1;
            color: #3F51B5; }
          .steps-list > li .panel .panel-body.step-group li:hover .step-group-add:last-child .add-after {
            opacity: 1;
            color: #3F51B5; }
        .steps-list > li .panel .panel-body.step-group:hover .drag-handle-container {
          visibility: visible; }
      .steps-list > li .panel.step .modal #fd-412-form label[for$="_step_name"]:before {
        content: "* \f0e0";
        font-family: "FontAwesome";
        margin-right: 5px; }
      .steps-list > li .panel.step .modal #fd-412-form label[for$="_11_step_param_3"]:before {
        content: "\f0e0";
        font-family: "FontAwesome";
        margin-right: 5px; }
      .steps-list > li .panel.step .modal #fd-412-form label[for$="_12_step_param_3"]:before {
        content: "\f0e0";
        font-family: "FontAwesome";
        margin-right: 5px; }
      .steps-list > li .panel.step .modal #fd-412-form label[for$="_13_step_param_1"]:before {
        content: "\f0e0";
        font-family: "FontAwesome";
        margin-right: 5px; }
      .steps-list > li .panel.step .modal #fd-435-form label[for$="_notify_from"]:before {
        content: "* \f0e0";
        font-family: "FontAwesome";
        margin-right: 5px; }
      .steps-list > li .panel.step .modal #fd-435-form label[for$="_notification_owner"]:before {
        content: "\f0e0";
        font-family: "FontAwesome";
        margin-right: 5px; }
      .steps-list > li .panel.step .modal #fd-435-form label[for$="_notification_description"]:before {
        content: "\f0e0";
        font-family: "FontAwesome";
        margin-right: 5px; }
      .steps-list > li .panel.step[data-step-type="1"] h4 .step-type:before {
        content: "\f0e0"; }
      .steps-list > li .panel.step[data-step-type="2"] h4 .step-type:before {
        content: "\f08e"; }
      .steps-list > li .panel.step[data-step-type="3"] h4 .step-type:before {
        content: "\f0e3"; }
      .steps-list > li .panel.step[data-step-type="5"] h4 .step-type {
        display: inline; }
        .steps-list > li .panel.step[data-step-type="5"] h4 .step-type:before {
          content: "\f017"; }
      .steps-list > li .panel.step[data-step-type="6"] h4 .step-type {
        display: inline; }
        .steps-list > li .panel.step[data-step-type="6"] h4 .step-type:before {
          content: "\f075"; }
      .steps-list > li .panel.step.step-rule-targeted:after {
        font-family: "FontAwesome";
        font-size: 1.5rem;
        color: #9E9E9E;
        display: inline-block;
        position: absolute;
        top: 0.75rem;
        left: 0.75rem; }
      .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-skipped {
        border-style: dashed;
        border-width: 1px;
        border-color: #BDBDBD;
        box-shadow: none !important; }
        .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-skipped:after {
          content: "\f00d"; }
        .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-skipped > .panel-body {
          opacity: 0.2;
          background-color: #BDBDBD;
          padding: 0.25em 1.25rem .25em 1.25em; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-skipped > .panel-body .panel-collapse .panel-collapse-action {
            display: none; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-skipped > .panel-body .panel-collapse .drag-handle-container {
            display: none; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-skipped > .panel-body .panel-collapse h4 {
            margin-top: 10px;
            top: 0; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-skipped > .panel-body .panel-collapse .panel-actions {
            display: none; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-skipped > .panel-body .panel-collapse .panel-toggles {
            display: none; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-skipped > .panel-body .collapse {
            display: none; }
      .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-completed, .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-executed {
        border-style: dashed;
        border-width: 1px;
        border-color: #388E3C;
        box-shadow: none !important; }
        .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-completed:after, .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-executed:after {
          color: #43A047;
          content: "\f00c"; }
        .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-completed > .panel-body, .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-executed > .panel-body {
          opacity: 0.2;
          background-color: #43A047;
          padding: 0.25em 1.25rem .25em 1.25em; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-completed > .panel-body .panel-collapse .panel-collapse-action, .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-executed > .panel-body .panel-collapse .panel-collapse-action {
            display: none; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-completed > .panel-body .panel-collapse .drag-handle-container, .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-executed > .panel-body .panel-collapse .drag-handle-container {
            display: none; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-completed > .panel-body .panel-collapse h4, .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-executed > .panel-body .panel-collapse h4 {
            margin-top: 10px;
            top: 0; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-completed > .panel-body .panel-collapse .panel-actions, .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-executed > .panel-body .panel-collapse .panel-actions {
            display: none; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-completed > .panel-body .panel-collapse .panel-toggles, .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-executed > .panel-body .panel-collapse .panel-toggles {
            display: none; }
          .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-completed > .panel-body .collapse, .steps-list > li .panel.step.step-rule-targeted.step-rule-targeted-executed > .panel-body .collapse {
            display: none; }
    .steps-list > li > .panel {
      /*width: 50%;*/
      /*margin: auto; */
      position: relative; }
      .steps-list > li > .panel > .panel-body {
        /*padding-bottom: 3em;*/ }
        .steps-list > li > .panel > .panel-body > .panel-collapse > .panel-collapse-action {
          float: left;
          padding-right: 15px;
          top: 17px;
          height: 35px;
          position: relative; }
        .steps-list > li > .panel > .panel-body > .panel-collapse > .panel-actions {
          /*float: none;
						margin-left: 0;
						margin-right: 1em;
						position: absolute;
						bottom: 0;
						right: 0;*/ }
          .steps-list > li > .panel > .panel-body > .panel-collapse > .panel-actions > a {
            visibility: hidden; }
          .steps-list > li > .panel > .panel-body > .panel-collapse > .panel-actions > .btn-group {
            visibility: hidden; }
      .steps-list > li > .panel:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        /*transform: translate3d(0, -2px, 0);    */ }
        .steps-list > li > .panel:hover > .panel-body > .panel-collapse .drag-handle-container {
          visibility: visible; }
        .steps-list > li > .panel:hover > .panel-body > .panel-collapse > .panel-actions {
          /*float: right;
							margin-left: 3em;
							margin-right: -1em;
							position: unset;*/ }
          .steps-list > li > .panel:hover > .panel-body > .panel-collapse > .panel-actions > a {
            visibility: visible; }
          .steps-list > li > .panel:hover > .panel-body > .panel-collapse > .panel-actions > .btn-group {
            visibility: visible; }
        .steps-list > li > .panel:hover .panel-body > .step-body {
          /*display: block;*/
          /*transform: max-height;*/
          /*transform-origin: top;*/ }
      .steps-list > li > .panel[data-is-collapsed='0'] > .panel-body > .panel-collapse .drag-handle-container {
        visibility: visible; }
      .steps-list > li > .panel[data-is-collapsed='0'] > .panel-body > .panel-collapse > .panel-actions > a {
        display: inline; }
      .steps-list > li > .panel[data-is-collapsed='0'] > .panel-body > .panel-collapse > .panel-actions > .btn-group {
        display: inline-flex; }
    .steps-list > li[data-order='1'] .step-add:first-child {
      height: 45px;
      margin-top: 40px;
      border-bottom-width: 0px;
      /*border-top: solid 2px $border-color;*/ }
    .steps-list > li[data-order='1']:hover .step-add:first-child {
      visibility: visible; }
    .steps-list > li:hover .step-add:last-child .add-after {
      color: #3F51B5;
      opacity: 1; }
    .steps-list > li:after {
      content: "\f078";
      display: block;
      font-family: 'FontAwesome';
      font-size: 2em;
      text-align: center;
      color: #000000;
      top: -1em;
      position: relative;
      animation-name: slideDown;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      animation-timing-function: linear; }
  .steps-list:before {
    content: " ";
    width: 1px;
    height: 100%;
    border-left: solid 6px #E0E0E0;
    position: absolute;
    left: calc(50% - 3px);
    top: 0;
    display: block; }
  .steps-list[data-is-editable='1'] li {
    pointer-events: none; }
  .steps-list[data-steps-count='1'] li .panel .panel-body .panel-actions a.fa-times-circle {
    color: #9E9E9E;
    pointer-events: none; }
  .steps-list[data-steps-count='1'] li .panel .panel-body .panel-actions a.step-delete-form i {
    color: #9E9E9E;
    pointer-events: none; }
  .steps-list.step-0 {
    margin-bottom: 0;
    width: 800px; }
    .steps-list.step-0 li .container {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important; }
      .steps-list.step-0 li .container .row #process-create-ask-form > .panel-body {
        background-color: #F5F5F5;
        background-size: 2rem 2rem;
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); }
        .steps-list.step-0 li .container .row #process-create-ask-form > .panel-body > .panel-collapse > .panel-collapse-action {
          top: 15px;
          position: relative; }
        .steps-list.step-0 li .container .row #process-create-ask-form > .panel-body > .panel-collapse h4 .step-number {
          color: #FFFFFF;
          background-color: #F44336;
          border-width: 0; }
  .steps-list.step-z {
    margin-bottom: 2rem;
    width: 800px; }
    .steps-list.step-z > li .container {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important; }
      .steps-list.step-z > li .container .row {
        margin-bottom: 0; }
        .steps-list.step-z > li .container .row #process-stepz > .panel-body {
          background-color: #F5F5F5;
          background-size: 2rem 2rem;
          background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); }
          .steps-list.step-z > li .container .row #process-stepz > .panel-body h4 {
            margin-top: 1.4rem; }
            .steps-list.step-z > li .container .row #process-stepz > .panel-body h4 .step-number {
              color: #FFFFFF;
              background-color: #F44336;
              border-width: 0; }
          .steps-list.step-z > li .container .row #process-stepz > .panel-body .panel-toggles {
            height: 1em; }
    .steps-list.step-z > li:after {
      display: none;
      animation-name: none; }
  .steps-list.js-sortable-list {
    margin-bottom: 0;
    /*
		> li:last-child
		{
			&:after
			{
				display: none;
				animation-name: none;
			}
		}
		*/ }

.modal .modal-body form .control-group.step-type table {
  margin: 3px auto; }
  .modal .modal-body form .control-group.step-type table td label {
    text-align: center;
    padding: 0.5em .75em;
    margin: 0em .75em 1em .75em;
    width: 108px;
    height: 140px;
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    font-size: 90%;
    line-height: 1.25em; }
    .modal .modal-body form .control-group.step-type table td label input {
      visibility: hidden;
      width: 1px;
      height: 1px;
      float: none; }
      .modal .modal-body form .control-group.step-type table td label input:before {
        font-family: "FontAwesome";
        font-size: 3em;
        display: block;
        text-align: center;
        visibility: visible;
        position: relative;
        width: 80px;
        top: 0.9em;
        z-index: -1;
        color: #BDBDBD; }
      .modal .modal-body form .control-group.step-type table td label input[value="0"]:before {
        content: "\f046"; }
      .modal .modal-body form .control-group.step-type table td label input[value="1"]:before {
        content: "\f0e0"; }
      .modal .modal-body form .control-group.step-type table td label input[value="2"]:before {
        content: "\f08e"; }
      .modal .modal-body form .control-group.step-type table td label input[value="3"]:before {
        content: "\f0e3"; }
      .modal .modal-body form .control-group.step-type table td label input[value="5"]:before {
        content: "\f017"; }
      .modal .modal-body form .control-group.step-type table td label input[value="6"]:before {
        content: "\f075"; }
    .modal .modal-body form .control-group.step-type table td label:hover {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      background-color: inherit; }
  .modal .modal-body form .control-group.step-type table td.highlight {
    background-color: inherit; }
    .modal .modal-body form .control-group.step-type table td.highlight label {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      font-weight: bold; }
      .modal .modal-body form .control-group.step-type table td.highlight label input:before {
        color: #3F51B5; }

.select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(6),
.select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(6),
.select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(6),
.select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(6) {
  position: relative;
  margin-bottom: 30px; }
  .select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(6):after,
  .select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(6):after,
  .select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(6):after,
  .select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(6):after {
    content: "Add New Form Field Template";
    text-transform: uppercase;
    color: #9E9E9E;
    font-size: 0.7rem;
    display: block;
    position: absolute;
    left: 0;
    padding-left: 30px;
    margin-top: 10px; }

.select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(1),
.select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(2),
.select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(3),
.select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(4),
.select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(5),
.select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(1),
.select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(2),
.select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(3),
.select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(4),
.select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(5),
.select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(1),
.select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(2),
.select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(3),
.select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(4),
.select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(5),
.select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(1),
.select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(2),
.select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(3),
.select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(4),
.select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(5) {
  padding-left: 48px !important; }
  .select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(1):before,
  .select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(2):before,
  .select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(3):before,
  .select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(4):before,
  .select2-container ul[id$="step_owner_contact_email_field_code-results"] ul.select2-results__options--nested li:nth-last-child(5):before,
  .select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(1):before,
  .select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(2):before,
  .select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(3):before,
  .select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(4):before,
  .select2-container ul[id$="step_owner_contact_first_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(5):before,
  .select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(1):before,
  .select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(2):before,
  .select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(3):before,
  .select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(4):before,
  .select2-container ul[id$="step_owner_contact_last_name_field_code-results"] ul.select2-results__options--nested li:nth-last-child(5):before,
  .select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(1):before,
  .select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(2):before,
  .select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(3):before,
  .select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(4):before,
  .select2-container ul[id$="step_owner_contact_phone_field_code-results"] ul.select2-results__options--nested li:nth-last-child(5):before {
    content: "\f055";
    margin-right: 5px;
    font-family: "FontAwesome"; }

.process-step-update-modal-close:before {
  content: "×";
  text-align: center; }

.process-step-add-modal-close:before {
  content: "×";
  text-align: center; }

.dragging .timeline-step-edit-preview {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border: solid 3px #66afe9;
  width: 960px; }

[data-is-readonly='1'] .steps-list > li .panel {
  margin-bottom: 3em;
  padding-bottom: 0; }
  [data-is-readonly='1'] .steps-list > li .panel .panel-body {
    min-height: initial; }
    [data-is-readonly='1'] .steps-list > li .panel .panel-body .collapse {
      margin-top: 3em; }
    [data-is-readonly='1'] .steps-list > li .panel .panel-body .panel-actions a.step-delete i {
      color: #9E9E9E !important;
      pointer-events: none; }
    [data-is-readonly='1'] .steps-list > li .panel .panel-body .panel-actions a.step-delete-form i {
      color: #9E9E9E !important;
      pointer-events: none; }
    [data-is-readonly='1'] .steps-list > li .panel .panel-body .process-step-form a.cell-numericexpandcollapse {
      color: #424242 !important;
      pointer-events: initial; }
    [data-is-readonly='1'] .steps-list > li .panel .panel-body .drag-handle-container {
      display: none; }
  [data-is-readonly='1'] .steps-list > li .panel:hover {
    /*width: 100%;*/ }
    [data-is-readonly='1'] .steps-list > li .panel:hover > .panel-body > .panel-collapse .drag-handle-container {
      visibility: visible; }
    [data-is-readonly='1'] .steps-list > li .panel:hover > .panel-body > .panel-collapse > .panel-actions > a[data-ignore-readonly-mode="0"] {
      display: none; }
    [data-is-readonly='1'] .steps-list > li .panel:hover > .panel-body > .panel-collapse > .panel-actions > .btn-group {
      visibility: hidden; }
  [data-is-readonly='1'] .steps-list > li .panel.step .panel-body h4 {
    top: 1.2em; }

[data-is-readonly='1'] .steps-list.step-0 > li .panel .panel-body h4 {
  top: 0; }

@media (max-width: 1199.98px) {
  .steps-list {
    width: 100%; }
    .steps-list li .panel .panel-body .panel-actions {
      margin-left: 0;
      margin-bottom: 1em; } }

@keyframes expand {
  0% {
    transform: scale(0.1);
    opacity: 0; }
  60% {
    transform: scale(1.2);
    opacity: 1; }
  100% {
    transform: scale(1); } }

@keyframes slideDown {
  0% {
    transform: translate3d(0, -90%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 500%, 0); } }

/* 
Progress: Pipeline

Wrapper for Bootstrap panels

Markup:
<div class="panel panel-progress {{modifier_class}}" style="width:600px;">
	<div class="panel-heading">Panel Header</div>
	<div class="panel-body">
		<h4>Panel Title</h4>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Curabitur placerat felis tellus, ut consequat urna euismod sit amet.
		</p>
	</div>
</div>

.panel-request		- &nbsp;
.panel-bundle		- &nbsp;
.panel-workflow		- &nbsp;
.panel-team			- &nbsp;

Weight: 100

Styleguide ElementPanels.Progress
*/
.panel.panel-progress.panel-request .panel-heading {
  background-color: #43A047;
  border-color: #212121; }

.panel.panel-progress.panel-bundle .panel-heading {
  background-color: #FB8C00;
  border-color: #212121; }

.panel.panel-progress.panel-workflow .panel-heading {
  background-color: #8E24AA;
  border-color: #212121; }

.panel.panel-progress.panel-team .panel-heading {
  background-color: #1E88E5;
  border-color: #212121; }

#progress-meter h3 {
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0; }

#progress-meter .chart {
  position: relative; }

#progress-meter .comp-percentage {
  position: absolute;
  left: 43%;
  top: 42%;
  font-size: 1.4rem;
  font-weight: bold; }

#progress-meter .panel {
  margin-bottom: 0px; }

div.progress-title {
  margin-left: 0 !important;
  font-size: 0.8em;
  color: #424242;
  font-weight: bold; }
  div.progress-title:before {
    content: "Progress: ";
    font-weight: normal;
    color: #9E9E9E; }

div.progress-tracker {
  margin-left: 0 !important;
  position: relative;
  margin-bottom: 2rem; }
  div.progress-tracker div {
    margin-left: 0; }
  div.progress-tracker .progress {
    position: relative;
    height: 0.5rem !important;
    top: 0.35rem; }
  div.progress-tracker .progress-tracker-items {
    position: absolute;
    width: 100%;
    margin-left: 0 !important;
    top: 0; }
    div.progress-tracker .progress-tracker-items .progress-tracker-item {
      margin: 0 !important;
      position: absolute; }
      div.progress-tracker .progress-tracker-items .progress-tracker-item .fa:before {
        content: "\f111";
        color: #BDBDBD;
        font-size: 1.2rem;
        position: relative; }
      div.progress-tracker .progress-tracker-items .progress-tracker-item.progress-tracker-item-complete .fa:before {
        content: "\f058";
        color: #000000; }
      div.progress-tracker .progress-tracker-items .progress-tracker-item.progress-tracker-item-current .fa:before {
        color: #E53935;
        animation-name: flash;
        animation-duration: 3s;
        animation-iteration-count: infinite; }
      div.progress-tracker .progress-tracker-items .progress-tracker-item:first-child {
        left: 0;
        right: unset; }
      div.progress-tracker .progress-tracker-items .progress-tracker-item:last-child {
        left: unset;
        right: 0; }
  div.progress-tracker + p:empty {
    display: none; }

#quote-panel-container {
  padding-top: 2em; }
  #quote-panel-container #quote-panel {
    background-color: #E3F2FD;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    margin-left: 85px; }
    #quote-panel-container #quote-panel .idea-icon-circle {
      background-color: #1E88E5;
      border-radius: 18px;
      padding: .3em .5em 0.1em;
      margin: 0 .2em; }
      #quote-panel-container #quote-panel .idea-icon-circle i {
        color: #FFEB3B;
        font-size: 1.3rem;
        margin-top: .1em; }
    #quote-panel-container #quote-panel .quote-block {
      border-left: #ddd 1px solid; }
      #quote-panel-container #quote-panel .quote-block p {
        margin-top: .8em; }

table.table-cpq tbody tr td {
  word-break: break-word; }

/* 
Component: React Select

This is a select component based on [`React Select`](https://react-select.com/home).

<span class="text-highlight">Note, React Select is not meant to be used in a form.</span> React Select element is considered an Action Link. It is not a form because no `Submit` button is needed and no `<form>` tag is needed.

<span class="text-highlight">Note, the HTML and CSS is auto-generated by the React component, so do NOT recreate it.</span>

Markup: select-react.hbs

Weight: 100

Styleguide ComponentReactSelect
*/
/* 
Open

Markup: select-react-open.hbs

Weight: 100

Styleguide ComponentReactSelect.Open
*/
/* 
No Options

Markup: select-react-nooptions.hbs

Weight: 100

Styleguide ComponentReactSelect.NoOptions
*/
/* 
Multi-Select

Markup: select-react-multiselect.hbs

Weight: 101

Styleguide ComponentReactSelect.MultiSelect
*/
/* 
Disabled

Markup: select-react-disabled.hbs

Weight: 102

Styleguide ComponentReactSelect.Disabled
*/
/* 
Contact/Team Selector

### Standard UX Behavior

- <span class="text-highlight">On click, the options will NOT autoload</span>. Instead, the user will see a message saying they must type to see available options.
- Users must type at least 2 characters before options appear. Otherwise, there are too many records to load, and it could freeze the dropdown.

Markup: select-react-contactteam.hbs

Weight: 103

Styleguide ComponentReactSelect.ContactTeamSelector
*/
.select__control {
  align-items: center;
  background-color: #FFFFFF;
  cursor: default;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: 38px;
  position: relative;
  border: solid 1px #E0E0E0;
  border-radius: 0.5rem; }
  .select__control.select__control--is-disabled {
    background-color: #EEEEEE; }
  .select__control.select__control--is-focused {
    border-color: #2684FF;
    box-shadow: 0 0 0 1px #2684FF; }
  .select__control .select__value-container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    flex: 1 1 0%;
    padding: 2px 8px; }
    .select__control .select__value-container .select__multi-value {
      background-color: #E0E0E0;
      display: flex;
      min-width: 0px;
      border-radius: 0.5rem;
      margin: 2px; }
      .select__control .select__value-container .select__multi-value .select__multi-value__label {
        color: #424242;
        font-size: 90%;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 0.5rem;
        overflow: hidden;
        padding: 3px 3px 3px 6px; }
      .select__control .select__value-container .select__multi-value .select__multi-value__remove {
        align-items: center;
        display: flex;
        padding: 0 4px;
        box-sizing: border-box;
        border-radius: 0.5rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        cursor: pointer; }
        .select__control .select__value-container .select__multi-value .select__multi-value__remove:hover {
          background-color: #EF9A9A; }
  .select__control .select__indicators {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-shrink: 0; }
    .select__control .select__indicators .select__indicator {
      display: flex;
      box-sizing: border-box;
      padding: 8px;
      opacity: 0.2; }
      .select__control .select__indicators .select__indicator:hover {
        opacity: 1; }
    .select__control .select__indicators .select__indicator-separator {
      align-self: stretch;
      background-color: #E0E0E0;
      margin: 8px 0;
      width: 1px;
      box-sizing: border-box; }

.select__menu {
  top: 100%;
  background-color: white;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  margin-bottom: 8px;
  margin-top: 8px;
  width: 100%;
  z-index: 1;
  box-sizing: border-box; }
  .select__menu .select__option {
    background-color: transparent;
    color: inherit;
    cursor: default;
    display: block;
    font-size: inherit;
    padding: 8px 12px;
    width: 100%;
    user-select: none;
    box-sizing: border-box; }
    .select__menu .select__option.select__option--is-focused {
      background-color: #DEEBFF; }
  .select__menu .select__menu-notice {
    color: #999999;
    text-align: center;
    box-sizing: border-box;
    padding: 8px 12px; }

.react-select {
  text-align: left; }
  .react-select .react-select__control.react-select__control--is-focused {
    border-color: #66afe9;
    box-shadow: 0 0 0 1px #2684FF; }
  .react-select .react-select__control .react-select__indicator-separator {
    display: none; }
  .react-select .react-select__control .react-select__multi-value__label kbd {
    background-color: #F5F5F5; }
  .react-select .react-select__menu {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    border-radius: 0; }
    .react-select .react-select__menu .react-select__option {
      font-weight: normal; }
    .react-select .react-select__menu .react-select__group .react-select__option {
      padding-left: 30px; }

body.dark .react-select .react-select__control {
  background-color: #424242;
  color: #E0E0E0;
  border-color: #616161 !important; }
  body.dark .react-select .react-select__control .react-select__input input {
    color: #E0E0E0 !important; }

body.dark .react-select .react-select__menu {
  background-color: #424242;
  color: #E0E0E0; }
  body.dark .react-select .react-select__menu .react-select__menu-list .react-select__option--is-focused {
    background-color: #0D47A1; }

.process-labels {
  padding: 0;
  margin: 0;
  list-style-type: none; }
  .process-labels li {
    margin-left: 0; }
    .process-labels li .row {
      margin-bottom: 0 !important; }
      .process-labels li .row .col-md-1 {
        max-width: 60px;
        text-align: center;
        padding: 0; }
    .process-labels li:last-child {
      padding-bottom: 0; }

.followers .individual-follower-row .panel-card .user-name a.delete-follower {
  display: none;
  pointer-events: none; }
  .followers .individual-follower-row .panel-card .user-name a.delete-follower[data-is-requester="1"] {
    display: inline;
    visibility: hidden;
    pointer-events: initial; }
  .followers .individual-follower-row .panel-card .user-name a.delete-follower[data-is-step-owner="1"] {
    display: inline;
    visibility: hidden;
    pointer-events: initial; }
  .followers .individual-follower-row .panel-card .user-name a.delete-follower[data-is-workflow-owner="1"] {
    display: inline;
    visibility: hidden;
    pointer-events: initial; }
  .followers .individual-follower-row .panel-card .user-name a.delete-follower[data-is-self="1"] {
    display: inline;
    visibility: hidden;
    pointer-events: initial; }
  .followers .individual-follower-row .panel-card .user-name a.delete-follower[data-is-other="1"] {
    display: inline;
    visibility: hidden;
    pointer-events: initial; }

.followers .individual-follower-row .panel-card:hover .user-name a.delete-follower[data-is-requester="1"] {
  visibility: visible; }

.followers .individual-follower-row .panel-card:hover .user-name a.delete-follower[data-is-step-owner="1"] {
  visibility: visible; }

.followers .individual-follower-row .panel-card:hover .user-name a.delete-follower[data-is-workflow-owner="1"] {
  visibility: visible; }

.followers .individual-follower-row .panel-card:hover .user-name a.delete-follower[data-is-self="1"] {
  visibility: visible; }

.followers .individual-follower-row .panel-card:hover .user-name a.delete-follower[data-is-other="1"] {
  visibility: visible; }

/* 
With Form (Empty)

### Standard UX

- An Ask Step's step form is embedded within a step.
- <span class="text-highlight">If the step form has required fields, the `Complete` and `Save + Complete` buttons will be disabled until all required fields are populated</span>.

### Components

- [`Form`](section-componentform.html)

Markup: request-step-form.hbs

Weight: 100

Styleguide ComponentAskStep.FormEmpty
*/
/* 
With Form (Populated)

### Standard UX

- Once all the required fields are populated, the `Complete` and `Save + Complete` buttons will be enabled.

### Components

- [`Form`](section-componentform.html)

Markup: request-step-form-filled.hbs

Weight: 100

Styleguide ComponentAskStep.FormPopulated
*/
/* 
With Form Data

### Standard UX

- After an Ask Step's step form is complete and submitted, all of the form data is displayed within the completed step.
- Form data under a heading are indented.

Markup: request-step-form-data.hbs

Weight: 100

Styleguide ComponentAskStep.FormData
*/
/* 
With Form w/ Headings

### Standard UX

- Form fields under headings are indented.
- Heading expand/collapse links are black (not blue).
- Clicking `Next` will expand the next heading. It will not collapse any headings.

### Components

- [`Form`](section-componentform.html)

Markup: request-step-form-headings.hbs

Weight: 100

Styleguide ComponentAskStep.FormWithHeadings
*/
.panel .request-steps .form-field-label,
.panel .request-forms .form-field-label,
.panel .request-summary .form-field-label {
  margin-left: 26px; }

.panel .request-steps .form-entries,
.panel .request-forms .form-entries,
.panel .request-summary .form-entries {
  /* margin-left: 26px; */ }
  .panel .request-steps .form-entries .form-field,
  .panel .request-forms .form-entries .form-field,
  .panel .request-summary .form-entries .form-field {
    margin-bottom: 0.5em; }
    .panel .request-steps .form-entries .form-field .field-value,
    .panel .request-forms .form-entries .form-field .field-value,
    .panel .request-summary .form-entries .form-field .field-value {
      padding-left: 26px;
      font-size: 0.8rem;
      cursor: pointer; }
      .panel .request-steps .form-entries .form-field .field-value p,
      .panel .request-forms .form-entries .form-field .field-value p,
      .panel .request-summary .form-entries .form-field .field-value p {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem; }
      .panel .request-steps .form-entries .form-field .field-value ul,
      .panel .request-steps .form-entries .form-field .field-value ol,
      .panel .request-forms .form-entries .form-field .field-value ul,
      .panel .request-forms .form-entries .form-field .field-value ol,
      .panel .request-summary .form-entries .form-field .field-value ul,
      .panel .request-summary .form-entries .form-field .field-value ol {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem; }

.panel .request-steps .step-forms form .js-ajaxformpostback,
.panel .request-forms .step-forms form .js-ajaxformpostback,
.panel .request-summary .step-forms form .js-ajaxformpostback {
  margin-bottom: 2em; }

.panel .request-steps .step-forms form h3,
.panel .request-forms .step-forms form h3,
.panel .request-summary .step-forms form h3 {
  font-size: 1rem;
  font-weight: bold; }

.panel .request-steps .step-forms form h4,
.panel .request-forms .step-forms form h4,
.panel .request-summary .step-forms form h4 {
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  border-top: 1px solid #E0E0E0;
  border-top-style: dashed;
  padding-top: 0.5rem;
  text-transform: uppercase;
  color: #9E9E9E; }

.panel .request-steps .step-forms form .panel-collapse,
.panel .request-forms .step-forms form .panel-collapse,
.panel .request-summary .step-forms form .panel-collapse {
  margin-left: 26px; }

.panel .request-steps .step-forms form .panel-actions,
.panel .request-forms .step-forms form .panel-actions,
.panel .request-summary .step-forms form .panel-actions {
  float: none;
  margin-bottom: 0;
  right: 0;
  top: -2em; }
  .panel .request-steps .step-forms form .panel-actions.stage-actions,
  .panel .request-forms .step-forms form .panel-actions.stage-actions,
  .panel .request-summary .step-forms form .panel-actions.stage-actions {
    position: absolute; }

.panel .request-forms form {
  margin-left: 44px; }
  .panel .request-forms form .js-ajaxformpostback {
    margin-bottom: 2em; }
  .panel .request-forms form h3 {
    font-size: 1rem;
    font-weight: bold; }
  .panel .request-forms form .panel-collapse {
    margin-left: 26px; }
  .panel .request-forms form .panel-actions {
    margin-bottom: 0; }

.panel .request-summary > .form-field-label {
  margin-left: 0; }

.panel .request-summary h4 {
  font-weight: bold;
  font-size: 1em;
  margin-top: 1.5em; }

.workflow-request .panel form .js-ajaxformpostback {
  margin-bottom: 2em; }

.workflow-request .panel form h3 {
  font-size: 1rem;
  font-weight: bold; }

.workflow-request .panel form .panel-collapse {
  margin-left: 26px; }

/* 
Component: Ask Steps

### Standard Color Indicators
- `Open` step numbers are in pink with black text
    - Current `Open` step number is in red with white text with an animated shake
- `Canceled` and `Skipped` step numbers are in light gray with white text
- `Completed` step numbers are in green with white text

### Standard Icons
- `Completed` steps have a green <i class="fa fa-check"></i> indicator after the step name

Markup: request-steps.hbs

Weight: 100

Styleguide ComponentAskSteps
*/
/* 
With Confidential Steps

### Standard Icons
- Confidential steps have a <i class="fa fa-lock"></i> indicator after the step name and before the check indicator

Markup: request-steps-confidential.hbs

Styleguide ComponentAskSteps.Confidential
*/
/* 
With Due Dates

### Standard UX Behavior
- Due dates are displayed as right-justified preceded with a <i class="fa fa-clock-o"></i>
- Current `Open` due date is in red

Markup: request-steps-duedates.hbs

Styleguide ComponentAskSteps.DueDates
*/
/* 
With Skipped Steps

Markup: request-steps-skipped.hbs

Styleguide ComponentAskSteps.Skipped
*/
#request-view-step-tile #addAdhocStepLink:before {
  font-family: "FontAwesome";
  content: "\f055";
  padding: 0 0.2em; }

#request-view-step-tile #addAdhocStepLink:after {
  content: "Add Step"; }

#request-view-step-tile #requestStepsExpandAll:before {
  font-family: 'FontAwesome';
  content: "\f103"; }

#request-view-step-tile #requestStepsExpandAll:after {
  content: " Expand All"; }

#request-view-step-tile #requestStepsExpandAll[data-is-expanded="1"]:before {
  content: "\f102"; }

#request-view-step-tile #requestStepsExpandAll[data-is-expanded="1"]:after {
  content: " Collapse All"; }

#request-view-step-tile .step {
  padding: 1em 0;
  border-width: 1px;
  border-top: 1px solid #E0E0E0;
  box-shadow: none;
  margin-bottom: 0; }
  #request-view-step-tile .step > .panel-heading {
    padding: 0;
    border-bottom-width: 0;
    background-color: inherit;
    font-weight: normal; }
    #request-view-step-tile .step > .panel-heading .badge {
      background-color: #FFFFFF; }
      #request-view-step-tile .step > .panel-heading .badge.badge-step-default {
        margin-top: 0.2em;
        color: #424242;
        background-color: #FFCDD2;
        border-width: 0px; }
    #request-view-step-tile .step > .panel-heading .status-border {
      float: left;
      width: 0px;
      height: 30px;
      margin: -3px 0px 0 35px; }
      #request-view-step-tile .step > .panel-heading .status-border:before {
        font-family: 'FontAwesome';
        content: "\f107";
        cursor: pointer;
        left: -24px;
        position: relative;
        float: left;
        color: #9E9E9E; }
    #request-view-step-tile .step > .panel-heading .step-avatar {
      font-weight: normal; }
      #request-view-step-tile .step > .panel-heading .step-avatar a:hover .avatar {
        height: 36px;
        width: 36px;
        top: -7px;
        left: -4px; }
        #request-view-step-tile .step > .panel-heading .step-avatar a:hover .avatar img {
          height: 36px;
          width: 36px; }
    #request-view-step-tile .step > .panel-heading .panel-actions {
      right: 0; }
      #request-view-step-tile .step > .panel-heading .panel-actions .step-duedates {
        float: right;
        font-size: 0.8em;
        color: #9E9E9E; }
        #request-view-step-tile .step > .panel-heading .panel-actions .step-duedates .date:before {
          font-family: "FontAwesome";
          content: "\f017";
          margin-left: 0.3em;
          margin-right: 0.3em; }
      #request-view-step-tile .step > .panel-heading .panel-actions .step-activity-feeds {
        float: right; }
        #request-view-step-tile .step > .panel-heading .panel-actions .step-activity-feeds a {
          color: #9E9E9E; }
  #request-view-step-tile .step .step-name {
    color: #424242; }
    #request-view-step-tile .step .step-name .fa {
      color: #424242;
      padding: 0 0.5em;
      font-size: 0.9rem; }
      #request-view-step-tile .step .step-name .fa .fa-envelope {
        font-size: 0.8rem; }
  #request-view-step-tile .step .step-detail .pin {
    z-index: 99;
    display: none; }
    #request-view-step-tile .step .step-detail .pin::after {
      border-width: 16px;
      border-left-width: 25px; }
  #request-view-step-tile .step .step-detail p:empty {
    margin-bottom: 0; }
  #request-view-step-tile .step .step-detail .step-owner-actions {
    position: relative; }
    #request-view-step-tile .step .step-detail .step-owner-actions .pin {
      left: -117px;
      line-height: 1.4rem; }
  #request-view-step-tile .step .step-detail .step-forms form {
    position: relative; }
    #request-view-step-tile .step .step-detail .step-forms form .pin {
      left: -170px; }
    #request-view-step-tile .step .step-detail .step-forms form[data-is-valid="1"] .pin {
      display: none; }
  #request-view-step-tile .step .step-detail .step-detail-files {
    position: relative; }
    #request-view-step-tile .step .step-detail .step-detail-files .pin {
      left: -127px; }
  #request-view-step-tile .step .step-detail[data-candendereditanddeleteadhocbuttons="false"] .edit-step {
    display: none; }
  #request-view-step-tile .step .step-detail[data-candendereditanddeleteadhocbuttons="false"] .delete-step {
    display: none; }
  #request-view-step-tile .step .step-detail[data-cansendreminder="false"] .send-reminder {
    display: none; }
  #request-view-step-tile .step .step-detail[data-cansendreminder="false"] .send-text-reminder {
    display: none; }
  #request-view-step-tile .step .step-detail[data-cansendreminder="false"] .send-voicemail-reminder {
    display: none; }
  #request-view-step-tile .step .step-detail[data-canreassignstep="false"] .reassign-step {
    display: none; }
  #request-view-step-tile .step .step-detail[data-requires-files="1"] .step-detail-files h4:before {
    content: "* "; }
  #request-view-step-tile .step .step-detail[data-step-order="1"] a.dropdown-item.step-kickback-reason-0 {
    display: none; }
  #request-view-step-tile .step .step-detail[data-isconfidential="1"] .panel-actions {
    z-index: 10; }
  #request-view-step-tile .step .clearfix {
    height: 0; }
  #request-view-step-tile .step .avatar-xs {
    top: -3px; }
    #request-view-step-tile .step .avatar-xs span.user {
      top: 15%;
      font-size: 0.9em; }
  #request-view-step-tile .step span.label.app.label-new:before {
    content: "New";
    margin-right: 1em;
    top: -2px; }
  #request-view-step-tile .step span.drag-step {
    color: #9E9E9E;
    float: right;
    margin: 4px 1px 0;
    cursor: -webkit-grab; }
    #request-view-step-tile .step span.drag-step i.fa-ellipsis-v {
      margin-right: 2px; }
    #request-view-step-tile .step span.drag-step:hover {
      color: #1976D2; }
  #request-view-step-tile .step[data-step-type="1"] .step-name .step-type:before {
    font-size: 0.8rem;
    content: "\f0e0"; }
  #request-view-step-tile .step[data-step-type="2"] .step-name .step-type:before {
    content: "\f08e"; }
  #request-view-step-tile .step[data-step-type="3"] .step-name .step-type:before {
    content: "\f0e3"; }
  #request-view-step-tile .step[data-step-type="5"] .step-name .step-type {
    display: inline; }
    #request-view-step-tile .step[data-step-type="5"] .step-name .step-type:before {
      content: "\f017"; }
  #request-view-step-tile .step[data-step-type="6"] .step-name .step-type {
    display: inline; }
    #request-view-step-tile .step[data-step-type="6"] .step-name .step-type:before {
      content: "\f075"; }
  #request-view-step-tile .step[data-step-type="7"] .step-name .step-type {
    display: inline; }
    #request-view-step-tile .step[data-step-type="7"] .step-name .step-type:before {
      content: "\f017"; }
  #request-view-step-tile .step[data-isadhocstep="1"] > .panel-heading .badge.badge-step-default {
    background-color: #FF9800; }
  #request-view-step-tile .step[data-isadhocstep="1"] > .panel-heading .step-duedates {
    display: none; }
  #request-view-step-tile .step[data-isconfidentialstep="0"] .step-confidential {
    display: none; }
  #request-view-step-tile .step[data-isnonactionstep="0"] .step-type {
    display: none; }
  #request-view-step-tile .step[data-isnonactionstep="1"] .step-detail .step-owner-actions {
    display: none; }
  #request-view-step-tile .step[data-isnonactionstep="1"] .step-detail .step-detail-files {
    display: none; }
  #request-view-step-tile .step[data-isnonactionstep="1"] .step-detail .step-detail-notes {
    display: none; }
  #request-view-step-tile .step[data-isbotowner="1"] .step-detail .step-detail-instructions {
    margin-right: 30px; }
  #request-view-step-tile .step[data-isbotowner="1"] .step-detail a[data-qa="download-pdf"] {
    display: none; }
  #request-view-step-tile .step[data-ispastdue="0"] > .panel-heading .step-pastdue {
    display: none; }
  #request-view-step-tile .step[data-step-status="Completed"] > .panel-heading .badge.badge-step-default {
    background-color: #4CAF50;
    border-width: 0;
    color: #FFFFFF; }
  #request-view-step-tile .step[data-step-status="Completed"] > .panel-heading span.step-name:after {
    color: #81C784;
    font-family: "FontAwesome";
    content: "\f00c";
    padding: 0 0.5em;
    font-size: 0.9rem; }
  #request-view-step-tile .step[data-step-status="Completed"] .step-detail[data-canviewstep="0"] .step-more-actions {
    display: none; }
  #request-view-step-tile .step[data-step-status="Completed"] .step-detail .reassign-step {
    display: none; }
  #request-view-step-tile .step[data-step-status="Completed"] .step-detail .send-reminder {
    display: none; }
  #request-view-step-tile .step[data-step-status="Completed"] .step-detail #contact-step-owner {
    display: none; }
  #request-view-step-tile .step[data-step-status="Completed"] .step-new {
    display: none; }
  #request-view-step-tile .step[data-step-status="Completed"][data-isadhocstep="1"] > .panel-heading .badge.badge-step-default {
    background-color: #3F51B5; }
  #request-view-step-tile .step[data-step-status="Canceled"] > .panel-heading .badge.badge-step-default {
    background-color: #BDBDBD;
    border-width: 0;
    color: #FFFFFF; }
  #request-view-step-tile .step[data-step-status="Canceled"] .step-more-actions {
    display: none; }
  #request-view-step-tile .step[data-step-status="Canceled"] .step-new {
    display: none; }
  #request-view-step-tile .step[data-step-status="Canceled"] .add-step-file {
    display: none; }
  #request-view-step-tile .step[data-step-status="Skipped"] > .panel-heading .badge.badge-step-default {
    background-color: #BDBDBD;
    border-width: 0;
    color: #FFFFFF; }
  #request-view-step-tile .step[data-step-status="Skipped"] > .panel-heading span.step-name {
    text-decoration: line-through; }
  #request-view-step-tile .step[data-step-status="Skipped"] .step-new {
    display: none; }
  #request-view-step-tile .step[data-is-expanded="true"] .rc-collapse-header .status-border:before {
    cursor: pointer;
    font-family: 'FontAwesome';
    content: "\f106"; }
  #request-view-step-tile .step[data-is-expanded="true"] .rc-collapse-content .tooltip.left {
    left: -100px !important; }
  #request-view-step-tile .step[data-is-expanded="false"] .rc-collapse-content {
    display: none; }

#request-view-step-tile .step-group {
  padding: 1em 0;
  border-width: 1px;
  border-top: 1px solid #E0E0E0;
  box-shadow: none;
  margin-bottom: 0; }
  #request-view-step-tile .step-group > .panel-heading {
    padding: 0;
    border-bottom-width: 0;
    background-color: inherit;
    font-weight: normal; }
    #request-view-step-tile .step-group > .panel-heading .badge {
      background-color: #FFFFFF; }
      #request-view-step-tile .step-group > .panel-heading .badge.badge-step-default {
        margin-top: 0.2em;
        color: #424242;
        background-color: #FFCDD2;
        border-width: 0px; }
    #request-view-step-tile .step-group > .panel-heading .group-status-border {
      float: left;
      width: 0px;
      height: 30px;
      margin: -3px 0px 0 35px; }
      #request-view-step-tile .step-group > .panel-heading .group-status-border:before {
        font-family: 'FontAwesome';
        content: "\f107";
        cursor: pointer;
        left: -24px;
        position: relative;
        float: left;
        color: #9E9E9E; }
    #request-view-step-tile .step-group > .panel-heading .step-avatar {
      font-weight: normal; }
    #request-view-step-tile .step-group > .panel-heading .step-duedates {
      float: right;
      font-size: 0.8em;
      color: #9E9E9E; }
      #request-view-step-tile .step-group > .panel-heading .step-duedates .date:before {
        font-family: "FontAwesome";
        content: "\f017";
        margin-left: 0.3em;
        margin-right: 0.3em; }
    #request-view-step-tile .step-group > .panel-heading .step_group-expand-collapse {
      display: initial; }
  #request-view-step-tile .step-group .step {
    margin-left: 62px; }
    #request-view-step-tile .step-group .step .step-duedates {
      display: none; }
  #request-view-step-tile .step-group .clearfix {
    height: 0; }
  #request-view-step-tile .step-group .avatar-xs {
    top: -3px; }
    #request-view-step-tile .step-group .avatar-xs span.user {
      top: 15%;
      font-size: 0.9em; }
  #request-view-step-tile .step-group span.step-name {
    color: #424242; }
  #request-view-step-tile .step-group span.drag-step {
    color: #9E9E9E;
    float: right;
    margin: 4px 1px 0;
    cursor: -webkit-grab; }
    #request-view-step-tile .step-group span.drag-step i.fa-ellipsis-v {
      margin-right: 2px; }
    #request-view-step-tile .step-group span.drag-step:hover {
      color: #1976D2; }
  #request-view-step-tile .step-group[data-ispastdue="0"] > .panel-heading .step-pastdue {
    display: none; }
  #request-view-step-tile .step-group[data-step-status="Completed"] > .panel-heading .badge.badge-step-default {
    background-color: #4CAF50;
    border-width: 0;
    color: #FFFFFF; }
  #request-view-step-tile .step-group[data-step-status="Completed"] > .panel-heading span.step-name:after {
    color: #81C784;
    font-family: "FontAwesome";
    content: "\f00c";
    padding: 0 0.5em;
    font-size: 0.9rem; }
  #request-view-step-tile .step-group[data-step-status="Canceled"] > .panel-heading .badge.badge-step-default {
    background-color: #BDBDBD;
    border-width: 0;
    color: #FFFFFF; }
  #request-view-step-tile .step-group[data-step-status="Skipped"] > .panel-heading .badge.badge-step-default {
    background-color: #BDBDBD;
    border-width: 0;
    color: #FFFFFF; }
  #request-view-step-tile .step-group[data-step-status="Skipped"] > .panel-heading span.step-name {
    text-decoration: line-through; }
  #request-view-step-tile .step-group[data-step-status="Skipped"] .step-new {
    display: none; }
  #request-view-step-tile .step-group[data-is-expanded="true"] .rc-collapse-header .group-status-border:before {
    cursor: pointer;
    font-family: 'FontAwesome';
    content: "\f106"; }
  #request-view-step-tile .step-group[data-is-expanded="true"] .rc-collapse-content .tooltip.left {
    left: -100px !important; }
  #request-view-step-tile .step-group[data-is-expanded="false"] .rc-collapse-content {
    display: none; }

#request-view-step-tile[data-isrequestactive="0"] .add-step-notes {
  display: none; }

#request-view-step-tile[data-isrequestactive="0"] .step-new {
  display: none; }

#request-view-step-tile[data-isrequestactive="0"] .add-step-file {
  display: none; }

#request-view-step-tile[data-isrequestactive="0"] .step-more-actions {
  display: none; }

#request-view-step-tile[data-isrequestactive="1"] .step[data-iscurrentstep="true"],
#request-view-step-tile[data-isrequestactive="1"] .step-group[data-iscurrentstep="true"] {
  background-color: #E3F2FD;
  border: 0;
  margin: 5px 0;
  position: relative;
  left: -3%;
  width: 106%;
  padding: 1.5em 2.5%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  #request-view-step-tile[data-isrequestactive="1"] .step[data-iscurrentstep="true"] > .panel-heading,
  #request-view-step-tile[data-isrequestactive="1"] .step-group[data-iscurrentstep="true"] > .panel-heading {
    font-weight: bold; }
    #request-view-step-tile[data-isrequestactive="1"] .step[data-iscurrentstep="true"] > .panel-heading .badge.badge-step-default,
    #request-view-step-tile[data-isrequestactive="1"] .step-group[data-iscurrentstep="true"] > .panel-heading .badge.badge-step-default {
      background-color: #F44336;
      color: #FFFFFF;
      animation-fill-mode: both;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-name: wobble;
      animation-timing-function: ease-in-out; }
    #request-view-step-tile[data-isrequestactive="1"] .step[data-iscurrentstep="true"] > .panel-heading .step-duedates,
    #request-view-step-tile[data-isrequestactive="1"] .step-group[data-iscurrentstep="true"] > .panel-heading .step-duedates {
      color: #D32F2F; }
    #request-view-step-tile[data-isrequestactive="1"] .step[data-iscurrentstep="true"] > .panel-heading .step-name,
    #request-view-step-tile[data-isrequestactive="1"] .step-group[data-iscurrentstep="true"] > .panel-heading .step-name {
      font-weight: bold; }
  #request-view-step-tile[data-isrequestactive="1"] .step[data-iscurrentstep="true"] .rc-collapse-header,
  #request-view-step-tile[data-isrequestactive="1"] .step-group[data-iscurrentstep="true"] .rc-collapse-header {
    left: 5px;
    position: relative; }
  #request-view-step-tile[data-isrequestactive="1"] .step[data-iscurrentstep="true"] .step-detail,
  #request-view-step-tile[data-isrequestactive="1"] .step-group[data-iscurrentstep="true"] .step-detail {
    box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.45);
    padding: 2em; }
  #request-view-step-tile[data-isrequestactive="1"] .step[data-iscurrentstep="true"] + .step,
  #request-view-step-tile[data-isrequestactive="1"] .step-group[data-iscurrentstep="true"] + .step {
    border-top: 0; }

#request-view-step-tile[data-isrequestactive="1"] .step-group .step[data-iscurrentstep="true"] {
  left: 30px;
  width: 100%; }

#request-view-step-tile[data-isrequestactive="1"] .step-group[data-isgroupcurrentstep="true"] .step-duedates {
  color: #D32F2F; }

#request-view-step-tile .request-notes {
  padding-bottom: 2em; }
  #request-view-step-tile .request-notes .row {
    clear: both;
    margin-top: 2em; }
  #request-view-step-tile .request-notes .badge {
    padding: 2px 5px; }
  #request-view-step-tile .request-notes .col-md-8 p {
    font-size: 0.8rem; }

#request-view-step-tile .request-files p {
  margin-top: 1em; }

#request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-header {
  text-indent: 0 !important;
  height: auto !important;
  line-height: inherit !important;
  color: unset !important; }
  #request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-header > span {
    width: 28px;
    float: left; }
  #request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-header span a i.fa-pencil-square-o {
    color: #3F51B5; }
    #request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-header span a i.fa-pencil-square-o:hover {
      color: #1976D2; }
  #request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-header span a i.fa-pencil-square-o.text-muted {
    color: #9E9E9E;
    cursor: not-allowed; }
  #request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-header span a i.fa-times-circle {
    color: #D32F2F !important;
    margin: 0 0.5em 0 1em; }
  #request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-header span a i.fa-times-circle.text-muted {
    color: #9E9E9E !important;
    cursor: not-allowed; }
  #request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-header #stepOwnerContactFirstName.tooltip-sm,
  #request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-header #stepOwnerTeamName.tooltip-sm {
    margin-left: -95px; }

#request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-content {
  padding: 0 !important;
  position: relative;
  left: 0;
  width: 100%;
  margin-top: 1em;
  overflow: visible;
  padding: 0 16px; }
  #request-view-step-tile .rc-collapse .rc-collapse-item .rc-collapse-content .rc-collapse-content-box {
    margin: 0 !important; }

#request-view-step-tile .rc-collapse .rc-collapse-item.rc-collapse-item-active .status-border:before {
  content: "\f106";
  transition: all 0.1s linear; }

#request-view-step-tile .rc-collapse .rc-collapse-item.rc-collapse-item-active .rc-collapse-content-active .tooltip.left {
  left: -100px !important; }

#request-view-step-tile .rc-collapse-item-disabled .rc-collapse-header {
  cursor: not-allowed; }

#request-view-step-tile[data-is-deactivated="1"] {
  background-color: #F5F5F5; }
  #request-view-step-tile[data-is-deactivated="1"]:before {
    content: "\f023";
    font-family: "FontAwesome";
    font-size: 7em;
    position: absolute;
    color: #9E9E9E;
    left: 30%;
    top: 150px;
    z-index: 999; }

#request-view-step-tile[data-isqa="1"] .step-name:before {
  content: "QA";
  display: inline-block;
  margin-right: 5px;
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  padding-left: 0.6em;
  padding-right: 0.6em;
  position: relative;
  top: -1px;
  border-radius: 10rem;
  color: #FFFFFF;
  background-color: #212121;
  font-size: 0.68rem;
  top: -2px; }

.steps-legends .open-steps {
  padding-left: 1em; }
  .steps-legends .open-steps .open-steps-circle {
    color: #ef9a9a; }

.steps-legends .completed-steps {
  padding-left: 1em; }

.steps-legends {
  height: 20px;
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  cursor: help; }
  .steps-legends .legend-title:before {
    font-family: "FontAwesome";
    content: "\f059";
    margin-right: 5px; }
  .steps-legends .legend {
    font-size: 80%; }
    .steps-legends .legend .steps {
      padding-left: 1em; }
      .steps-legends .legend .steps:before {
        content: "\f111";
        font-family: "FontAwesome"; }
      .steps-legends .legend .steps.current:before {
        color: #F44336; }
      .steps-legends .legend .steps.open:before {
        color: #FFCDD2; }
      .steps-legends .legend .steps.completed:before {
        color: #4CAF50; }
      .steps-legends .legend .steps.open-adhoc:before {
        color: #FF9800; }
      .steps-legends .legend .steps.completed-adhoc:before {
        color: #3F51B5; }
      .steps-legends .legend .steps.canceled:before {
        color: #BDBDBD; }
      .steps-legends .legend .steps:first-child {
        padding-left: 0; }
  .steps-legends.pull-right {
    text-align: right; }
  .steps-legends:hover {
    width: 660px;
    height: 44px;
    transition: height 0.5s; }
    .steps-legends:hover .legend {
      font-size: 80%;
      display: block; }
      .steps-legends:hover .legend .step:first-child {
        padding-left: 1em; }
  .steps-legends.panel-actions {
    width: auto;
    height: 32px; }
    .steps-legends.panel-actions .legend-title {
      padding: 0.3rem 0 .3rem 0.5rem; }
    .steps-legends.panel-actions:hover {
      height: 56px; }

#table-swimlane-steps .card .step-name .step-type:before,
#table-swimlane-steps .card .step-name .step-linkstep:before,
#table-swimlane-steps .card .step-name .step-rule:before,
#table-swimlane-steps .card .step-name .step-error:before {
  margin-left: 5px;
  margin-right: 5px; }

#table-swimlane-steps .card .step-name .step-error:before {
  animation-fill-mode: both;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: wobble;
  animation-timing-function: ease-in-out;
  color: #F44336;
  display: block; }

#table-swimlane-steps .card .step-name[data-step-type="1"] .step-type:before {
  content: "\f0e0"; }

#table-swimlane-steps .card .step-name[data-step-type="2"] .step-type:before {
  content: "\f08e"; }

#table-swimlane-steps .card .step-name[data-step-type="3"] .step-type:before {
  content: "\f0e3"; }

#table-swimlane-steps .card .step-name[data-step-type="5"] .step-type {
  display: inline; }
  #table-swimlane-steps .card .step-name[data-step-type="5"] .step-type:before {
    content: "\f017"; }

#table-swimlane-steps .card .step-name[data-step-type="6"] .step-type {
  display: inline; }
  #table-swimlane-steps .card .step-name[data-step-type="6"] .step-type:before {
    content: "\f075"; }

body.dark #request-view-step-tile .step {
  border-top-color: #616161; }
  body.dark #request-view-step-tile .step .step-name {
    color: #E0E0E0; }

body.dark #request-view-step-tile .activity-feed-items .activity-feed-item .media-body p,
body.dark #request-view-step-tile .activity-feed-items .media .media-body p {
  color: #E0E0E0; }

body.dark #request-view-step-tile[data-isrequestactive="1"] .step[data-iscurrentstep="true"],
body.dark #request-view-step-tile[data-isrequestactive="1"] .step-group[data-iscurrentstep="true"] {
  background-color: #424242; }

@media (max-width: 767.98px) {
  #request-view-step-tile .panel-actions.steps-legends .legend-title {
    display: none; }
  #request-view-step-tile .panel-actions.steps-legends .legend {
    display: none; } }

/* 
Component: Ask Step

### Standard UX
- <span class="text-highlight">Only step action buttons can be `primary`</span>. All other buttons must be `xs` and `secondary`.

### Components

- [`Button`](section-elementbuttons.html)

Markup: request-step.hbs

Weight: 100

Styleguide ComponentAskStep
*/
/* 
Unassigned

Markup: request-step-unassigned.hbs

Weight: 100

Styleguide ComponentAskStep.Unassigned
*/
/* 
With Files

Markup: request-step-files.hbs

Weight: 100

Styleguide ComponentAskStep.Files
*/
/* 
With Instructions

Markup: request-step-instructions.hbs

Weight: 100

Styleguide ComponentAskStep.Instructions
*/
/* 
With Notes

Markup: request-step-notes.hbs

Weight: 100

Styleguide ComponentAskStep.Notes
*/
/* 
Skippable

Markup: request-step-skippable.hbs

Weight: 100

Styleguide ComponentAskStep.Skippable
*/
.panel .request-steps .step-detail {
  padding: 2em;
  background-color: #FAFAFA;
  display: block;
  width: 100%; }
  .panel .request-steps .step-detail .readtime {
    font-size: 0.8em;
    color: #9E9E9E; }
  .panel .request-steps .step-detail img {
    padding: .5rem;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    max-width: 100%; }
  .panel .request-steps .step-detail a:hover > img {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border-color: #9E9E9E; }
  .panel .request-steps .step-detail > .panel-actions {
    top: 0; }
  .panel .request-steps .step-detail .step-detail-icons {
    float: right; }
  .panel .request-steps .step-detail h4 {
    font-weight: bold;
    font-size: 1em;
    margin-top: 1.5em; }
    .panel .request-steps .step-detail h4.section-heading {
      font-size: 0.9rem;
      margin-bottom: 1.25rem;
      border-top: 1px solid #E0E0E0;
      border-top-style: dashed;
      padding-top: 0.5rem;
      text-transform: uppercase;
      color: #9E9E9E;
      font-size: 1.5rem;
      text-transform: none;
      padding-top: 0.75rem; }
  .panel .request-steps .step-detail p {
    position: relative; }
    .panel .request-steps .step-detail p input {
      font-size: 0.7rem;
      width: 80%;
      padding: 0.5em;
      margin: 1em 1em 0 0; }
    .panel .request-steps .step-detail p .pin.pin-danger.pin-confirm {
      left: -100px;
      display: inline-block !important; }
  .panel .request-steps .step-detail table td {
    vertical-align: top; }
    .panel .request-steps .step-detail table td p {
      padding: 0; }
  .panel .request-steps .step-detail .step-instructions-toggle {
    color: #424242; }
    .panel .request-steps .step-detail .step-instructions-toggle:before {
      font-family: "FontAwesome";
      content: "\f106"; }
    .panel .request-steps .step-detail .step-instructions-toggle.collapsed:before {
      content: "\f107"; }
  .panel .request-steps .step-detail .btn.complete:before {
    font-family: "FontAwesome";
    content: "\f00c";
    margin-right: 5px; }
  .panel .request-steps .step-detail .btn.complete:before {
    font-family: "FontAwesome";
    content: "\f00c";
    margin-right: 5px; }
  .panel .request-steps .step-detail .btn.complete-dropdown:before {
    font-family: "FontAwesome";
    content: "\f00c";
    margin-right: 5px; }
  .panel .request-steps .step-detail .btn.deny:before {
    font-family: "FontAwesome";
    content: "\f00d";
    margin-right: 5px; }
  .panel .request-steps .step-detail .btn.cannot-complete:before {
    font-family: "FontAwesome";
    content: "\f00d";
    margin-right: 5px; }
  .panel .request-steps .step-detail .step-detail-instructions div {
    margin-left: 26px; }
    .panel .request-steps .step-detail .step-detail-instructions div.conditional {
      margin-left: 0; }
    .panel .request-steps .step-detail .step-detail-instructions div:empty {
      display: none; }
    .panel .request-steps .step-detail .step-detail-instructions div.progress {
      margin-left: 0;
      height: 1rem; }
      .panel .request-steps .step-detail .step-detail-instructions div.progress .progress-bar {
        margin-left: 0;
        font-weight: bold; }
    .panel .request-steps .step-detail .step-detail-instructions div.mceTmpl {
      margin-left: 0; }
      .panel .request-steps .step-detail .step-detail-instructions div.mceTmpl div {
        margin-left: 0; }
      .panel .request-steps .step-detail .step-detail-instructions div.mceTmpl .calendly-inline-widget,
      .panel .request-steps .step-detail .step-detail-instructions div.mceTmpl .oncehub-inline-widget {
        min-width: 320px;
        height: 700px;
        margin-left: -26px; }
      .panel .request-steps .step-detail .step-detail-instructions div.mceTmpl .iframe-wrapper {
        min-width: 320px;
        height: 700px;
        margin-left: -26px; }
        .panel .request-steps .step-detail .step-detail-instructions div.mceTmpl .iframe-wrapper iframe {
          width: 100% !important;
          height: 100% !important;
          border: none; }
  .panel .request-steps .step-detail .step-detail-instructions div.email-only,
  .panel .request-steps .step-detail .step-detail-instructions p.email-only {
    display: none; }
  .panel .request-steps .step-detail .step-detail-instructions div.web-only,
  .panel .request-steps .step-detail .step-detail-instructions p.web-only {
    display: block !important;
    margin-left: 0; }
  .panel .request-steps .step-detail .step-detail-instructions div.internal-only,
  .panel .request-steps .step-detail .step-detail-instructions p.internal-only {
    display: block !important;
    margin-left: 0;
    border: 1px dashed #E0E0E0;
    padding: 1em;
    margin-left: 0;
    margin-top: 2em;
    position: relative;
    border-radius: 1rem;
    margin-bottom: 1em;
    text-align: left;
    display: block !important;
    margin-top: 3em; }
    .panel .request-steps .step-detail .step-detail-instructions div.internal-only:before,
    .panel .request-steps .step-detail .step-detail-instructions p.internal-only:before {
      content: "Internal only";
      font-size: 0.8em;
      color: #9E9E9E;
      display: inline-block;
      position: absolute;
      top: -2em;
      width: 100%; }
    .panel .request-steps .step-detail .step-detail-instructions div.internal-only:before,
    .panel .request-steps .step-detail .step-detail-instructions p.internal-only:before {
      content: "Internal Instructions only"; }
  .panel .request-steps .step-detail .step-detail-instructions div.qa-only,
  .panel .request-steps .step-detail .step-detail-instructions p.qa-only {
    display: block !important;
    margin-left: 0;
    border: 1px dashed #E0E0E0;
    border-color: #FF9800;
    padding: 1em;
    margin-left: 0;
    margin-top: 2em;
    position: relative;
    border-radius: 1rem;
    margin-bottom: 1em;
    text-align: left;
    display: block !important;
    margin-top: 3em; }
    .panel .request-steps .step-detail .step-detail-instructions div.qa-only:before,
    .panel .request-steps .step-detail .step-detail-instructions p.qa-only:before {
      content: "QA only";
      font-size: 0.8em;
      color: #9E9E9E;
      display: inline-block;
      position: absolute;
      color: #FF9800;
      top: -2em;
      width: 100%; }
    .panel .request-steps .step-detail .step-detail-instructions div.qa-only:before,
    .panel .request-steps .step-detail .step-detail-instructions p.qa-only:before {
      content: "Internal Instructions only"; }
  .panel .request-steps .step-detail .step-detail-instructions div.account-email-signature,
  .panel .request-steps .step-detail .step-detail-instructions p.account-email-signature {
    display: none; }
  .panel .request-steps .step-detail .step-detail-instructions div.sys-message,
  .panel .request-steps .step-detail .step-detail-instructions p.sys-message {
    margin-bottom: 0; }
    .panel .request-steps .step-detail .step-detail-instructions div.sys-message:before,
    .panel .request-steps .step-detail .step-detail-instructions p.sys-message:before {
      font-family: "FontAwesome";
      margin-right: 5px;
      color: #9E9E9E;
      width: 14px;
      text-align: center;
      display: inline-block; }
    .panel .request-steps .step-detail .step-detail-instructions div.sys-message[data-qa="step-auto-complete"]:before,
    .panel .request-steps .step-detail .step-detail-instructions p.sys-message[data-qa="step-auto-complete"]:before {
      content: "\f0e7"; }
    .panel .request-steps .step-detail .step-detail-instructions div.sys-message[data-qa="step-auto-reminder"]:before,
    .panel .request-steps .step-detail .step-detail-instructions p.sys-message[data-qa="step-auto-reminder"]:before {
      content: "\f045"; }
    .panel .request-steps .step-detail .step-detail-instructions div.sys-message:last-child,
    .panel .request-steps .step-detail .step-detail-instructions p.sys-message:last-child {
      margin-bottom: 1em; }
  .panel .request-steps .step-detail .step-detail-instructions h4.step-detail-instructions-file-label {
    display: none; }
  .panel .request-steps .step-detail .step-detail-instructions h4.step-detail-instructions-field-label {
    display: none; }
  .panel .request-steps .step-detail .step-detail-instructions .user-button {
    text-align: center;
    position: relative;
    margin: 1rem 0; }
    .panel .request-steps .step-detail .step-detail-instructions .user-button a {
      display: inline-block;
      font-weight: 400;
      text-align: center;
      vertical-align: middle;
      user-select: none;
      border-width: 1px;
      border-style: solid;
      padding: 0.5rem 1rem;
      font-size: 1.25em;
      line-height: 1.5;
      border-radius: 0.3rem;
      animation-fill-mode: both;
      animation-duration: 8s;
      animation-name: shake;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      color: #424242;
      background-color: #FFFFFF;
      border-color: #424242; }
      .panel .request-steps .step-detail .step-detail-instructions .user-button a:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        animation-name: none; }
    .panel .request-steps .step-detail .step-detail-instructions .user-button.user-button-test a {
      animation-name: none;
      background-color: #FFF3E0;
      border-color: #F57C00;
      position: relative; }
      .panel .request-steps .step-detail .step-detail-instructions .user-button.user-button-test a:after {
        content: 'Test';
        margin-left: 0.5rem;
        display: inline-block;
        display: inline-block;
        padding: .25em .4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        padding-left: 0.6em;
        padding-right: 0.6em;
        position: relative;
        top: -1px;
        border-radius: 10rem;
        background-color: #FF9800;
        color: #FFFFFF; }
      .panel .request-steps .step-detail .step-detail-instructions .user-button.user-button-test a.btn-working {
        padding-left: 32px;
        pointer-events: none;
        color: #9E9E9E;
        background-color: #E0E0E0;
        border-color: #E0E0E0; }
        .panel .request-steps .step-detail .step-detail-instructions .user-button.user-button-test a.btn-working:before {
          font-family: "FontAwesome";
          content: "\f110" !important;
          animation: fa-spin 2s infinite linear;
          display: inline-block;
          position: absolute;
          top: 0.5em;
          left: 10px;
          color: #424242; }
  .panel .request-steps .step-detail .step-detail-instructions .card .card-body h3 {
    font-size: 1.5rem; }
  .panel .request-steps .step-detail .step-detail-instructions .card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
  .panel .request-steps .step-detail .step-detail-instructions .card div {
    margin-left: 0; }
  .panel .request-steps .step-detail .step-detail-instructions .card.card-collapse {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
  .panel .request-steps .step-detail .step-detail-instructions .card-deck {
    margin-bottom: 1em; }
    .panel .request-steps .step-detail .step-detail-instructions .card-deck.card-3 h3 p.card-score {
      display: none; }
  .panel .request-steps .step-detail .panel {
    margin-left: 0 !important;
    width: calc(100% - 26px); }
    .panel .request-steps .step-detail .panel div {
      margin-left: 0 !important; }
    .panel .request-steps .step-detail .panel.panel-card .panel-body {
      margin-left: 0; }
    .panel .request-steps .step-detail .panel.panel-card.panel-callout .panel-body {
      background-color: #EEEEEE;
      animation-name: panelBar;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: ease;
      padding-bottom: 0.5rem; }
      .panel .request-steps .step-detail .panel.panel-card.panel-callout .panel-body p:last-child {
        margin-bottom: 0; }
      .panel .request-steps .step-detail .panel.panel-card.panel-callout .panel-body:after {
        display: none; }
  .panel .request-steps .step-detail .step-detail-notes textarea.form-control:empty {
    height: 2.5rem; }
  .panel .request-steps .step-detail .step-forms form .form-actions {
    margin-top: 1em; }
    .panel .request-steps .step-detail .step-forms form .form-actions .btn-primary {
      margin-left: 0px;
      color: #424242;
      background-color: #FFFFFF;
      border-color: #424242;
      padding: 1px 5px;
      font-size: 12px;
      line-height: 1.5;
      border-radius: 3px; }
  .panel .request-steps .step-detail .step-forms form .user-button {
    text-align: center;
    position: relative;
    margin: 1rem 0; }
    .panel .request-steps .step-detail .step-forms form .user-button a {
      display: inline-block;
      font-weight: 400;
      text-align: center;
      vertical-align: middle;
      user-select: none;
      border-width: 1px;
      border-style: solid;
      padding: 0.5rem 1rem;
      font-size: 1.25em;
      line-height: 1.5;
      border-radius: 0.3rem;
      animation-fill-mode: both;
      animation-duration: 8s;
      animation-name: shake;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      color: #424242;
      background-color: #FFFFFF;
      border-color: #424242; }
      .panel .request-steps .step-detail .step-forms form .user-button a:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        animation-name: none; }
    .panel .request-steps .step-detail .step-forms form .user-button.user-button-test a {
      animation-name: none;
      background-color: #FFF3E0;
      border-color: #F57C00;
      position: relative; }
      .panel .request-steps .step-detail .step-forms form .user-button.user-button-test a:after {
        content: 'Test';
        margin-left: 0.5rem;
        display: inline-block;
        display: inline-block;
        padding: .25em .4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        padding-left: 0.6em;
        padding-right: 0.6em;
        position: relative;
        top: -1px;
        border-radius: 10rem;
        background-color: #FF9800;
        color: #FFFFFF; }
      .panel .request-steps .step-detail .step-forms form .user-button.user-button-test a.btn-working {
        padding-left: 32px;
        pointer-events: none;
        color: #9E9E9E;
        background-color: #E0E0E0;
        border-color: #E0E0E0; }
        .panel .request-steps .step-detail .step-forms form .user-button.user-button-test a.btn-working:before {
          font-family: "FontAwesome";
          content: "\f110" !important;
          animation: fa-spin 2s infinite linear;
          display: inline-block;
          position: absolute;
          top: 0.5em;
          left: 10px;
          color: #424242; }
  .panel .request-steps .step-detail .step-forms form .iframe-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
    min-height: 160px; }
  .panel .request-steps .step-detail .step-forms form .iframe-wrapper.iframe-boldsign {
    margin-top: 3em;
    height: auto;
    position: relative;
    border: 1px dashed #E0E0E0;
    padding: 1em;
    margin-bottom: 1rem; }
    .panel .request-steps .step-detail .step-forms form .iframe-wrapper.iframe-boldsign:before {
      content: "eSignature (External Step Only)";
      font-size: 0.8em;
      color: #9E9E9E;
      display: inline-block;
      position: absolute;
      top: -2em;
      width: 100%;
      color: #424242; }
    .panel .request-steps .step-detail .step-forms form .iframe-wrapper.iframe-boldsign:after {
      content: "Signature Required";
      font-family: "Over the Rainbow", cursive;
      font-size: 2rem;
      display: block; }
    .panel .request-steps .step-detail .step-forms form .iframe-wrapper.iframe-boldsign iframe {
      display: none; }
  .panel .request-steps .step-detail .tooltip-sm {
    margin-left: -65px !important; }
  .panel .request-steps .step-detail .step-detail-instructions p > iframe {
    display: block;
    margin: auto;
    background-color: #ffffff;
    padding: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
    .panel .request-steps .step-detail .step-detail-instructions p > iframe[src*="vimeo.com"], .panel .request-steps .step-detail .step-detail-instructions p > iframe[src*="youtube.com"], .panel .request-steps .step-detail .step-detail-instructions p > iframe[src*="youtube-nocookie.com"] {
      position: relative !important;
      width: 40vw !important;
      height: calc((40vw) * 9 / 16) !important;
      border-radius: 1rem; }
  .panel .request-steps .step-detail .step-detail-instructions p a.btn.animated {
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-name: shake; }
  .panel .request-steps .step-detail .step-detail-instructions .form-entries,
  .panel .request-steps .step-detail .step-forms .form-entries {
    /* margin-left: 0 !important; */ }
    .panel .request-steps .step-detail .step-detail-instructions .form-entries .form-field,
    .panel .request-steps .step-detail .step-forms .form-entries .form-field {
      margin-left: 0 !important; }
    .panel .request-steps .step-detail .step-detail-instructions .form-entries .field.field-show,
    .panel .request-steps .step-detail .step-forms .form-entries .field.field-show {
      display: inline; }
      .panel .request-steps .step-detail .step-detail-instructions .form-entries .field.field-show > span,
      .panel .request-steps .step-detail .step-forms .form-entries .field.field-show > span {
        vertical-align: text-top; }
        .panel .request-steps .step-detail .step-detail-instructions .form-entries .field.field-show > span *:first-child,
        .panel .request-steps .step-detail .step-forms .form-entries .field.field-show > span *:first-child {
          margin-top: 0.75em; }
        .panel .request-steps .step-detail .step-detail-instructions .form-entries .field.field-show > span.field-value,
        .panel .request-steps .step-detail .step-forms .form-entries .field.field-show > span.field-value {
          padding: 0 .4rem;
          background-color: #EEEEEE;
          display: inline-block;
          font-family: monospace;
          font-size: 0.8rem;
          cursor: pointer; }
      .panel .request-steps .step-detail .step-detail-instructions .form-entries .field.field-show:hover > span.field-value,
      .panel .request-steps .step-detail .step-forms .form-entries .field.field-show:hover > span.field-value {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        background-color: #FFF9C4 !important; }
  .panel .request-steps .step-detail[data-requires-files="1"][data-has-files="0"] .btn.complete {
    display: inline-block;
    background-color: #E0E0E0;
    pointer-events: none;
    color: #424242;
    border: 1px solid #E0E0E0;
    opacity: 0.65; }
    .panel .request-steps .step-detail[data-requires-files="1"][data-has-files="0"] .btn.complete .pin {
      display: none; }
  .panel .request-steps .step-detail[data-requires-files="1"][data-has-files="0"] .btn-group .btn.complete {
    background-color: #ffffff;
    color: #9E9E9E !important;
    opacity: 1;
    border-width: 0px; }
  .panel .request-steps .step-detail[data-requires-files="1"]:not([data-has-files="0"]) .step-detail-files .pin {
    display: none; }

#content[data-isdevonly="1"] .panel .request-steps .step-detail .step-detail-instructions div.contentformula {
  padding: 0.25rem 0.5rem;
  border: dashed #F57C00 1px;
  border-radius: 1rem;
  margin-left: 0;
  margin-bottom: 1rem; }
  #content[data-isdevonly="1"] .panel .request-steps .step-detail .step-detail-instructions div.contentformula > p:last-child {
    margin-bottom: 0; }
  #content[data-isdevonly="1"] .panel .request-steps .step-detail .step-detail-instructions div.contentformula > ul:last-child {
    margin-bottom: 0; }
  #content[data-isdevonly="1"] .panel .request-steps .step-detail .step-detail-instructions div.contentformula > ol:last-child {
    margin-bottom: 0; }

#content[data-isdevonly="1"] .panel .request-steps .step-detail .step-detail-instructions span.contentformula {
  padding: 2px 4px;
  border: dashed #F57C00 1px;
  border-radius: 1rem;
  font-size: 0.85rem;
  display: inline; }

#content[data-isdevonly="1"] .panel .request-steps .step-detail .step-detail-instructions p > span.contentformula:empty {
  position: relative; }

#content[data-isdevonly="1"] .panel .request-steps .step-detail .step-detail-instructions div > span.contentformula:empty {
  position: relative; }

@media (max-width: 767.98px) {
  .request-steps > .panel-actions {
    margin-bottom: 1em !important; }
  .request-steps .step .step-detail .panel-actions {
    display: none; }
  .request-steps .step .step-detail .row .btn-group {
    width: 100%;
    margin-right: 0; }
  .request-steps .step .step-detail .row a.btn.complete, .request-steps .step .step-detail .row a.btn.complete-dropdown, .request-steps .step .step-detail .row a.btn.cannot-complete, .request-steps .step .step-detail .row a.btn.assign-to-me, .request-steps .step .step-detail .row a.btn.reassign {
    display: block;
    text-align: left;
    margin-bottom: 1em;
    margin-right: 0 !important;
    width: 100%; }
  .request-steps .step .step-detail .row .btn + .btn {
    margin-left: 0; }
  .request-steps .step .step-detail .row .btn-group + .btn {
    margin-left: 0; }
  .request-steps .step .step-detail .step-detail-instructions .card-deck {
    flex-flow: unset;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0; }
  .request-steps .step .step-detail .step-detail-instructions p > iframe[src*="vimeo.com"], .request-steps .step .step-detail .step-detail-instructions p > iframe[src*="youtube.com"], .request-steps .step .step-detail .step-detail-instructions p > iframe[src*="youtube-nocookie.com"] {
    width: calc(100vw - 2.5rem - 30px) !important;
    height: calc((100vw - 2.5rem - 30px) * 9 / 16) !important; } }

body.dark .panel .request-steps .step-detail .step-instructions-toggle {
  color: #E0E0E0; }

body.dark .panel .request-steps .step-detail .step-detail-instructions .form-entries .field.field-show > span.field-value,
body.dark .panel .request-steps .step-detail .step-forms .form-entries .field.field-show > span.field-value {
  background-color: #616161 !important; }

body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq {
  margin-left: 0 !important; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq div {
    margin-left: 0 !important; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq {
    border-top-color: #BDBDBD;
    margin-top: 2rem; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-header {
      text-align: center;
      font-size: 1.1rem;
      padding: .75rem 1.25rem; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-body .card-desc-cpq {
      text-align: center; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-body .plan-cpq li.item-cpq-unselected {
      color: #BDBDBD; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-body .plan-cpq li.item-cpq-heading.text-muted {
      color: #BDBDBD !important; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-body .plan-cpq li em {
      font-size: 0.85rem; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-body .plan-cpq.square li:before {
      content: "\f14a"; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-body .plan-cpq.square li.item-cpq-unselected:before {
      content: "\f096"; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer {
      font-size: 0.85rem;
      font-style: italic;
      text-align: center; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer.cpq-cta .card-price-cpq {
        margin-top: 0;
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 1rem;
        color: #424242;
        font-style: normal; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer.cpq-cta .card-price-cpq:before {
          content: "Starting at";
          display: block;
          color: #9E9E9E;
          font-size: 0.85rem;
          margin-bottom: 0.25rem;
          font-weight: normal; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer.cpq-cta .card-price-cpq[data-prefix="investment"]:before {
          content: "Initial investment"; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer.cpq-cta .card-price-cpq[data-prefix="yourinvestment"]:before {
          content: "Your investment"; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer.cpq-cta .card-price-cpq[data-prefix="none"]:before {
          content: none; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer.cpq-cta .card-price-cpq[data-suffix="†"]:after {
          content: "†";
          font-weight: normal; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer.cpq-cta .card-price-cpq[data-suffix="*"]:after {
          content: "*";
          font-weight: normal; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer.card-footer-cta a + br + em {
        display: inline-block;
        margin-top: 0.5rem; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq .card-footer a {
        font-style: normal;
        font-size: 1rem; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq:hover {
      border-top-color: var(--primary); }
    body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq.card-recommended {
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
      body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq.card-recommended .card-footer.card-footer-cta {
        background-color: var(--primary);
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq.card-recommended .card-footer.card-footer-cta a {
          animation-fill-mode: both;
          animation-duration: 8s;
          animation-name: shake;
          animation-iteration-count: infinite;
          animation-timing-function: ease-in-out; }
          body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq.card-recommended .card-footer.card-footer-cta a + br + em {
            color: #FFFFFF; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq.card-recommended:before {
        content: "Recommended";
        left: 10%;
        width: 80%;
        text-align: center;
        display: block;
        position: absolute;
        background-color: #43A047;
        padding: .45em .4em .25em .4em;
        font-weight: bold;
        font-size: 0.85rem;
        color: #FFFFFF;
        top: calc(-2rem - 4px);
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq .card-cpq.card-recommended:after {
        font-family: "FontAwesome";
        content: "\f005";
        left: calc(10% + 1rem);
        top: calc(-1.6rem - 4px);
        display: inline-block;
        position: absolute;
        color: #FFFFFF;
        animation-fill-mode: both;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-name: wobble;
        animation-timing-function: ease-in-out; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .card-deck-cpq.card-double .card:first-child {
    margin-right: 30px; }

/* 
Component: Ask Step: External

### Standard UX

- The `First Name`, `Last Name`, and `Email` fields will be auto-populated.
- The `Cannot Complete` button only has the `Kick back to Flow Owner` option.
- Client <strong>Logo Specifications and Color</strong> documented on Insight: <a href="https://insight.innovativewayinc.com/products/pipeline/customer-success/onboarding-overview/" target="_blank">Client Onboarding - Account Journey</a>

### Components

- [`Button`](section-elementbuttons.html)

Markup: request-step-external.hbs

Weight: 100

Styleguide ComponentAskStepExternal
*/
/* 
With Files

Markup: request-step-external-files.hbs

Weight: 100

Styleguide ComponentAskStepExternal.Files
*/
/* 
With Instructions

Markup: request-step-external-instructions.hbs

Weight: 100

Styleguide ComponentAskStepExternal.Instructions
*/
/* 
With Notes

Markup: request-step-external-notes.hbs

Weight: 100

Styleguide ComponentAskStepExternal.Notes
*/
/* 
Confirmation

### Standard UX

- Title in the tile must be "Complete your step" followed by the step name
- The tile footer must be gray with 2 color background on the right. Verbiage must match marketing boilerplate.

### Components

- [`Element: Alerts: Block Alerts`](section-elementalerts.html#kssref-elementalerts-block)

### Verbiage
Follow the format and sentence structure in the examples below.

<div class="panel panel-default">
<div class="panel-body">
	<table class="table table-inverse">
	<thead>
	<tr><th>Alert Heading</th><th>Message</th></tr>
	</thead>
	<tbody>
	<tr><td>Step Already Completed</td><td>Your step has already been completed.</td></tr>
	<tr><td>Step Completed</td><td>Your step has been completed.</td></tr>
	<tr><td>Step Kicked Back</td><td>Your step has been kicked back to a previous step. No action is needed for your step at this time.</td></tr>
	<tr><td>Step Updated</td><td>Your step has been updated.</td></tr>
	</tbody>
	</table>
</div>
</div>

Markup: request-step-external-done.hbs

Weight: 100

Styleguide ComponentAskStepExternal.ConfirmationMessages
*/
/* 
Error

### Standard UX

- Title in the tile must be "Complete your step" followed by the step name
- The tile footer must be gray with 2 color background on the right. Verbiage must match marketing boilerplate.

### Components

- [`Element: Alerts: Block Alerts`](section-elementalerts.html#kssref-elementalerts-block)

### Verbiage
Follow the format and sentence structure in the examples below.

<div class="panel panel-default">
<div class="panel-body">
	<table class="table table-inverse">
	<thead>
	<tr><th>Type</th><th>Message</th></tr>
	</thead>
	<tbody>
	<tr><td>Access Denied</td><td>Sorry, you do not have access.</td></tr>
	<tr><td>Not Step Owner</td><td>Sorry, you are no longer the step owner.</td></tr>
	<tr><td>Not Found</td><td>Sorry, the content cannot be found.</td></tr>
	</tbody>
	</table>
</div>
</div>

Markup: request-step-external-error.hbs

Weight: 100

Styleguide ComponentAskStepExternal.Error
*/
body.external-form #request-view-tabs-tile #request-view-step-tile .pin:after {
  border-width: 16px;
  border-left-width: 25px; }

body.external-form #request-view-tabs-tile #request-view-step-tile .pin#pin-sign {
  display: inline-block;
  left: -120px;
  position: relative;
  bottom: 90px;
  top: unset; }

body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail {
  padding: 0; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .account-logo.account-logo-avatar {
    float: left;
    border-radius: 50%;
    padding: 3px;
    margin-right: 26px;
    width: 100px; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .steps-header {
    position: relative; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .steps-header > h3 {
      margin-top: 0; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail form .row {
    margin-bottom: 0; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .account-email-signature,
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .email-only {
    display: none !important; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .web-only {
    display: initial !important;
    margin-left: 0; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .internal-only {
    display: none !important;
    margin-left: 0; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .qa-only {
    display: none !important;
    margin-left: 0; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions {
    margin-top: 2em; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .user-button {
      text-align: center;
      position: relative;
      margin: 1rem 0; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .user-button a {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        user-select: none;
        border-width: 1px;
        border-style: solid;
        padding: 0.5rem 1rem;
        font-size: 1.25em;
        line-height: 1.5;
        border-radius: 0.3rem;
        animation-fill-mode: both;
        animation-duration: 8s;
        animation-name: shake;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        color: #424242;
        background-color: #FFFFFF;
        border-color: #424242; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .user-button a:hover {
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
          animation-name: none; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .user-button.user-button-test a {
        animation-name: none;
        background-color: #FFF3E0;
        border-color: #F57C00;
        position: relative; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .user-button.user-button-test a:after {
          content: 'Test';
          margin-left: 0.5rem;
          display: inline-block;
          display: inline-block;
          padding: .25em .4em;
          font-size: 75%;
          font-weight: 700;
          line-height: 1;
          text-align: center;
          white-space: nowrap;
          vertical-align: baseline;
          padding-left: 0.6em;
          padding-right: 0.6em;
          position: relative;
          top: -1px;
          border-radius: 10rem;
          background-color: #FF9800;
          color: #FFFFFF; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .user-button.user-button-test a.btn-working {
          padding-left: 32px;
          pointer-events: none;
          color: #9E9E9E;
          background-color: #E0E0E0;
          border-color: #E0E0E0; }
          body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .user-button.user-button-test a.btn-working:before {
            font-family: "FontAwesome";
            content: "\f110" !important;
            animation: fa-spin 2s infinite linear;
            display: inline-block;
            position: absolute;
            top: 0.5em;
            left: 10px;
            color: #424242; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .custom-user-button {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      margin-right: 25px; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .custom-user-button:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .nav.nav-tabs {
      justify-content: center; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .tab-content {
      margin-left: 0; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .tab-content div {
        margin-left: 0; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .step-detail-instructions .tab-content .tab-pane {
        margin-left: 0;
        padding-top: 1rem; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .user-button {
    text-align: center;
    position: relative;
    margin: 1rem 0; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .user-button a {
      display: inline-block;
      font-weight: 400;
      text-align: center;
      vertical-align: middle;
      user-select: none;
      border-width: 1px;
      border-style: solid;
      padding: 0.5rem 1rem;
      font-size: 1.25em;
      line-height: 1.5;
      border-radius: 0.3rem;
      animation-fill-mode: both;
      animation-duration: 8s;
      animation-name: shake;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      color: #424242;
      background-color: #FFFFFF;
      border-color: #424242; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .user-button a:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        animation-name: none; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .user-button.user-button-test a {
      animation-name: none;
      background-color: #FFF3E0;
      border-color: #F57C00;
      position: relative; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .user-button.user-button-test a:after {
        content: 'Test';
        margin-left: 0.5rem;
        display: inline-block;
        display: inline-block;
        padding: .25em .4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        padding-left: 0.6em;
        padding-right: 0.6em;
        position: relative;
        top: -1px;
        border-radius: 10rem;
        background-color: #FF9800;
        color: #FFFFFF; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .user-button.user-button-test a.btn-working {
        padding-left: 32px;
        pointer-events: none;
        color: #9E9E9E;
        background-color: #E0E0E0;
        border-color: #E0E0E0; }
        body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .user-button.user-button-test a.btn-working:before {
          font-family: "FontAwesome";
          content: "\f110" !important;
          animation: fa-spin 2s infinite linear;
          display: inline-block;
          position: absolute;
          top: 0.5em;
          left: 10px;
          color: #424242; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .custom-user-button {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    margin-right: 25px; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .custom-user-button:hover {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .iframe-wrapper.iframe-boldsign {
    margin: 3em auto;
    height: 100vh;
    max-width: 900px;
    position: relative;
    border-width: 0px;
    padding: 0;
    margin-bottom: 0; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .iframe-wrapper.iframe-boldsign:before {
      content: "eSignature Required";
      font-size: 0.8em;
      color: #9E9E9E;
      display: inline-block;
      position: absolute;
      top: -2em;
      width: 100%;
      color: #424242; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .iframe-wrapper.iframe-boldsign:after {
      display: none; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .iframe-wrapper.iframe-boldsign iframe {
      display: block; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .iframe-wrapper.iframe-sharefile {
    height: 480px; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .activity-item {
    font-size: 0.8em;
    color: #9E9E9E; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail .activity-item .datetime {
      font-size: 85%;
      font-style: italic; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .pin {
    display: inline-block; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-forms {
    position: relative; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-forms form .pin {
      left: -122px; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-forms form .pin#pin-sign {
        left: -120px; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-forms form[data-is-valid="1"] .pin {
      display: none; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-forms form[data-is-valid="1"] .pin#pin-sign {
        display: inline-block; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-forms form .form-actions:after {
      content: "Click SAVE to save your progress. Click the green COMPLETE button below to complete the step.";
      font-size: 0.8em;
      margin-top: 0.5em;
      display: block;
      color: #9E9E9E;
      font-weight: bold;
      background-color: #FFF3E0; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-forms form .form-actions:hover:after {
      color: #424242; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-detail-files {
    position: relative; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-detail-files .pin {
      left: -121px; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-detail-notes {
    position: relative;
    margin-bottom: 2em; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-actions {
    position: relative; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-actions .pin.pin-finish {
      left: -109px;
      display: none; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-actions .pin.pin-finish:after {
        border-left-width: 25px; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-actions .next .pin {
      left: -126px;
      display: inline-block; }
      body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails .step-actions .next .pin:after {
        border-width: 15px;
        border-left-width: 25px; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails[data-is-submitting="1"] .step-actions a.btn.btn-success.complete {
    padding-left: 32px;
    pointer-events: none;
    color: #9E9E9E;
    background-color: #E0E0E0;
    border-color: #E0E0E0; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail #externalstepdetails[data-is-submitting="1"] .step-actions a.btn.btn-success.complete:before {
      font-family: "FontAwesome";
      content: "\f110" !important;
      animation: fa-spin 2s infinite linear;
      display: inline-block;
      position: absolute;
      top: 0.5em;
      left: 10px;
      color: #424242; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail[data-requires-files="0"] #externalstepdetails .step-forms form .form-actions:after {
    display: none; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail[data-requires-files="0"] #externalstepdetails .step-detail-files .pin {
    display: none; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail[data-requires-files="0"][data-is-form-valid="1"] #externalstepdetails .step-actions .pin.pin-finish {
    display: inline-block; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail[data-requires-files="1"]:not([data-has-files="0"]) #externalstepdetails .step-detail-files .pin {
    display: none; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail[data-requires-files="1"]:not([data-has-files="0"])[data-is-form-valid="1"] #externalstepdetails .step-actions .pin.pin-finish {
    display: inline-block; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-detail[data-requires-files="1"][data-has-files="0"] #externalstepdetails .step-actions .complete .pin {
    display: none; }

body.external-form #request-view-tabs-tile #request-view-step-tile[data-is-anonymous="1"] #externalstepdetails .activity-item {
  display: none; }

body.external-form #request-view-tabs-tile #request-view-step-tile[data-is-anonymous="1"] #externalstepdetails #external-step-actions a.reassign {
  display: none; }

body.external-form #request-view-tabs-tile #request-view-step-tile[data-is-anonymous="1"] #externalstepheader .activity-item {
  display: none; }

body.external-form #request-view-tabs-tile #request-view-step-tile[data-is-anonymous="1"] #externalstepheader a#externalstep-nav-previous {
  display: none; }

body.external-form #request-view-tabs-tile #request-view-step-tile[data-is-anonymous="1"] #externalstepheader a[data-qa="return-tracker"] {
  display: none; }

body.external-form #request-view-tabs-tile[data-isnoaction="1"] #logo-account-wrapper + div {
  display: none; }

body.external-form #request-view-tabs-tile[data-isnoaction="1"] h4.qa-step-instruction-title {
  display: none; }

body.external-form #request-view-tabs-tile[data-isnoaction="1"] [data-qa="qa-step-instruction-list"] {
  margin-left: 0; }

body.external-form #request-view-tabs-tile[data-isnoaction="1"] #externalstepdetails {
  display: none; }

body.external-form #request-view-tabs-tile[data-isnoaction="1"] p[data-qa="step-auto-complete"] {
  display: none; }

body.external-form .usertest #request-view-tabs-tile #request-view-step-tile .pin {
  display: none !important; }

body.external-form .usertest #request-view-tabs-tile #request-view-step-tile .request-steps .step {
  position: relative; }
  body.external-form .usertest #request-view-tabs-tile #request-view-step-tile .request-steps .step:before {
    content: "PREVIEW";
    font-size: 10em;
    transform: rotate(-20deg);
    display: block;
    position: absolute;
    left: 15%;
    top: 25%;
    font-weight: bold;
    color: #9E9E9E;
    opacity: .25; }

body.external-form .usertest #request-view-tabs-tile #request-view-step-tile .step-detail-notes > h4:before {
  font-family: "FontAwesome";
  content: "\f059";
  margin-right: 5px;
  animation-fill-mode: both;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: wobble;
  animation-timing-function: ease-in-out;
  display: inline-block; }

#step-external #content[data-messagetype="NotFound"] .panel-heading:before {
  font-family: "FontAwesome";
  content: "\f071";
  padding: 0 0.2em; }

#step-external #content[data-messagetype="NotFound"] .panel-heading:after {
  content: "Oops!"; }

#step-external #content[data-messagetype="NotFound"] .panel-message-guide .external-message {
  height: 100px; }
  #step-external #content[data-messagetype="NotFound"] .panel-message-guide .external-message:after {
    content: "The content you're looking for has either been deleted or canceled."; }

#step-external #content[data-messagetype="NotFound"] .panel-message-guide .external-heading:after {
  content: "Sorry, the content cannot be found."; }

#step-external #content[data-messagetype="AccessDenied"] .panel-heading:before {
  font-family: "FontAwesome";
  content: "\f023";
  padding: 0 0.2em; }

#step-external #content[data-messagetype="AccessDenied"] .panel-heading:after {
  content: "Oops!"; }

#step-external #content[data-messagetype="AccessDenied"] .panel-message-guide {
  background-image: url(https://iwcdn.s3.amazonaws.com/pipeline/owlbert-oops-brown-staring.png); }
  #step-external #content[data-messagetype="AccessDenied"] .panel-message-guide .external-message {
    height: 100px; }
    #step-external #content[data-messagetype="AccessDenied"] .panel-message-guide .external-message:after {
      content: "To see the content, please ask someone associated with it to make you a follower or add you as a member of the team who owns the content."; }
  #step-external #content[data-messagetype="AccessDenied"] .panel-message-guide .external-heading:after {
    content: "Sorry, you do not have access."; }

#step-external #content[data-messagetype="NotStepOwner"] .panel-heading:before {
  font-family: "FontAwesome";
  content: "\f023";
  padding: 0 0.2em; }

#step-external #content[data-messagetype="NotStepOwner"] .panel-heading:after {
  content: "Oops!"; }

#step-external #content[data-messagetype="NotStepOwner"] .panel-message-guide {
  background-image: url(https://iwcdn.s3.amazonaws.com/pipeline/owlbert-oops-brown-staring.png); }
  #step-external #content[data-messagetype="NotStepOwner"] .panel-message-guide .external-message {
    height: 100px; }
    #step-external #content[data-messagetype="NotStepOwner"] .panel-message-guide .external-message:after {
      content: "To see the content, try using the link that was included in your email."; }
  #step-external #content[data-messagetype="NotStepOwner"] .panel-message-guide .external-heading:after {
    content: "Sorry, you are no longer the step owner."; }

#step-external #content[data-messagetype="StepNotOpen"] .panel-heading:before {
  font-family: "FontAwesome";
  content: "\f00c";
  padding: 0 0.2em; }

#step-external #content[data-messagetype="StepNotOpen"] .panel-heading:after {
  content: "Step Already Completed"; }

#step-external #content[data-messagetype="StepNotOpen"] .panel-message-guide .external-message {
  height: 100px; }
  #step-external #content[data-messagetype="StepNotOpen"] .panel-message-guide .external-message:after {
    content: "Your step has already been completed."; }

#step-external #content[data-messagetype="StepNotOpen"] .panel-message-guide .external-heading:after {
  content: "Step Complete"; }

#step-external #content[data-messagetype="StepKickback"] .panel-heading:before {
  font-family: "FontAwesome";
  content: "\f00c";
  padding: 0 0.2em; }

#step-external #content[data-messagetype="StepKickback"] .panel-heading:after {
  content: "Step Kicked Back."; }

#step-external #content[data-messagetype="StepKickback"] .panel-message-guide .external-message {
  height: 100px; }
  #step-external #content[data-messagetype="StepKickback"] .panel-message-guide .external-message:after {
    content: "Your step has been kicked back to a previous step. No action is needed for your step at this time."; }

#step-external #content[data-messagetype="StepKickback"] .panel-message-guide .external-heading:after {
  content: "Step Kicked Back"; }

#step-external #content[data-messagetype="StepComplete"] .panel-heading:before {
  font-family: "FontAwesome";
  content: "\f00c";
  padding: 0 0.2em; }

#step-external #content[data-messagetype="StepComplete"] .panel-heading:after {
  content: "Success"; }

#step-external #content[data-messagetype="StepComplete"] .panel-message-guide .external-message {
  height: 100px; }
  #step-external #content[data-messagetype="StepComplete"] .panel-message-guide .external-message:after {
    content: "Your step has been completed."; }

#step-external #content[data-messagetype="StepComplete"] .panel-message-guide .external-heading:after {
  content: "Step Complete"; }

#step-external #content[data-messagetype="StepUpdated"] .panel-heading:before {
  font-family: "FontAwesome";
  content: "\f00c";
  padding: 0 0.2em; }

#step-external #content[data-messagetype="StepUpdated"] .panel-heading:after {
  content: "Success"; }

#step-external #content[data-messagetype="StepUpdated"] .panel-message-guide .external-message {
  height: 100px; }
  #step-external #content[data-messagetype="StepUpdated"] .panel-message-guide .external-message:after {
    content: "Your step has been updated."; }

#step-external #content[data-messagetype="StepUpdated"] .panel-message-guide .external-heading:after {
  content: "Step Updated"; }

#step-external #content .complete-message .progress {
  height: 1rem; }

#step-external .step {
  border: none !important; }
  #step-external .step .step-detail {
    background-color: white !important; }
  #step-external .step .step-duedates {
    color: #D32F2F !important;
    float: none !important; }
    #step-external .step .step-duedates .text .date:before {
      content: "Due "; }
    #step-external .step .step-duedates[data-useduedates="0"] {
      display: none; }
    #step-external .step .step-duedates[data-ispastdue="0"] .step-pastdue {
      display: none; }

#step-external #externalstepdetails.disabled button {
  pointer-events: none;
  color: #424242;
  background-color: #E0E0E0;
  border-color: #E0E0E0; }

#step-external #externalstepdetails.disabled .btn {
  pointer-events: none;
  color: #424242;
  background-color: #E0E0E0;
  border-color: #E0E0E0; }

#step-external #externalstepdetails.disabled .form-control {
  pointer-events: none;
  background-color: #e9ecef;
  opacity: 1; }

#step-external #externalstepdetails.disabled a.delete-button-hover {
  pointer-events: none;
  color: #9E9E9E !important; }

#ExternalStepCompleted .panel-heading:before {
  font-family: "FontAwesome";
  content: "\f00c";
  padding: 0 0.2em; }

#ExternalStepCompleted .panel-heading:after {
  content: "Success"; }

#ExternalStepCompleted .panel-message-guide .external-message {
  height: 100px; }
  #ExternalStepCompleted .panel-message-guide .external-message:after {
    content: "Your step has been completed."; }

#ExternalStepCompleted .panel-message-guide .external-heading:after {
  content: "Step Complete"; }

#ExternalStepUpdated .panel-heading:before {
  font-family: "FontAwesome";
  content: "\f00c";
  padding: 0 0.2em; }

#ExternalStepUpdated .panel-heading:after {
  content: "Success"; }

#ExternalStepUpdated .panel-message-guide .external-message {
  height: 100px; }
  #ExternalStepUpdated .panel-message-guide .external-message:after {
    content: "Your step has been updated."; }

#ExternalStepUpdated .panel-message-guide .external-heading:after {
  content: "Step Updated"; }

@media (max-width: 992px) {
  body.external-form #request-view-tabs-tile #request-view-step-tile .pin {
    left: unset !important;
    right: -35px;
    padding: .4em 1.2em .4em .7em;
    border-radius: 0rem 10rem 10rem 0rem; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .pin:after {
      border-width: 16px;
      border-right-width: 25px;
      border-left-width: 0 !important;
      border-left-color: initial;
      left: unset !important;
      right: 100%; }
    body.external-form #request-view-tabs-tile #request-view-step-tile .pin.pin-warning:after {
      border-right-color: #FB8C00; }
  body.external-form #request-view-tabs-tile #request-view-step-tile .step-forms .pin {
    top: -20px; } }

@media (max-width: 767px) {
  body.external-form #contentwrapper #content #caf-external > .row {
    margin-right: 0;
    margin-left: 0; }
    body.external-form #contentwrapper #content #caf-external > .row > .col-xl-10 {
      padding-right: 0;
      padding-left: 0; }
      body.external-form #contentwrapper #content #caf-external > .row > .col-xl-10 > .panel:before {
        border-top-left-radius: 0;
        border-top-right-radius: 0; }
  body.external-form #contentwrapper #content #request-view-tabs-tile.row {
    margin-right: 0;
    margin-left: 0; }
  body.external-form #contentwrapper #content #request-view-tabs-tile #request-view-step-tile.col-xl-8 {
    padding-right: 0;
    padding-left: 0; }
  body.external-form #contentwrapper #content #request-view-tabs-tile #request-view-step-tile > .panel:before {
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  body.external-form #contentwrapper #content #request-view-tabs-tile #request-view-step-tile .pin {
    right: 0px; }
    body.external-form #contentwrapper #content #request-view-tabs-tile #request-view-step-tile .pin#pin-sign {
      display: inline-block !important;
      left: unset !important;
      position: relative;
      bottom: 90px;
      top: unset; }
  body.external-form #contentwrapper #content #request-view-tabs-tile #request-view-step-tile #external-step-actions {
    width: 100%; } }

@media (min-width: 1260px) and (max-width: 1291px) {
  .offset-xl-3 {
    margin-left: 8.333333%; }
  .offset-xl-2 {
    margin-left: 8.333333%; }
  .col-xl-6 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }
  .col-xl-8 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; } }

@media print {
  body.external-form {
    font-family: "Inter", "Open Sans", sans-serif; }
    body.external-form #mainbody:before {
      display: none; } }

body.external-form #external-ask-steps-details tbody tr td {
  position: relative; }
  body.external-form #external-ask-steps-details tbody tr td.step-status i.fa {
    margin-top: 0.1em; }
  body.external-form #external-ask-steps-details tbody tr td.step-desc {
    width: 50%; }
  body.external-form #external-ask-steps-details tbody tr td.step-owner .step-desc-container > div .avatar {
    float: left; }
  body.external-form #external-ask-steps-details tbody tr td.step-owner .step-desc-container > div .username {
    line-height: 1.2em; }
  body.external-form #external-ask-steps-details tbody tr td .step-desc-container > .badge {
    margin-left: 0; }
  body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"], body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"], body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"], body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"] {
    /* border-top: none; */
    padding: 0; }
    body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"] .step-desc-container, body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"] .step-desc-container, body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"] .step-desc-container, body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"] .step-desc-container {
      display: none; }
    body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"].step-desc:before, body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"].step-desc:before, body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"].step-desc:before, body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"].step-desc:before {
      content: "...";
      display: block;
      text-align: left;
      position: relative;
      left: calc(.75rem + 11px);
      line-height: 0.75em;
      top: -0.25em;
      color: #424242; }
    body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"][data-iscurrentstep="true"], body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"][data-iscurrentstep="true"], body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"][data-iscurrentstep="true"], body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"][data-iscurrentstep="true"] {
      width: auto;
      box-shadow: none;
      left: 0; }
      body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"][data-iscurrentstep="true"] .rc-collapse-header, body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"][data-iscurrentstep="true"] .rc-collapse-header, body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"][data-iscurrentstep="true"] .rc-collapse-header, body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"][data-iscurrentstep="true"] .rc-collapse-header {
        left: 0; }
        body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"][data-iscurrentstep="true"] .rc-collapse-header:before, body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"][data-iscurrentstep="true"] .rc-collapse-header:before, body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"][data-iscurrentstep="true"] .rc-collapse-header:before, body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"][data-iscurrentstep="true"] .rc-collapse-header:before {
          content: "\f0e7";
          font-family: "FontAwesome";
          line-height: 2rem;
          top: 0;
          display: inline-block;
          width: auto;
          margin-right: 5px;
          font-size: 0.8em;
          animation-duration: 8s;
          animation-name: flash;
          animation-iteration-count: infinite; }
        body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"][data-iscurrentstep="true"] .rc-collapse-header:after, body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"][data-iscurrentstep="true"] .rc-collapse-header:after, body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"][data-iscurrentstep="true"] .rc-collapse-header:after, body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"][data-iscurrentstep="true"] .rc-collapse-header:after {
          content: "Execute automation ...";
          line-height: 2rem;
          top: 0;
          display: inline-block;
          width: auto;
          font-size: 0.8em;
          position: relative;
          left: 72px; }
        body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"][data-iscurrentstep="true"] .rc-collapse-header .clearfix, body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"][data-iscurrentstep="true"] .rc-collapse-header .clearfix, body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"][data-iscurrentstep="true"] .rc-collapse-header .clearfix, body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"][data-iscurrentstep="true"] .rc-collapse-header .clearfix {
          display: none; }
      body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:before, body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:before, body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:before, body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:before {
        content: "\f017"; }
      body.external-form #external-ask-steps-details tbody tr td[data-isbotowner="1"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:after, body.external-form #external-ask-steps-details tbody tr td[data-step-status="Skipped"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:after, body.external-form #external-ask-steps-details tbody tr td[data-step-type="1"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:after, body.external-form #external-ask-steps-details tbody tr td[data-step-type="6"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:after {
        content: "Delay based on timer ..."; }
  body.external-form #external-ask-steps-details tbody tr td:not([data-isbotowner="1"]) + [data-isbotowner="1"] {
    border-top: 1px solid #E0E0E0; }
  body.external-form #external-ask-steps-details tbody tr td:not([data-isbotowner="1"]):not([data-step-status="Skipped"]) + :not([data-isbotowner="1"])[data-step-status="Skipped"] {
    border-top: 1px solid #E0E0E0; }

body.external-form #external-ask-steps-details tbody tr:last-child td {
  border-bottom: 1px solid #E0E0E0; }

/* 
Component: Ask Step: External

### Standard UX

- The `First Name`, `Last Name`, and `Email` fields will be auto-populated.
- The `Cannot Complete` button only has the `Kick back to Flow Owner` option.
- Client <strong>Logo Specifications and Color</strong> documented on Insight: <a href="https://insight.innovativewayinc.com/products/pipeline/customer-success/onboarding-overview/" target="_blank">Client Onboarding - Account Journey</a>

### Components

- [`Button`](section-elementbuttons.html)

Markup: request-step-external.hbs

Weight: 100

Styleguide ComponentAskStepExternal
*/
/* 
With Files

Markup: request-step-external-files.hbs

Weight: 100

Styleguide ComponentAskStepExternal.Files
*/
/* 
With Instructions

Markup: request-step-external-instructions.hbs

Weight: 100

Styleguide ComponentAskStepExternal.Instructions
*/
/* 
With Notes

Markup: request-step-external-notes.hbs

Weight: 100

Styleguide ComponentAskStepExternal.Notes
*/
/* 
Confirmation

### Standard UX

- Title in the tile must be "Complete your step" followed by the step name
- The tile footer must be gray with 2 color background on the right. Verbiage must match marketing boilerplate.

### Components

- [`Element: Alerts: Block Alerts`](section-elementalerts.html#kssref-elementalerts-block)

### Verbiage
Follow the format and sentence structure in the examples below.

<div class="panel panel-default">
<div class="panel-body">
	<table class="table table-inverse">
	<thead>
	<tr><th>Alert Heading</th><th>Message</th></tr>
	</thead>
	<tbody>
	<tr><td>Step Already Completed</td><td>Your step has already been completed.</td></tr>
	<tr><td>Step Completed</td><td>Your step has been completed.</td></tr>
	<tr><td>Step Kicked Back</td><td>Your step has been kicked back to a previous step. No action is needed for your step at this time.</td></tr>
	<tr><td>Step Updated</td><td>Your step has been updated.</td></tr>
	</tbody>
	</table>
</div>
</div>

Markup: request-step-external-done.hbs

Weight: 100

Styleguide ComponentAskStepExternal.ConfirmationMessages
*/
/* 
Error

### Standard UX

- Title in the tile must be "Complete your step" followed by the step name
- The tile footer must be gray with 2 color background on the right. Verbiage must match marketing boilerplate.

### Components

- [`Element: Alerts: Block Alerts`](section-elementalerts.html#kssref-elementalerts-block)

### Verbiage
Follow the format and sentence structure in the examples below.

<div class="panel panel-default">
<div class="panel-body">
	<table class="table table-inverse">
	<thead>
	<tr><th>Type</th><th>Message</th></tr>
	</thead>
	<tbody>
	<tr><td>Access Denied</td><td>Sorry, you do not have access.</td></tr>
	<tr><td>Not Step Owner</td><td>Sorry, you are no longer the step owner.</td></tr>
	<tr><td>Not Found</td><td>Sorry, the content cannot be found.</td></tr>
	</tbody>
	</table>
</div>
</div>

Markup: request-step-external-error.hbs

Weight: 100

Styleguide ComponentAskStepExternal.Error
*/
body.external-form #caf-external .panel {
  margin-left: 0 !important; }
  body.external-form #caf-external .panel div:not(.row) {
    margin-left: 0 !important; }
  body.external-form #caf-external .panel.panel-card .panel-body {
    margin-left: 0; }
  body.external-form #caf-external .panel.panel-card.panel-callout .panel-body {
    background-color: #EEEEEE;
    animation-name: panelBar;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease;
    padding-bottom: 0.5rem; }

body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body {
  position: relative;
  min-height: 440px; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .form-title .fa.fa-question-circle.animated.rollIn {
    animation-name: flash;
    animation-iteration-count: infinite;
    animation-duration: 6s; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .form-title .fa.fa-question-circle.animated.rollIn:before {
      content: "\f0eb"; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-header small {
    font-size: 0.85rem;
    font-style: italic;
    color: #9E9E9E; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description {
    max-width: 55%; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description > p:first-child {
      font-size: 1.25rem; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description .stat {
      border-left: solid 5px var(--primary);
      padding: 0.75rem 1.25rem;
      border-radius: 1rem;
      background-color: #F5F5F5;
      font-weight: bold;
      animation-name: panelBarPrimary;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: ease;
      padding-bottom: 0.5rem; }
      body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description .stat cite {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.8rem;
        color: #9E9E9E;
        font-weight: normal; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description .promo-left {
      float: right;
      position: relative;
      width: 50%;
      text-align: right;
      top: -1rem; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description p img {
      box-shadow: none; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description p:has(small) {
      line-height: 1rem; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description + p {
      display: none; }
      body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description + p + hr {
        display: none; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description:has(.social-proof.card-deck) {
      padding-bottom: 300px; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .process-description body.external-form.body-caf-scorecard-right #ajax-formdesign-create-ask .social-proof {
      display: none; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .carousel .carousel-indicators li {
    background-color: #BDBDBD; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .carousel .carousel-inner {
    padding: 0 0.25rem 3rem 0.25rem; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .carousel .carousel-inner .card {
      margin-top: 0;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .social-proof.card-deck {
    font-size: 1.15rem;
    border-width: 0;
    padding-top: 0rem;
    padding-bottom: 0rem;
    box-shadow: none;
    position: absolute;
    width: calc(100% - 2.5rem); }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .social-proof.card-deck .card-body {
      line-height: 1.75rem;
      font-weight: 300; }
      body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .social-proof.card-deck .card-body img {
        float: right;
        width: 88px;
        border-radius: 50%;
        margin-left: 1.5rem;
        margin-bottom: 1rem; }
      body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body .social-proof.card-deck .card-body cite {
        display: block;
        font-size: 0.8rem;
        margin-top: 0.5rem;
        line-height: 1rem; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] {
    clear: both;
    padding: 1rem;
    background-color: var(--primary);
    border-radius: 1rem;
    width: 40%;
    margin: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: absolute;
    top: 6rem;
    right: 20px; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] > [id$="-header"].control-group {
      margin-bottom: 0; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] > [id$="-footer"].control-group {
      margin-bottom: 0; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] .row .col-lg .control-group label {
      color: #ffffff; }
      body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] .row .col-lg .control-group label:before {
        color: #ffffff; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] .row .col-lg.col1st:nth-child(3) {
      flex-basis: initial;
      flex-grow: initial; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] .control-group label.fdcheckboxlabel:hover {
      background-color: inherit; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] #ajax-submitpostback-create-ask {
      display: block;
      width: 100%;
      font-size: 1.25rem; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] .social-proof {
      display: none; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body form[data-qa="create-ask-form"] .form-save-actions .form-actions {
      margin-top: 0; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel-body:after {
    content: " ";
    clear: both;
    display: block;
    width: 100%;
    height: 1em; }

body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame[data-is-anonymous="1"] .panel-body {
  min-height: 100px; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame[data-is-anonymous="1"] .panel-body .process-description {
    max-width: 70%; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame[data-is-anonymous="1"] .panel-body form[data-qa="create-ask-form"] {
    clear: both;
    padding: 0;
    background-color: transparent;
    border: none;
    width: 25%;
    margin: auto;
    box-shadow: none;
    position: absolute;
    top: 8rem;
    right: 20px; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame[data-is-anonymous="1"] .panel-body form[data-qa="create-ask-form"] .form-save-actions #ajax-submitpostback-create-ask {
      animation-fill-mode: both;
      animation-duration: 8s;
      animation-name: shake;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      font-size: 1.5rem; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container .pin {
  width: 1px !important;
  height: 1px !important;
  overflow: clip;
  padding: 0 !important;
  background-color: transparent;
  color: transparent; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container .pin:after {
    display: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container fieldset h3 {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container fieldset .fieldset-fields {
  margin-left: 0px !important; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container a.formcollapse {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container a.formexpand {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] {
  counter-reset: section; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group {
    margin-bottom: 1.25rem;
    counter-increment: section; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group .fieldprompt:before {
      content: counter(section) ") ";
      color: #9E9E9E;
      font-weight: normal; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group:has(.pin) {
      background-color: #EEEEEE;
      transform: scale(1.1);
      padding: 1rem 1.25rem 1rem 1.25rem;
      border-radius: 1rem;
      border: 1px solid #E0E0E0;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
      body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group:has(.pin) .pin {
        top: 5px;
        left: -100px !important; }
        body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group:has(.pin) .pin:after {
          left: 80px; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] table.formlistgrid {
    margin-left: 36px; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .step-forms h4:first-child {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .scorecard-motivator {
  margin: 2rem 0;
  margin-left: 0 !important;
  position: relative;
  background-color: var(--primary);
  padding: 1rem;
  border-radius: 1rem; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .scorecard-motivator > img {
    width: 200px;
    box-shadow: none;
    border-radius: 0.75rem;
    display: inline-block;
    padding: 0 !important; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .scorecard-motivator > p {
    position: absolute !important;
    color: #ffffff;
    font-size: 2rem;
    top: calc(50% - 40px);
    left: calc(200px + 2rem);
    line-height: 2.5rem;
    max-width: 250px; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .scorecard-guide {
  font-style: italic;
  border-top: dashed 1px #E0E0E0;
  border-bottom: dashed 1px #E0E0E0;
  margin: 1rem 0 1rem 0;
  padding: 1rem 0 1rem 0; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .scorecard-guide .badge-demo {
    font-style: normal; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails .step-completer {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails #external-step-actions .btn.complete.btn-working + .working-message:before {
  font-family: "FontAwesome";
  content: "\f05a";
  font-size: 0.8rem;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: -2rem; }

body.external-form.body-caf-scorecard-right #step-external #externalstepdetails #external-step-actions .btn.complete.btn-working + .working-message:after {
  content: "Please wait while your score is being calculated...";
  font-size: 0.8rem;
  font-style: italic;
  display: inline-block;
  position: absolute;
  left: 1rem;
  bottom: -2rem; }

body.external-form.body-caf-scorecard-right #step-external #request-view-tabs-tile[data-process-step-order="1"] #externalstepheader .steps-header > div > strong {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #request-view-tabs-tile[data-process-step-order="1"] #externalstepheader .steps-header .form-title:before {
  content: "Please answer the questions below";
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem; }

body.external-form.body-caf-scorecard-right #step-external #request-view-tabs-tile[data-process-step-order="1"][data-step-status="1"] #externalstepdetails strong {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #request-view-tabs-tile[data-step-status="1"] #externalstepheader #externalstepdetails a[data-qa="return-tracker"] {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #request-view-tabs-tile[data-step-status="1"] #externalstepheader #externalstepdetails #externalstep-nav-previous {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .readtime {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .sys-message[data-qa="step-auto-complete"] {
  display: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .scorecard-motivator {
  margin: 2rem 0;
  margin-left: 0 !important;
  position: relative;
  background-color: var(--primary);
  padding: 1rem;
  border-radius: 1rem; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .scorecard-motivator > img {
    width: 200px;
    box-shadow: none;
    border-radius: 0.75rem;
    display: inline-block;
    padding: 0 !important; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .scorecard-motivator > p {
    position: absolute !important;
    color: #ffffff;
    font-size: 2rem;
    top: calc(50% - 40px);
    left: calc(200px + 2rem);
    line-height: 2.5rem;
    max-width: 250px; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .scorecard-guide {
  font-style: italic;
  border-top: dashed 1px #E0E0E0;
  border-bottom: dashed 1px #E0E0E0;
  margin: 1rem 0 1rem 0;
  padding: 1rem 0 1rem 0; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .scorecard-guide .badge-demo {
    font-style: normal; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card .card-footer.card-footer-previous .btn {
  box-shadow: none; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card .card-footer.card-footer-previous .btn:hover {
    box-shadow: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card .card-footer.card-footer-previous .previous-title:before {
  content: "Your Previous Score:"; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse {
  margin-left: 0; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse div {
    margin-left: 0; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse a[data-toggle="collapse"][aria-expanded='false']::before {
    font-family: "FontAwesome";
    margin-right: 10px;
    color: #424242;
    content: "\f107"; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse a[data-toggle="collapse"][aria-expanded='true']::before {
    font-family: "FontAwesome";
    margin-right: 10px;
    color: #424242;
    content: "\f106"; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-header span.score {
    font-weight: normal; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul {
    margin-bottom: 0;
    padding-left: 26px; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul + p {
      margin-top: 1rem; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul li {
      position: relative;
      padding-left: 10px; }
      body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul li span.indicator[data-value="✔️ "] {
        display: none; }
        body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul li span.indicator[data-value="✔️ "] + .fieldprompt-category:before {
          font-family: "FontAwesome";
          margin-right: 10px;
          color: #FFFFFF;
          content: "\f00c";
          position: absolute;
          left: -19px;
          background-color: #66BB6A;
          border-radius: 4px;
          padding: 0 2px;
          line-height: 1.2rem;
          top: 3px; }
      body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul li span.indicator[data-value="➖ "] {
        display: none; }
        body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul li span.indicator[data-value="➖ "] + .fieldprompt-category:before {
          font-family: "FontAwesome";
          margin-right: 10px;
          color: #FFFFFF;
          content: "\f068";
          position: absolute;
          left: -19px;
          background-color: #FFA726;
          border-radius: 4px;
          padding: 0 3px 0 4px;
          line-height: 1.2rem;
          top: 3px; }
      body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul li span.indicator[data-value="❌ "] {
        display: none; }
        body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul li span.indicator[data-value="❌ "] + .fieldprompt-category:before {
          font-family: "FontAwesome";
          margin-right: 10px;
          color: #FFFFFF;
          content: "\f00d";
          position: absolute;
          left: -19px;
          background-color: #EF5350;
          border-radius: 4px;
          padding: 0 3px 0 4px;
          line-height: 1.2rem;
          top: 3px; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body ul.text-muted {
      color: #BDBDBD !important; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show span.field-prompt:not(:has(.indicator)) + span.field-value {
    padding-left: 1rem !important;
    padding-right: 1rem !important; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show span.field-value:has(p) {
    display: block;
    width: 100%; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show span.field-value ul,
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show span.field-value ol {
    padding-left: 26px;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show:not(.field-previous) span.field-prompt:not(:has(.indicator)) + span.field-value:not(:has(p)):not(:has(ol)):not(:has(ul)) {
    display: block !important;
    width: 100%;
    padding-top: 0.75em !important;
    padding-bottom: 0.5rem !important; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show.field-previous .field-value {
    background-color: #F5F5F5 !important;
    color: #9E9E9E !important; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show.field-previous .field-value:after {
      content: "(Previous)";
      font-size: 0.7rem;
      margin-left: 10px;
      font-family: "Inter", "Open Sans", sans-serif; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show.field-previous:after {
    content: "\f178";
    font-family: "FontAwesome";
    margin-right: 5px;
    margin-left: 5px; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show.field-previous.field-previous-nochange .field-value {
    display: none !important; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-collapse .card-body .form-entries .field.field-show.field-previous.field-previous-nochange:after {
    display: none !important; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-recommendation .card-body ul.form-entries {
  list-style: none;
  padding: 0; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-recommendation .card-body ul.form-entries li .field .field-prompt {
    display: none; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-recommendation .card-body ul.form-entries li .field .field-value {
    margin-bottom: 1rem;
    font-size: 0.9rem !important;
    background-color: inherit !important;
    padding: 0 !important;
    font-family: "Inter", "Open Sans", sans-serif !important;
    line-height: 1.5 !important; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-recommendation .card-body ul.form-entries li .field:hover .field-value {
    box-shadow: none; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-recommendation .card-body .card-recommendation-name {
  font-size: 0.8rem;
  font-weight: bold; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-recommendation .card-body .card-recommendation-name ul.form-entries li .field-value {
    font-size: 1rem !important;
    background-color: #fef6f9 !important;
    color: #E91E63 !important;
    padding: 2px 4px !important;
    font-family: monospace !important;
    font-weight: normal !important; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-recommendation .card-header img {
  border-radius: 50%;
  width: 48px;
  padding: 2px;
  margin-right: 10px; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-recommendation .card-header .card-recommendation-author {
  font-weight: bold;
  font-size: 1rem;
  display: block;
  margin-top: 0.1rem; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .card.card-recommendation .card-header .card-recommendation-author em {
    display: block;
    font-weight: normal;
    font-size: 0.9rem; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .progress-wrapper {
  padding-top: 35px;
  margin-top: 3em;
  margin-left: 0;
  position: relative;
  margin-bottom: 2rem; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .progress-wrapper i {
    position: absolute;
    top: 0;
    font-size: 2rem; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepheader .progress-wrapper i.progress-self:after {
      content: "You";
      font-family: "Inter", "Open Sans", sans-serif;
      font-size: 1rem;
      font-weight: bold;
      position: absolute;
      left: -11px;
      top: -1rem;
      display: inline-block;
      width: 40px;
      text-align: center; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepheader .progress-wrapper i.progress-best {
      color: #81C784; }
      body.external-form.body-caf-scorecard-right #step-external #externalstepheader .progress-wrapper i.progress-best:after {
        content: "Best-in-Class";
        font-size: 1rem;
        font-family: "Inter", "Open Sans", sans-serif;
        position: absolute;
        left: -41px;
        top: -1rem;
        display: inline-block;
        width: 120px;
        text-align: center; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepheader .progress-wrapper i.progress-average {
      color: #E0E0E0; }
      body.external-form.body-caf-scorecard-right #step-external #externalstepheader .progress-wrapper i.progress-average:after {
        content: "Average";
        font-size: 1rem;
        font-family: "Inter", "Open Sans", sans-serif;
        color: #BDBDBD;
        position: absolute;
        left: -30px;
        top: -1rem;
        display: inline-block;
        width: 80px;
        text-align: center; }

body.external-form.body-caf-scorecard-right #step-external #externalstepheader .nav-tabs {
  margin-top: 1.5rem; }
  body.external-form.body-caf-scorecard-right #step-external #externalstepheader .nav-tabs .nav-item {
    background-color: #EEEEEE;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    margin: 0 0.25rem; }
    body.external-form.body-caf-scorecard-right #step-external #externalstepheader .nav-tabs .nav-item .active {
      background-color: #E0E0E0;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem; }
      body.external-form.body-caf-scorecard-right #step-external #externalstepheader .nav-tabs .nav-item .active:focus {
        outline: 0; }
      body.external-form.body-caf-scorecard-right #step-external #externalstepheader .nav-tabs .nav-item .active:focus-visible {
        outline: 0; }

body.external-form.body-caf-scorecard-right.caf-expert #caf-external .external-frame .panel-body .process-header #logo-account-wrapper, body.external-form.body-caf-scorecard-right.ex #caf-external .external-frame .panel-body .process-header #logo-account-wrapper {
  border-radius: 50% !important; }

body.external-form.body-caf-scorecard-right.caf-expert #caf-external .external-frame .panel-body .process-header .form-title, body.external-form.body-caf-scorecard-right.ex #caf-external .external-frame .panel-body .process-header .form-title {
  display: none; }
  body.external-form.body-caf-scorecard-right.caf-expert #caf-external .external-frame .panel-body .process-header .form-title + p, body.external-form.body-caf-scorecard-right.ex #caf-external .external-frame .panel-body .process-header .form-title + p {
    display: none; }

body.external-form.body-caf-scorecard-right.caf-expert #caf-external .external-frame .panel-body .process-description .lead, body.external-form.body-caf-scorecard-right.ex #caf-external .external-frame .panel-body .process-description .lead {
  font-size: 1.75rem !important;
  line-height: 2rem !important; }

body.external-form.body-caf-scorecard-right.caf-expert #step-external #request-view-step-tile .panel-body .steps-header #logo-account-wrapper, body.external-form.body-caf-scorecard-right.ex #step-external #request-view-step-tile .panel-body .steps-header #logo-account-wrapper {
  border-radius: 50% !important; }

body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body .process-header .form-title, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body .process-header .form-title {
  display: none; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body .process-header .form-title + p, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body .process-header .form-title + p {
    display: none; }

body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body .process-description, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body .process-description {
  min-height: 600px; }

body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body .caf-required, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body .caf-required {
  display: none; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body .caf-required + hr, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body .caf-required + hr {
    display: none; }

body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"], body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] {
  background-color: #1A237E;
  top: 5rem; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .row, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .row {
    margin-bottom: 0; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .label-text, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .label-text {
    color: #FFFFFF;
    font-size: 0.8rem; }
    body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .label-text .fa:before, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .label-text .fa:before {
      color: #FFFFFF; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group label, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group label {
    color: #FFFFFF; }
    body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group label:before, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group label:before {
      color: #FFFFFF; }
    body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group label.fdradiolabel :hover, body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group label.fdcheckboxlabel :hover, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group label.fdradiolabel :hover, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group label.fdcheckboxlabel :hover {
      background-color: inherit; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group .fieldprompt, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group .fieldprompt {
    color: #FFFFFF; }
    body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group .fieldprompt:before, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group .fieldprompt:before {
      color: #FFFFFF; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group .highlight, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group .highlight {
    background-color: #7986CB; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group .fieldformat, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group .fieldformat {
    color: #FFFFFF; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group #fb_item_contact_email ~ .help-inline .fieldformat:not(:empty), body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] .control-group #fb_item_contact_email ~ .help-inline .fieldformat:not(:empty) {
    display: block !important; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] i.fa:before, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] i.fa:before {
    color: #FFFFFF; }
  body.external-form.body-caf-scorecard-right.caf-intake #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] h4, body.external-form.body-caf-scorecard-right.in #caf-external .external-frame .panel-body form[data-qa="create-ask-form"] h4 {
    color: #FFFFFF !important;
    text-transform: unset !important; }

body.external-form.body-caf-scorecard-right.caf-intake #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] fieldset h3, body.external-form.body-caf-scorecard-right.in #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] fieldset h3 {
  display: block; }

body.external-form.body-caf-scorecard-right.caf-intake #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] fieldset .fieldset-fields, body.external-form.body-caf-scorecard-right.in #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] fieldset .fieldset-fields {
  margin-left: 26px !important; }

body.external-form.body-caf-scorecard-right.caf-intake #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group .fieldprompt:before, body.external-form.body-caf-scorecard-right.in #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group .fieldprompt:before {
  display: none; }

body.external-form.body-caf-scorecard-right.caf-intake #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group:has(.pin), body.external-form.body-caf-scorecard-right.in #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group:has(.pin) {
  background-color: inherit;
  transform: none;
  padding: 0;
  border-radius: 0;
  border-width: 0;
  box-shadow: none; }
  body.external-form.body-caf-scorecard-right.caf-intake #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group:has(.pin) .pin, body.external-form.body-caf-scorecard-right.in #step-external #externalstepdetails .form-fields form .form-container div[id$="-form"] .control-group:has(.pin) .pin {
    left: -122px !important;
    top: -1px; }

@media (max-width: 767px) {
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel {
    box-shadow: none; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel .panel-body .process-description {
      max-width: unset;
      padding-bottom: 0px !important; }
      body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel .panel-body .process-description .social-proof {
        display: none; }
    body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel .panel-body form[data-qa="create-ask-form"] {
      width: unset;
      position: relative;
      top: 1rem;
      right: unset; }
      body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame .panel .panel-body form[data-qa="create-ask-form"] .social-proof {
        display: block;
        position: relative; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame[data-is-anonymous="1"] .panel-body .process-description {
    max-width: unset; }
  body.external-form.body-caf-scorecard-right #caf-external.caf-scorecard-right .external-frame[data-is-anonymous="1"] .panel-body form[data-qa="create-ask-form"] {
    width: unset;
    position: relative;
    top: 1rem;
    right: unset; }
  body.external-form.body-caf-scorecard-right #step-external #request-view-step-tile #externalstepdetails form .form-container div[id$="-form"] .control-group .formlistgrid {
    margin-left: 16px; }
    body.external-form.body-caf-scorecard-right #step-external #request-view-step-tile #externalstepdetails form .form-container div[id$="-form"] .control-group .formlistgrid td.formfield {
      display: block; }
  body.external-form.body-caf-scorecard-right #step-external #request-view-step-tile #externalstepdetails form .form-container div[id$="-form"] .control-group:has(.pin) {
    background-color: inherit !important;
    transform: none !important;
    padding: 0 !important;
    border-width: 0px !important;
    box-shadow: none !important; }
    body.external-form.body-caf-scorecard-right #step-external #request-view-step-tile #externalstepdetails form .form-container div[id$="-form"] .control-group:has(.pin) .pin {
      top: -20px !important;
      left: unset !important; }
      body.external-form.body-caf-scorecard-right #step-external #request-view-step-tile #externalstepdetails form .form-container div[id$="-form"] .control-group:has(.pin) .pin:after {
        left: 80px; }
  body.external-form.body-caf-scorecard-right.caf-expert #caf-external .external-frame .panel-body .process-header #logo-account-wrapper, body.external-form.body-caf-scorecard-right.ex #caf-external .external-frame .panel-body .process-header #logo-account-wrapper {
    top: -85px !important; }
    body.external-form.body-caf-scorecard-right.caf-expert #caf-external .external-frame .panel-body .process-header #logo-account-wrapper #logo-account img, body.external-form.body-caf-scorecard-right.ex #caf-external .external-frame .panel-body .process-header #logo-account-wrapper #logo-account img {
      width: 88px !important;
      height: 88px !important; }
  body.external-form.body-caf-scorecard-right.caf-expert #caf-external .external-frame .panel-body .process-description .lead, body.external-form.body-caf-scorecard-right.ex #caf-external .external-frame .panel-body .process-description .lead {
    padding-right: 6rem; }
  body.external-form.body-caf-scorecard-right.caf-expert #step-external #request-view-step-tile .panel-body .steps-header #logo-account-wrapper, body.external-form.body-caf-scorecard-right.ex #step-external #request-view-step-tile .panel-body .steps-header #logo-account-wrapper {
    top: -85px !important; }
    body.external-form.body-caf-scorecard-right.caf-expert #step-external #request-view-step-tile .panel-body .steps-header #logo-account-wrapper #logo-account img, body.external-form.body-caf-scorecard-right.ex #step-external #request-view-step-tile .panel-body .steps-header #logo-account-wrapper #logo-account img {
      width: 88px !important;
      height: 88px !important; } }

@media print {
  body.external-form.body-caf-scorecard-right #step-external .nav-tabs {
    display: none; }
  body.external-form.body-caf-scorecard-right #step-external .calendly-inline-widget {
    display: none; }
  body.external-form.body-caf-scorecard-right #step-external .sys-message {
    display: none; }
  body.external-form.body-caf-scorecard-right #step-external .step #externalstepheader .card {
    border-radius: 0.5rem;
    margin-bottom: 1rem; }
    body.external-form.body-caf-scorecard-right #step-external .step #externalstepheader .card .card-body.collapse:not(.show) {
      display: block; }
    body.external-form.body-caf-scorecard-right #step-external .step #externalstepheader .card.card-recommendation .card-body .form-entries {
      padding-left: 0; }
      body.external-form.body-caf-scorecard-right #step-external .step #externalstepheader .card.card-recommendation .card-body .form-entries .field .field-prompt {
        display: none; }
  body.external-form.body-caf-scorecard-right #step-external .step #externalstepheader #logo-account-wrapper + div {
    display: none; }
  body.external-form.body-caf-scorecard-right #step-external .step #externalstepheader .qa-step-instruction-title {
    display: none; }
  body.external-form.body-caf-scorecard-right #step-external .step #externalstepheader .card-deck .card .card-body .card-score {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    float: right;
    font-size: 2rem;
    padding: 1.5rem 1rem;
    line-height: 2.4rem;
    color: #FFFFFF;
    margin-left: 1rem;
    margin-bottom: 1rem;
    background-color: #616161;
    width: 90px;
    text-align: center; }
  body.external-form.body-caf-scorecard-right #step-external .step #externalstepheader .card-deck.card-score-warning {
    background-color: #FFA726; }
  body.external-form.body-caf-scorecard-right #step-external .step #externalstepheader .card-deck.card-score-danger {
    background-color: #EF5350; }
  body.external-form.body-caf-scorecard-right #external-marketing {
    display: none !important; } }

body.external-form.body-lander {
  background-color: #FFFFFF; }
  body.external-form.body-lander #mainbody:before {
    display: none; }
  body.external-form.body-lander #mainbody #contentwrapper #content {
    padding-bottom: 0;
    padding-top: 0; }
    body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame {
      max-width: unset !important;
      margin-left: 0;
      flex: 0 0 100%;
      max-width: 100%; }
      body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel {
        box-shadow: none; }
        body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel:before {
          display: none; }
        body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header {
          text-align: center;
          padding-bottom: 1rem; }
          body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header #logo-account-wrapper {
            top: 0;
            box-shadow: none; }
            body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header #logo-account-wrapper #logo-account img {
              width: 64px;
              height: 64px; }
          body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header .form-title {
            font-size: 3rem; }
            body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header .form-title i {
              display: none; }
            body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header .form-title + p {
              font-size: 1.3rem; }
        body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button {
          text-align: center;
          position: relative;
          margin: 1rem 0; }
          body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button a {
            display: inline-block;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            user-select: none;
            border-width: 1px;
            border-style: solid;
            padding: 0.5rem 1rem;
            font-size: 1.25em;
            line-height: 1.5;
            border-radius: 0.3rem;
            animation-fill-mode: both;
            animation-duration: 8s;
            animation-name: shake;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            color: #424242;
            background-color: #FFFFFF;
            border-color: #424242; }
            body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button a:hover {
              box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
              animation-name: none; }
          body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button.user-button-test a {
            animation-name: none;
            background-color: #FFF3E0;
            border-color: #F57C00;
            position: relative; }
            body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button.user-button-test a:after {
              content: 'Test';
              margin-left: 0.5rem;
              display: inline-block;
              display: inline-block;
              padding: .25em .4em;
              font-size: 75%;
              font-weight: 700;
              line-height: 1;
              text-align: center;
              white-space: nowrap;
              vertical-align: baseline;
              padding-left: 0.6em;
              padding-right: 0.6em;
              position: relative;
              top: -1px;
              border-radius: 10rem;
              background-color: #FF9800;
              color: #FFFFFF; }
            body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button.user-button-test a.btn-working {
              padding-left: 32px;
              pointer-events: none;
              color: #9E9E9E;
              background-color: #E0E0E0;
              border-color: #E0E0E0; }
              body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button.user-button-test a.btn-working:before {
                font-family: "FontAwesome";
                content: "\f110" !important;
                animation: fa-spin 2s infinite linear;
                display: inline-block;
                position: absolute;
                top: 0.5em;
                left: 10px;
                color: #424242; }
          body.external-form.body-lander #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button a:hover {
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  body.external-form.body-lander #footerwrapper {
    display: none; }
  body.external-form.body-lander.body-caf-lander-eclipsetime {
    background-color: var(--primary); }
    body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body {
      padding-bottom: 5rem;
      position: relative;
      padding-top: 4rem;
      margin-top: 5rem;
      margin-bottom: 2rem; }
      body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header #logo-account-wrapper {
        border-radius: 50%;
        padding: 20px;
        right: calc(50% - 52px);
        top: -125px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
        body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header #logo-account-wrapper #logo-account img {
          width: 64px;
          height: 64px; }
      body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body h2 {
        text-align: center;
        margin: 2rem 0; }
      body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body #innerwrapper {
        max-width: 1200px;
        margin: auto;
        margin-left: auto !important; }
      body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body iframe {
        border-radius: 1rem; }
      body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button a {
        color: #FFFFFF;
        padding: .5rem 1.5rem;
        font-size: 1.5rem;
        background-color: var(--primary);
        margin-bottom: 2rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        border-color: var(--primary); }
        body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .user-button a:hover {
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
      body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body div.cta {
        margin: auto;
        width: 80%;
        padding: 2rem 3rem;
        text-align: center;
        color: #FFFFFF;
        background-color: var(--primary);
        margin-top: 2rem !important;
        border-radius: 1rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        bottom: -12rem;
        margin-left: auto !important; }
        body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body div.cta h2 {
          margin-top: 0;
          font-size: 2.5rem;
          color: #FFFFFF; }
        body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body div.cta p {
          color: #FFFFFF; }
          body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body div.cta p a {
            display: inline-block;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            user-select: none;
            border-width: 1px;
            border-style: solid;
            padding: 0.5rem 1rem;
            font-size: 1.25em;
            line-height: 1.5;
            border-radius: 0.3rem;
            animation-fill-mode: both;
            animation-duration: 8s;
            animation-name: shake;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            color: var(--primary);
            padding: .5rem 1.5rem;
            font-size: 1.5rem;
            background-color: #ffffff;
            margin-top: 1.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
            body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body div.cta p a:hover {
              box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
              animation-name: none; }
          body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body div.cta p:last-child {
            margin-bottom: 0; }

@media (max-width: 767px) {
  body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row {
    margin-left: 0;
    margin-right: 0; }
    body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame {
      padding-left: 0;
      padding-right: 0; }
      body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body {
        margin-bottom: 0;
        margin-top: 4rem;
        padding-top: 3rem; }
        body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header #logo-account-wrapper {
          padding: 12px;
          right: calc(50% - 36px);
          top: -90px;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
          body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body .process-header #logo-account-wrapper #logo-account img {
            width: 48px;
            height: 48px; }
        body.external-form.body-lander.body-caf-lander-eclipsetime #mainbody #contentwrapper #content #caf-external .row .external-frame > .panel > .panel-body iframe {
          height: 100% !important; } }

#request-view-tabs-tile {
  position: relative; }
  #request-view-tabs-tile #request-view-activity-tile {
    float: right;
    width: 33%; }
    #request-view-tabs-tile #request-view-activity-tile h5 {
      text-align: right;
      margin: 0 0 -1px 0; }
      #request-view-tabs-tile #request-view-activity-tile h5 a {
        color: #424242;
        border-bottom: solid 3px #FF9800;
        padding: 10px 0px 10px 15px;
        display: inline-block;
        line-height: 1.5em;
        font-weight: bold;
        margin-top: 0.33em; }
    #request-view-tabs-tile #request-view-activity-tile .activity-feed-box {
      min-height: 500px;
      animation: fadeIn 0.8s; }
  #request-view-tabs-tile.activity-closed #request-view-activity-tile {
    position: absolute;
    right: 0; }
    #request-view-tabs-tile.activity-closed #request-view-activity-tile h5 {
      text-align: right; }
      #request-view-tabs-tile.activity-closed #request-view-activity-tile h5 a {
        color: #424242;
        border-bottom: solid 3px transparent;
        font-weight: normal; }
    #request-view-tabs-tile.activity-closed #request-view-activity-tile .panel.activity-feed-box {
      display: none; }

@media (max-width: 1199.98px) {
  #request-view-tabs-tile #request-view-activity-tile {
    float: none !important;
    width: auto !important; }
    #request-view-tabs-tile #request-view-activity-tile .nav.nav-tabs {
      float: left; }
    #request-view-tabs-tile #request-view-activity-tile #activity-feed-link-id {
      pointer-events: none; }
      #request-view-tabs-tile #request-view-activity-tile #activity-feed-link-id .fa-bars {
        display: none; } }

@media (max-width: 575.98px) {
  #request-view-tabs-tile #request-view-activity-tile {
    display: none !important; } }

#workflow-rules .modal .modal-body form .control-group .formlistgrid label.fdradiolabel input[name="rule_action_type_id"]::after {
  content: "";
  font-family: "FontAwesome";
  position: relative;
  top: -3px;
  left: 1.5em; }

#workflow-rules .modal .modal-body form .control-group .formlistgrid label.fdradiolabel input[name="rule_action_type_id"][value='5']::after {
  content: "\f144"; }

#workflow-rules .modal .modal-body form .control-group .formlistgrid label.fdradiolabel input[name="rule_action_type_id"][value='6']::after {
  content: "\f007"; }

#workflow-rules .modal .modal-body form .control-group .formlistgrid label.fdradiolabel input[name="rule_action_type_id"][value='11']::after {
  content: "\f147"; }

#workflow-rules .modal .modal-body form .control-group .formlistgrid label.fdradiolabel input[name="rule_action_type_id"][value='15']::after {
  content: "\f046"; }

#workflow-rules .modal .modal-body form .control-group .formlistgrid label.fdradiolabel input[name="rule_action_type_id"][value='18']::after {
  content: "\f00d"; }

/* 
UX: Signup

Weight: 300

Styleguide UXSignup
*/
/* 
Sign-up

Next step depends on the user type:
- Third-Party User
	- <span class="text-highlight">If the Third-Party User has been invited</span>, this will send user to [Create Password](section-UXSignup.html#kssref-UXSignup-createpassword)
	- <span class="text-highlight">If the Third-Party User has NOT been invited</span>, this will send user to [Identify Sponsor](section-UXSignup.html#kssref-UXSignup-identifysponsor)
- Employee
	- <span class="text-highlight">If SSO is disabled</span>
		- <span class="text-highlight">If the user is `ACTIVE`</span>, this will send user to a confirmation screen to log on via SSO
		- <span class="text-highlight">If the user is NOT `ACTIVE`</span>, this will create the user and send user to [Create Password](section-UXSignup.html#kssref-UXSignup-createpassword)
	- <span class="text-highlight">If SSO is NOT disabled</span>, this will send user to a confirmation screen to log on via SSO

Markup: registration-signup.hbs

Weight: 310

Styleguide UXSignup.SignUp
*/
/* 
Identify Sponsor

This will send the [`Sponsor: Action Required`](section-emailthirdpartyusers.html#kssref-emailthirdpartyusers-sponsoractionrequired) email to the sponsor

Markup: registration-identifysponsor.hbs

Weight: 320

Styleguide UXSignup.IdentifySponsor
*/
/* 
Approve by Sponsor

Note, <span class="text-highlight">this is viewed by the sponsor</span> via the [`Sponsor: Action Required`](section-emailthirdpartyusers.html#kssref-emailthirdpartyusers-sponsoractionrequired) email.

- If approved, this will send the [`Approved`](section-emailthirdpartyusers.html#kssref-emailthirdpartyusers-approved) email to the third-party user
- If denied, this will send the [`Denied`](section-emailthirdpartyusers.html#kssref-emailthirdpartyusers-denied) email to the third-party user

### Standard UX
- <span class="text-highlight">The Third-Party User field is `readonly`</span>

Markup: registration-approve.hbs

Weight: 330

Styleguide UXSignup.ApproveBySponsor
*/
/* 
Create Password

Note, <span class="text-highlight">this is viewed by the Third-Party User</span> via the [`Approved`](section-emailthirdpartyusers.html#kssref-emailthirdpartyusers-approved) email.

Markup: registration-createpassword.hbs

Weight: 340

Styleguide UXSignup.CreatePassword
*/
/* 
UX: Log On

Weight: 300

Styleguide UXLogOn
*/
/* 
UX: Reset Password

Weight: 300

Styleguide UXResetPassword
*/
/* 
Send Reset Password Email

This will send the [`Create New Password`](section-emailadmin.html#kssref-emailadmin-createnewpassword) email

Markup: signin-emailresetpassword.hbs

Weight: 310

Styleguide UXResetPassword.SendEmailResetPassword
*/
/* 
Reset Password

Note, this is only accessible via the [`Create New Password`](section-emailadmin.html#kssref-emailadmin-createnewpassword) email.

For security purposes, <span class="text-highlight">the email link to this page will expire in `24 hours`</span>. If the user doesn't create a new password in 24 hours, they will have to reset their password again.

### Standard UX
- <span class="text-highlight">The email field is `readonly`</span>

Markup: signin-resetpassword.hbs

Weight: 320

Styleguide UXResetPassword.ResetPassword
*/
/* 
Initial Log On: Reset Password

Note, this only occurs to employees (not Third-Party Users) logging on for the FIRST time to force them to change their default password. <span class="text-highlight">This only applies to users created during a trial</span>.

Markup: signin-resetpassword.hbs

Weight: 300

Styleguide UXLogOn.Initial
*/
.signin {
  height: auto;
  background-color: #3F51B5; }
  .signin .row {
    background-repeat: no-repeat;
    background-position: top center;
    margin-top: 2em; }
  .signin .panel-default {
    margin-top: 80px;
    margin-bottom: 25px;
    background-color: #ffffff; }
    .signin .panel-default form .row {
      margin-top: 0;
      margin-bottom: 0; }
    .signin .panel-default.app h3:first-child {
      margin-top: 0; }
      .signin .panel-default.app h3:first-child:after {
        content: "Confirmation"; }
    .signin .panel-default.app .alert {
      display: none; }
      .signin .panel-default.app .alert:before {
        font-family: 'FontAwesome';
        content: "\f05a";
        margin-right: 5px; }
      .signin .panel-default.app .alert:after {
        content: "Your information has been submitted.";
        font-weight: bold; }
    .signin .panel-default.app.app-approve h3:first-child:after {
      content: "Approve Third Party User"; }
    .signin .panel-default.app.app-approve .alert {
      display: block; }
    .signin .panel-default.app.app-password h3:first-child:before {
      font-family: 'FontAwesome';
      content: "\f023";
      margin-right: 5px; }
    .signin .panel-default.app.app-password h3:first-child:after {
      content: "Create Password"; }
    .signin .panel-default.app.app-password .alert {
      display: block; }
    .signin .panel-default.app.app-resetpassword h3:first-child:before {
      font-family: 'FontAwesome';
      content: "\f023";
      margin-right: 5px; }
    .signin .panel-default.app.app-resetpassword h3:first-child:after {
      content: "Reset Password"; }
    .signin .panel-default.app.app-resetpassword .alert {
      display: block; }
    .signin .panel-default.app.app-signin h3:first-child:before {
      font-family: 'FontAwesome';
      content: "\f023";
      margin-right: 5px; }
    .signin .panel-default.app.app-signin h3:first-child:after {
      content: "Pipeline Log On"; }
    .signin .panel-default.app.app-signin .alert {
      display: block; }
    .signin .panel-default.app.app-signin.confirm-denied .alert:before {
      font-family: 'FontAwesome';
      content: "\f071";
      margin-right: 5px; }
    .signin .panel-default.app.app-signin.confirm-denied .alert:after {
      content: "Sorry, you do not have access. Please try again or sign-up as a Third Party User."; }
    .signin .panel-default.app.app-signin.confirm-logon .alert:before {
      font-family: 'FontAwesome';
      content: "\f071";
      margin-right: 5px; }
    .signin .panel-default.app.app-signin.confirm-logon .alert:after {
      content: "Sorry, you do not have access. Please try again or sign-up as a Third Party User."; }
    .signin .panel-default.app.app-onboard h3:first-child:before {
      font-family: 'FontAwesome';
      content: "";
      margin-right: 0; }
    .signin .panel-default.app.app-onboard h3:first-child:after {
      content: ""; }
    .signin .panel-default.app.app-onboard .alert {
      display: block; }
    .signin .panel-default.app.app-onboard.invite-team-members, .signin .panel-default.app.app-onboard.create-teams, .signin .panel-default.app.app-onboard.download-templates, .signin .panel-default.app.app-onboard.youre-all-set, .signin .panel-default.app.app-onboard.contact-welcome {
      min-height: 20px;
      padding: 19px;
      margin-bottom: 20px;
      border: 1px solid #e3e3e3;
      border-radius: 4px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); }
    .signin .panel-default.app.app-signup h3:first-child:before {
      font-family: 'FontAwesome';
      content: "\f023";
      margin-right: 5px; }
    .signin .panel-default.app.app-signup h3:first-child:after {
      content: "Sign-Up"; }
    .signin .panel-default.app.app-signup .alert {
      display: block; }
    .signin .panel-default.app.app-register.confirm- h3:first-child:after {
      content: "Reset Password"; }
    .signin .panel-default.app.app-register.confirm-contactadd .alert.alert-success {
      display: block; }
    .signin .panel-default.app.app-register.confirm-contactadd .alert:after {
      content: "Your information has been submitted to your sponsor for approval. You will be notified when your request is approved."; }
    .signin .panel-default.app.app-register.confirm-contactdenied .alert.alert-info {
      display: block; }
    .signin .panel-default.app.app-register.confirm-contactdenied .alert:after {
      content: "The Third Party User's request has been denied. They will receive an email notification of their status."; }
    .signin .panel-default.app.app-register.confirm-contactapproved .alert.alert-success {
      display: block; }
    .signin .panel-default.app.app-register.confirm-contactapproved .alert:after {
      content: "The Third Party User's request has been approved. They will receive an email notification of their status."; }
    .signin .panel-default.app.app-register.confirm-contactpasswordemail .alert.alert-success {
      display: block; }
    .signin .panel-default.app.app-register.confirm-contactpasswordemail .alert:after {
      content: "Your email password instructions has been sent."; }
  .signin #formerror:before {
    content: none; }
  .signin #formerror:after {
    content: none; }
  .signin.signin-main {
    height: 100vh;
    background-image: url(https://iwcdn.s3.amazonaws.com/pipeline/logon-01.jpg);
    background-size: cover;
    background-color: #121212; }
    .signin.signin-main #content {
      margin-top: 0;
      padding-bottom: 0; }
    .signin.signin-main .container-fluid {
      height: 100vh; }
      .signin.signin-main .container-fluid .row {
        background-image: none;
        margin-top: 0;
        height: 100%; }
        .signin.signin-main .container-fluid .row .row-container {
          flex: 0 0 33.333333%;
          max-width: 500px;
          background-color: #ffffff;
          margin-left: 0;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
          background-image: none; }
          .signin.signin-main .container-fluid .row .row-container .app {
            padding: 8.33333333%; }
          .signin.signin-main .container-fluid .row .row-container .panel {
            box-shadow: none;
            background-repeat: no-repeat;
            background-position: top center;
            margin-top: 0; }
            .signin.signin-main .container-fluid .row .row-container .panel .panel-body.app-signin h3 {
              background-repeat: no-repeat;
              background-position: top center;
              padding-top: 5em; }
    .signin.signin-main.whitelabel {
      background-image: none;
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 30s ease infinite;
      height: 100vh; }
      .signin.signin-main.whitelabel .container-fluid {
        height: 100vh; }
        .signin.signin-main.whitelabel .container-fluid .row .row-container {
          margin: auto;
          animation-name: fadeIn;
          animation-duration: 1s;
          background: none;
          box-shadow: none;
          height: 100vh; }
          .signin.signin-main.whitelabel .container-fluid .row .row-container .panel {
            padding: 0;
            margin: 0;
            border-radius: 1.5rem;
            background: none;
            position: relative;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
            top: 10%; }
            .signin.signin-main.whitelabel .container-fluid .row .row-container .panel .panel-body {
              border-radius: 1.5rem; }
              .signin.signin-main.whitelabel .container-fluid .row .row-container .panel .panel-body.app-signin h3 {
                background-repeat: no-repeat;
                background-position: top center;
                padding-top: 5em; }

@media (max-width: 1199.98px) {
  .signin {
    background-color: #ffffff !important; }
    .signin.signin-main {
      background-image: none; }
      .signin.signin-main .container-fluid .animated {
        flex: 0 0 100% !important;
        max-width: none !important; } }

@media (max-width: 575.98px) {
  .signin.signin-main {
    background-image: none; }
    .signin.signin-main .container-fluid #login-options p a.btn {
      display: block;
      margin: 1em 3em;
      margin-right: 3em !important; } }

#setting-tabs a.change-profile-photo, #setting-tabs a.clear-photo, #setting-tabs a#change-profile-photo-id, #setting-tabs a#clear-photo-id {
  font-size: .8rem;
  color: #9E9E9E;
  margin-right: 1.5em;
  border-bottom: 1px dotted; }
  #setting-tabs a.change-profile-photo:first-child, #setting-tabs a.clear-photo:first-child, #setting-tabs a#change-profile-photo-id:first-child, #setting-tabs a#clear-photo-id:first-child {
    margin-left: 3em; }
  #setting-tabs a.change-profile-photo:hover, #setting-tabs a.clear-photo:hover, #setting-tabs a#change-profile-photo-id:hover, #setting-tabs a#clear-photo-id:hover {
    color: #1976D2; }

#setting-tabs span.contact-id {
  margin-left: .5em;
  color: #757575;
  font-size: .8rem; }

#setting-tabs .react-tabs__tab-panel--selected {
  padding: 1em 1em 0;
  border-top: 1px solid #E0E0E0; }

#setting-tabs #tab-profile, #setting-tabs #tab-email {
  padding: 1em 1em 0; }

/* 
Filterable

This is a table that is filterable by adding the `table-filterable` class, ex:

<code>&lt;table class="table table-hover <span class="text-highlight">table-filterable</span>"&gt;</code>

Note, the filter itself is managed by [`Dropdown: Icon: Filter`](section-elementdropdowns.html#kssref-elementdropdowns-iconfilter)

### Components
- [`Dropdown: Icon: Filter`](section-elementdropdowns.html#kssref-elementdropdowns-iconfilter)

Markup: tables-filterable.hbs

Styleguide ElementTables.Filterable
*/
/* 
Parent/Child

### Standard UX

- Child rows are highlighted adding a CSS class of `active` per Bootstrap, ex: <code>&lt;td class="<span class="text-highlight">active</span>"&gt;</code>
- Child rows are indented on the first cell by adding a CSS class of `child`, ex: <code>&lt;td class="active <span class="text-highlight">child</span>"&gt;</code>

### Components
- [`Action Link: Expand/Collapse`](section-elementlinksaction.html#kssref-elementlinksaction-expandcollapse)

Markup: tables-parentchild.hbs

Styleguide ElementTables.ParentChild
*/
/* 
Sortable

This is a table that is sortable by adding the `table-sortable` class, ex:

<code>&lt;table class="table table-hover <span class="text-highlight">table-sortable</span>"&gt;</code>

To add a sort to a column, add the sort class to the <code>&lt;th&gt;</code> tag, ex: <code>&lt;th <span class="text-highlight">class="sort-asc"</span>&gt;foo&lt;/th&gt;</code>

Markup: tables-sortable.hbs

.sort-asc		- sort in ascending order
.sort-desc		- sort in descending order

Styleguide ElementTables.Sortable
*/
/* 
Pagination

Pagination controls for Table results.

To turn off and disable links for <i class="fa fa-chevron-circle-left"></i> <i class="fa fa-chevron-circle-right"></i> controls:

- <code>&lt;ul data-is-first="1" data-is-last="0"&gt;</code> disables <i class="fa fa-chevron-circle-left"></i>
- <code>&lt;ul data-is-first="0" data-is-last="1"&gt;</code> disables <i class="fa fa-chevron-circle-right"></i>
- <code>&lt;ul data-is-first="1" data-is-last="1"&gt;</code> disables both <i class="fa fa-chevron-circle-left"></i> and <i class="fa fa-chevron-circle-right"></i>

Markup: tables-pagination.hbs

Styleguide ElementTables.Pagination
*/
/* 
Non-Alphanumeric Data

Tables can contain non-alphanumeric data, ex: avatars and form fields

Markup: tables-nonalpha.hbs

Styleguide ElementTables.NonAlpha
*/
.table thead tr th {
  padding: .75em 1.5em; }

.table tbody tr td {
  padding: .75em 1.5em; }
  .table tbody tr td:hover .stepchain-container {
    overflow-x: visible !important; }
  .table tbody tr td.icon {
    padding: .75em 0;
    width: 32px; }
  .table tbody tr td a .badge {
    font-size: inherit;
    margin-left: 0; }
  .table tbody tr td.charts-chain {
    max-width: 300px;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    text-align: left;
    overflow-x: hidden; }
    .table tbody tr td.charts-chain:hover {
      overflow-x: auto; }
  .table tbody tr td.step-skipped.text-muted {
    color: #BDBDBD !important; }

.table.table-filterable thead th .btn-group .dropdown:before {
  font-family: 'FontAwesome';
  font-size: 1.3em;
  line-height: 1em;
  content: "\f0b0";
  color: #E0E0E0;
  margin-left: 5px; }

.table.table-filterable thead th .btn-group .dropdown:hover:before {
  color: #3F51B5; }

.table.table-filterable thead th .btn-group .dropdown-menu {
  padding: 1rem; }
  .table.table-filterable thead th .btn-group .dropdown-menu[data-columns='1'] .col-md-6 {
    max-width: 100%;
    flex: 0 0 100%; }

.table.table-filterable thead th.active .btn-group .dropdown:before {
  color: #388E3C; }

.table.table-filterable thead th.filter-on {
  border-color: #388E3C;
  border-top-width: 2px;
  border-bottom-width: 2px; }
  .table.table-filterable thead th.filter-on .btn-group .dropdown {
    animation-fill-mode: both;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: wobble;
    animation-timing-function: ease-in-out; }
    .table.table-filterable thead th.filter-on .btn-group .dropdown:before {
      color: #388E3C; }

.table th .dropdown-menu {
  width: 800px;
  font-weight: normal; }
  .table th .dropdown-menu[data-columns='1'] {
    width: 400px; }
  .table th .dropdown-menu .col-md-6 .react-select__multi-value__label {
    max-width: 240px; }
  .table th .dropdown-menu .col-md-6 .react-select__option[role='option'] {
    max-width: unset; }

.table th.active {
  background-color: initial !important; }

.table.table-numbered thead tr:before {
  border-top: 1px solid #dee2e6; }

.table.table-swimlane {
  table-layout: fixed; }
  .table.table-swimlane > thead > tr > th {
    border-left: 1px solid #E0E0E0;
    text-align: center; }
    .table.table-swimlane > thead > tr > th:last-child {
      border-right: 1px solid #E0E0E0; }
    .table.table-swimlane > thead > tr > th .avatar {
      margin-right: 0; }
      .table.table-swimlane > thead > tr > th .avatar img {
        margin-right: 0; }
    .table.table-swimlane > thead > tr > th kbd {
      display: block; }
      .table.table-swimlane > thead > tr > th kbd span {
        display: block;
        overflow-x: hidden; }
  .table.table-swimlane > tbody > tr {
    position: relative; }
    .table.table-swimlane > tbody > tr > td {
      border-top-width: 0px;
      border-left: 1px solid #E0E0E0;
      padding: 5px 20px;
      height: 1px; }
      .table.table-swimlane > tbody > tr > td .card {
        border-radius: 0.5rem; }
        .table.table-swimlane > tbody > tr > td .card .card-body {
          padding: 0.5rem 0.75rem;
          text-align: center;
          position: relative;
          background-color: #FFFFFF;
          border-radius: 0.5rem; }
          .table.table-swimlane > tbody > tr > td .card .card-body .panel-actions {
            position: absolute;
            top: 0em;
            right: 0em;
            margin-left: 0;
            margin-bottom: 0; }
          .table.table-swimlane > tbody > tr > td .card .card-body .card-title {
            margin-bottom: 0;
            font-size: 125%; }
          .table.table-swimlane > tbody > tr > td .card .card-body .card-text {
            margin-bottom: 0.5em; }
            .table.table-swimlane > tbody > tr > td .card .card-body .card-text > a .badge {
              font-size: 75%;
              top: 0;
              position: relative; }
            .table.table-swimlane > tbody > tr > td .card .card-body .card-text > a.edit {
              display: block; }
          .table.table-swimlane > tbody > tr > td .card .card-body .panel-status {
            font-size: 90%; }
            .table.table-swimlane > tbody > tr > td .card .card-body .panel-status .pull-left {
              margin-right: 10px; }
              .table.table-swimlane > tbody > tr > td .card .card-body .panel-status .pull-left .cell-css.cell-numericyesno:before {
                font-size: 1em;
                top: 1px; }
          .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound {
            padding: 0;
            border-bottom-width: 0;
            padding-bottom: 3em; }
            .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound .item-container {
              padding: 0.75rem;
              background-color: #FFFFFF;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
              position: relative; }
              .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound .item-container .card-title {
                display: none; }
              .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound .item-container .item-add {
                visibility: hidden;
                position: absolute;
                width: 100%;
                bottom: -2em;
                left: 0px;
                font-size: 1.1em;
                z-index: 100; }
                .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound .item-container .item-add a.add-after, .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound .item-container .item-add a.add-before {
                  background-color: transparent; }
                .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound .item-container .item-add .modal-body hr {
                  display: none; }
            .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound:hover .item-container {
              box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
              .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound:hover .item-container .card-text .badge {
                animation-fill-mode: both;
                animation-duration: 4s;
                animation-iteration-count: infinite;
                animation-name: wobble;
                animation-timing-function: ease-in-out; }
              .table.table-swimlane > tbody > tr > td .card .card-body.card-body-compound:hover .item-container .item-add {
                visibility: visible; }
        .table.table-swimlane > tbody > tr > td .card:before {
          margin: 0;
          position: absolute;
          left: calc(50% - 2px);
          top: -1em;
          content: " ";
          display: block;
          width: 6px;
          height: calc(100% + 2em + 6px);
          background-color: #9E9E9E; }
      .table.table-swimlane > tbody > tr > td hr {
        margin: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border-width: 6px;
        border-color: #9E9E9E; }
        .table.table-swimlane > tbody > tr > td hr.swimlane-connector-y {
          width: 6px;
          height: 100%; }
      .table.table-swimlane > tbody > tr > td.item .item-add {
        visibility: hidden;
        position: absolute;
        width: 100%;
        bottom: -1em;
        left: 0px;
        font-size: 1.1em;
        z-index: 100; }
        .table.table-swimlane > tbody > tr > td.item .item-add a {
          background-color: white; }
        .table.table-swimlane > tbody > tr > td.item .item-add .modal-body hr {
          border: 1px solid #E0E0E0; }
      .table.table-swimlane > tbody > tr > td.item:hover .card {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        /*transform: translate3d(0, -2px, 0);    */ }
        .table.table-swimlane > tbody > tr > td.item:hover .card .card-body .card-text .badge {
          animation-fill-mode: both;
          animation-duration: 4s;
          animation-iteration-count: infinite;
          animation-name: wobble;
          animation-timing-function: ease-in-out; }
        .table.table-swimlane > tbody > tr > td.item:hover .card .card-body .item-add {
          visibility: visible; }
      .table.table-swimlane > tbody > tr > td:last-child {
        border-right: 1px solid #E0E0E0; }
      .table.table-swimlane > tbody > tr > td.item-group {
        padding: 10px 0; }
        .table.table-swimlane > tbody > tr > td.item-group .panel-item-group {
          width: 102%;
          position: relative;
          left: -1%; }
          .table.table-swimlane > tbody > tr > td.item-group .panel-item-group > .panel-heading {
            padding: 0.75rem 0 0 0;
            text-align: center;
            background-color: #F5F5F5;
            border-bottom-width: 0; }
            .table.table-swimlane > tbody > tr > td.item-group .panel-item-group > .panel-heading p {
              margin-bottom: 0;
              font-size: 125%; }
              .table.table-swimlane > tbody > tr > td.item-group .panel-item-group > .panel-heading p .badge-inverse {
                background-color: #424242; }
          .table.table-swimlane > tbody > tr > td.item-group .panel-item-group > .panel-body {
            background-color: #F5F5F5;
            padding-top: 0;
            padding-bottom: 0.5em; }
            .table.table-swimlane > tbody > tr > td.item-group .panel-item-group > .panel-body .card-deck > .card {
              background-color: transparent;
              box-shadow: none; }
              .table.table-swimlane > tbody > tr > td.item-group .panel-item-group > .panel-body .card-deck > .card:before {
                display: none; }
              .table.table-swimlane > tbody > tr > td.item-group .panel-item-group > .panel-body .card-deck > .card .card-body.card-body-compound {
                background-color: transparent; }
                .table.table-swimlane > tbody > tr > td.item-group .panel-item-group > .panel-body .card-deck > .card .card-body.card-body-compound .item-container {
                  border-radius: 0.5rem; }
    .table.table-swimlane > tbody > tr:first-child td.item:before {
      height: 50%;
      bottom: -6px;
      top: unset; }
    .table.table-swimlane > tbody > tr:last-child td {
      border-bottom: 1px solid #E0E0E0; }
      .table.table-swimlane > tbody > tr:last-child td.item:before {
        height: 50%; }
  .table.table-swimlane.js-sortable tbody td.item .drag-handle, .table.table-swimlane.js-sortable tbody td.item-group .drag-handle {
    font-size: 0.9rem; }
    .table.table-swimlane.js-sortable tbody td.item .drag-handle:before, .table.table-swimlane.js-sortable tbody td.item-group .drag-handle:before {
      position: relative;
      float: none;
      left: 0;
      top: -3px;
      display: block;
      margin: 0 3em; }

[data-is-readonly="1"] .table-swimlane tbody tr td.item .item-add, [data-is-deactivated="1"] .table-swimlane tbody tr td.item .item-add {
  display: none; }

#table-teams tr td {
  height: 74px; }
  #table-teams tr td span.label.app {
    display: none; }
    #table-teams tr td span.label.app.label-new {
      display: inline; }
  #table-teams tr td a.fa-sign-out[data-is-member='0'] {
    pointer-events: none;
    color: #9E9E9E; }
  #table-teams tr td a.fa-magic[data-is-owner='0'] {
    pointer-events: none;
    color: #9E9E9E; }

#table-teams tr:hover td span.label.app {
  display: inline; }

#table-workflows tbody tr td a.fa-times-circle:not([data-open-requests-count='0']) {
  pointer-events: none;
  color: #9E9E9E; }

#table-rules tbody tr td .badge {
  white-space: break-spaces; }

@media (min-width: 1500px) {
  .table.table-requests-all td:nth-child(2), .table.table-requests-all td:nth-child(4), .table.table-requests-workflow-requests td:nth-child(2), .table.table-requests-workflow-requests td:nth-child(4) {
    width: 17%; } }

.resultsnav {
  display: block;
  text-align: center; }
  .resultsnav .resultsnav-pagination ul li {
    display: inline-block;
    float: none;
    background-color: #FFFFFF;
    width: auto;
    top: 0;
    font-size: 0.8rem;
    vertical-align: top; }
    .resultsnav .resultsnav-pagination ul li:before {
      color: #3F51B5; }
    .resultsnav .resultsnav-pagination ul li:empty {
      background-color: #FFFFFF; }
      .resultsnav .resultsnav-pagination ul li:empty:before {
        color: #E0E0E0; }
    .resultsnav .resultsnav-pagination ul li.previous {
      width: 40px; }
      .resultsnav .resultsnav-pagination ul li.previous:before {
        content: "\f137";
        font-size: 1rem; }
    .resultsnav .resultsnav-pagination ul li.next {
      width: 40px; }
      .resultsnav .resultsnav-pagination ul li.next:before {
        content: "\f138";
        font-size: 1rem; }
    .resultsnav .resultsnav-pagination ul li span {
      top: 2px;
      position: relative; }
      .resultsnav .resultsnav-pagination ul li span.pagination-range:before {
        content: "Showing";
        margin-right: 5px; }
      .resultsnav .resultsnav-pagination ul li span.pagination-total:before {
        content: "of";
        margin-right: 5px;
        margin-left: 5px; }
  .resultsnav .resultsnav-pagination ul[data-is-first='1'] li.previous:before {
    color: #E0E0E0; }
  .resultsnav .resultsnav-pagination ul[data-is-first='1'] li.previous a {
    pointer-events: none;
    cursor: default; }
  .resultsnav .resultsnav-pagination ul[data-is-last='1'] li.next:before {
    color: #E0E0E0; }
  .resultsnav .resultsnav-pagination ul[data-is-last='1'] li.next a {
    pointer-events: none;
    cursor: default; }

.panel-body table:not([class]) {
  table-layout: fixed;
  width: 100%; }
  .panel-body table:not([class]) th, .panel-body table:not([class]) td {
    padding: .75em .75em;
    border-top: 1px solid #E0E0E0; }
    .panel-body table:not([class]) th p:last-child, .panel-body table:not([class]) td p:last-child {
      margin-bottom: 0; }

/*Common table*/
.table-section {
  position: relative; }
  .table-section .table-section-head {
    padding: 18px 0;
    background-color: #C5CAE9;
    border-bottom-width: 1px;
    border-bottom-color: #9FA8DA; }
  .table-section .table-subsection {
    overflow-y: auto;
    max-height: 416px; }
    .table-section .table-subsection.teamdashboard-section {
      min-height: 700px; }
    .table-section .table-subsection table th {
      height: 0;
      line-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      color: transparent;
      border: none;
      white-space: nowrap; }
    .table-section .table-subsection table th span, .table-section .table-subsection div {
      position: absolute;
      color: #000;
      padding: 9px 25px;
      top: 0;
      margin-left: -25px;
      line-height: normal; }

.swimlane-container {
  position: relative;
  height: 90vh;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  border-top: 1px solid #E0E0E0; }
  .swimlane-container > .table-swimlane > thead > tr > th {
    position: sticky;
    top: 0;
    background-color: #FAFAFA;
    z-index: 1;
    border-top-width: 0; }

[data-is-readonly="1"] .table-swimlane > tbody > tr > td, [data-is-deactivated="0"] .table-swimlane > tbody > tr > td {
  padding: 0px 20px; }

body.external-form .table tbody tr td {
  word-break: break-all; }

body.dark .table.table-filterable thead th .btn-group .dropdown:before {
  color: #757575; }

body.dark .table.table-filterable thead th .btn-group .dropdown:hover:before {
  color: #3F51B5; }

body.dark .table.table-filterable thead th.active .btn-group .dropdown:before {
  color: #388E3C; }

body.dark .table.table-filterable thead th.filter-on {
  border-color: #388E3C; }
  body.dark .table.table-filterable thead th.filter-on .btn-group .dropdown {
    animation-fill-mode: both;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: wobble;
    animation-timing-function: ease-in-out; }
    body.dark .table.table-filterable thead th.filter-on .btn-group .dropdown:before {
      color: #388E3C; }

@media (max-width: 1199.98px) {
  .table-container .table {
    min-width: 1200px; }
    .table-container .table tbody tr td a.fa {
      display: block !important; } }

/* 
Component: Tile: Tab

Wrapper for Bootstrap tabs. <span class="text-highlight">Note, make sure the <code>&lt;li&gt;</code> tags are back-to-back, otherwise, there will be a space between the tabs and the highlight will not be flush.</span>

### Components

- [`Panel`](section-elementpanels.html)

Markup: tabs.hbs

Weight: 100

Styleguide ComponentTileTab
*/
/* 
Right Aligned

Markup: tabs-right.hbs

Weight: 100

Styleguide ComponentTileTab.RightAligned
*/
/* 
React

This is the React version. <span class="text-highlight">Note, React automatically removes all whitespaces between tags.</span>

### Components

- [`Panel`](section-elementpanels.html)

Markup: tabs-react.hbs

Weight: 100

Styleguide ComponentTileTab.React
*/
/* 
Badges

These are tabs with [`Badges`](section-elementbadges.html) for counts. <span class="text-highlight">Note, this should only be used when a [`Table`](section-elementtables.html) is in the body.</span>

### Components

- [`Badges`](section-elementbadges.html)
- [`Panel`](section-elementpanels.html)
- [`Tables`](section-elementtables.html)

Markup: tabs-badges.hbs

Weight: 101

Styleguide ComponentTileTab.Badges
*/
/* 
Badges w/ Action Bar

These are tabs with [`Badges`](section-elementbadges.html) for counts. <span class="text-highlight">Note, this should only be used when a [`Table`](section-elementtables.html) is in the body.</span>

### Components

- [`Badges`](section-elementbadges.html)
- [`Panel`](section-elementpanels.html)
- [`Tables`](section-elementtables.html)

Markup: tabs-badges-actionbar.hbs

Weight: 101

Styleguide ComponentTileTab.BadgesActionBar
*/
/* 
Action Bar

This is the tab with an action bar <span class="text-highlight">if the actions apply to ALL tabs.</span>

### Action Order

- `Key` user tasks should be to the left
- `Secondary` user tasks should be after the Key user tasks
- `Supplemental` user tasks should be in the more icon

### Components

- [`Dropdowns`](section-elementdropdowns.html)
- [`Panel`](section-elementpanels.html)

Markup: tabs-actionbar.hbs

Weight: 101

Styleguide ComponentTileTab.ActionBar
*/
/* 
Action Bar for Tab w/ Form

This is the tab with an action bar with a form. <span class="text-highlight">Note, if you have an action bar with a form, the action bar should NOT have any other Key or Secondary user tasks.</span>

### Components

- [`Dropdowns`](section-elementdropdowns.html)
- [`Panel`](section-elementpanels.html)

Markup: tabs-actionbar-form.hbs

Weight: 101

Styleguide ComponentTileTab.ActionBarTabBodyForm
*/
/* 
Action Bar for Tab w/ Search Form

This is the tab with an action bar with a search form. <span class="text-highlight">Note, this should only be used when a [`Table`](section-elementtables.html) is in the body.</span>

### Components

- [`Dropdowns`](section-elementdropdowns.html)
- [`Panel`](section-elementpanels.html)
- [`Tables`](section-elementtables.html)

Markup: tabs-actionbar-form-search.hbs

Weight: 101

Styleguide ComponentTileTab.ActionBarTabBodySearchForm
*/
/* 
Action Bar for Tab

This is the tab with an action bar in the tab body <span class="text-highlight">if the actions are specific to the tab.</span> Note, this should NOT be used combination with the standard Tab Action Bar.

### Components

- [`Dropdowns`](section-elementdropdowns.html)
- [`Panel`](section-elementpanels.html)

Markup: tabs-actionbar-body.hbs

Weight: 101

Styleguide ComponentTileTab.ActionBarTabBody
*/
.nav.nav-tabs {
  margin: 15px 0px -1px; }
  .nav.nav-tabs .nav-item {
    padding: 0 !important; }
    .nav.nav-tabs .nav-item:hover {
      color: #606fc7; }
    .nav.nav-tabs .nav-item .nav-link {
      padding: 10px 15px !important;
      border-bottom: 3px solid transparent;
      border-top-width: 0px;
      border-left-width: 0px;
      border-right-width: 0px;
      background-color: transparent; }
      .nav.nav-tabs .nav-item .nav-link .badge-secondary {
        margin-left: 5px;
        color: #FFFFFF;
        background-color: #BDBDBD; }
      .nav.nav-tabs .nav-item .nav-link:hover {
        border-bottom: 5px solid #757575;
        color: #606fc7; }
        .nav.nav-tabs .nav-item .nav-link:hover .badge-secondary {
          color: #FFFFFF;
          background-color: #757575; }
      .nav.nav-tabs .nav-item .nav-link:focus {
        background-color: transparent; }
      .nav.nav-tabs .nav-item .nav-link.active, .nav.nav-tabs .nav-item .nav-link.link-active {
        font-weight: bold;
        color: #424242;
        border-bottom: 5px solid var(--primary); }
        .nav.nav-tabs .nav-item .nav-link.active .badge-secondary, .nav.nav-tabs .nav-item .nav-link.link-active .badge-secondary {
          color: #FFFFFF;
          background-color: #757575; }
        .nav.nav-tabs .nav-item .nav-link.active:hover, .nav.nav-tabs .nav-item .nav-link.link-active:hover {
          color: #424242;
          border-bottom: 5px solid var(--primary); }
  .nav.nav-tabs.table-requests .nav-item .badge {
    background-color: #BDBDBD; }
  .nav.nav-tabs.table-requests .nav-item a.nav-link.active .badge {
    background-color: #3F51B5; }
  .nav.nav-tabs.table-requests .nav-item:hover .badge {
    background-color: #3F51B5; }
  .nav.nav-tabs.table-requests .nav-item:nth-child(1):hover .badge {
    background-color: #FB8C00; }
  .nav.nav-tabs.table-requests .nav-item:nth-child(1) a.nav-link.active .badge {
    background-color: #FB8C00; }
  .nav.nav-tabs.table-requests .nav-item:nth-child(2):hover .badge {
    background-color: #F44336; }
  .nav.nav-tabs.table-requests .nav-item:nth-child(2) a.nav-link.active .badge {
    background-color: #F44336; }
  .nav.nav-tabs + .panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
    .nav.nav-tabs + .panel > .panel-heading {
      border-top-left-radius: 0;
      border-top-right-radius: 0; }
    .nav.nav-tabs + .panel > .panel-body {
      border-top-left-radius: 0;
      border-top-right-radius: 0; }
  .nav.nav-tabs + div > .panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
    .nav.nav-tabs + div > .panel > .panel-heading {
      border-top-left-radius: 0;
      border-top-right-radius: 0; }
    .nav.nav-tabs + div > .panel > .panel-body {
      border-top-left-radius: 0;
      border-top-right-radius: 0; }

.dark .nav.nav-tabs .nav-item .nav-link.active, .dark .nav.nav-tabs .nav-item .nav-link.link-active {
  color: #E0E0E0; }

ul.react-tabs__tab-list,
ul.tabs {
  margin: 15px 0 -1px;
  padding: 0;
  border-bottom: 1px solid #E0E0E0; }
  ul.react-tabs__tab-list > li,
  ul.tabs > li {
    color: #9E9E9E;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    background: transparent; }
    ul.react-tabs__tab-list > li a,
    ul.tabs > li a {
      color: #9E9E9E; }
    ul.react-tabs__tab-list > li .badge,
    ul.tabs > li .badge {
      background-color: #BDBDBD;
      position: relative;
      top: -1px; }
    ul.react-tabs__tab-list > li:hover,
    ul.tabs > li:hover {
      border-bottom: 3px solid #9E9E9E;
      color: #3F51B5; }
      ul.react-tabs__tab-list > li:hover a,
      ul.tabs > li:hover a {
        color: #3F51B5; }
      ul.react-tabs__tab-list > li:hover .badge,
      ul.tabs > li:hover .badge {
        background-color: #3F51B5; }
    ul.react-tabs__tab-list > li:focus,
    ul.tabs > li:focus {
      background-color: transparent; }
    ul.react-tabs__tab-list > li.react-tabs__tab--selected, ul.react-tabs__tab-list > li.selected, ul.react-tabs__tab-list > li.active,
    ul.tabs > li.react-tabs__tab--selected,
    ul.tabs > li.selected,
    ul.tabs > li.active {
      border-bottom: 3px solid #FF9800;
      color: #424242;
      font-weight: bold;
      background-color: transparent; }
      ul.react-tabs__tab-list > li.react-tabs__tab--selected a, ul.react-tabs__tab-list > li.selected a, ul.react-tabs__tab-list > li.active a,
      ul.tabs > li.react-tabs__tab--selected a,
      ul.tabs > li.selected a,
      ul.tabs > li.active a {
        color: #424242; }
      ul.react-tabs__tab-list > li.react-tabs__tab--selected .badge, ul.react-tabs__tab-list > li.selected .badge, ul.react-tabs__tab-list > li.active .badge,
      ul.tabs > li.react-tabs__tab--selected .badge,
      ul.tabs > li.selected .badge,
      ul.tabs > li.active .badge {
        background-color: #FF9800; }
      ul.react-tabs__tab-list > li.react-tabs__tab--selected:hover, ul.react-tabs__tab-list > li.selected:hover, ul.react-tabs__tab-list > li.active:hover,
      ul.tabs > li.react-tabs__tab--selected:hover,
      ul.tabs > li.selected:hover,
      ul.tabs > li.active:hover {
        border-bottom: 3px solid #FF9800;
        color: #424242; }
        ul.react-tabs__tab-list > li.react-tabs__tab--selected:hover a, ul.react-tabs__tab-list > li.selected:hover a, ul.react-tabs__tab-list > li.active:hover a,
        ul.tabs > li.react-tabs__tab--selected:hover a,
        ul.tabs > li.selected:hover a,
        ul.tabs > li.active:hover a {
          color: #424242; }
    ul.react-tabs__tab-list > li.tab_workflow-requests,
    ul.tabs > li.tab_workflow-requests {
      float: right; }
    ul.react-tabs__tab-list > li.tab_my-following,
    ul.tabs > li.tab_my-following {
      float: right; }

ul.tabs > li {
  padding: 0 15px; }
  ul.tabs > li a {
    padding: 10px 0px; }

.react-tabs .panel-body .panel-actions {
  position: relative;
  top: .3rem; }
  .react-tabs .panel-body .panel-actions form {
    display: inline-block;
    position: relative;
    top: -1px; }
    .react-tabs .panel-body .panel-actions form button {
      border-color: #BDBDBD;
      box-shadow: none; }
    .react-tabs .panel-body .panel-actions form .form-control {
      display: inline-block; }
    .react-tabs .panel-body .panel-actions form#ajax-formdesign {
      display: block; }
      .react-tabs .panel-body .panel-actions form#ajax-formdesign .form-control {
        display: block; }

.timeline .timeline-panel.panel {
  padding: 0; }
  .timeline .timeline-panel.panel .panel-body {
    position: relative;
    min-height: initial; }
    .timeline .timeline-panel.panel .panel-body:before {
      font-family: "FontAwesome";
      content: "\f141";
      color: #9E9E9E;
      position: absolute;
      left: 49%;
      top: 10px; }
    .timeline .timeline-panel.panel .panel-body:after {
      font-family: "FontAwesome";
      content: "\f141";
      color: #9E9E9E;
      position: absolute;
      left: 49%;
      top: 5px; }
    .timeline .timeline-panel.panel .panel-body h4 .avatar .user {
      font-size: 1.1em; }
    .timeline .timeline-panel.panel .panel-body[data-is-editable='0'] {
      position: relative; }
      .timeline .timeline-panel.panel .panel-body[data-is-editable='0'] h4 .avatar .user {
        font-size: 1.1em; }

.timeline .timeline-panel.timeline-step-preview {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border: solid 10px #000000; }

.mce-container .mce-ico.mce-i-uploadfile {
  font-family: "tinymce" !important; }
  .mce-container .mce-ico.mce-i-uploadfile:before {
    content: "\e914"; }

.mce-container .mce-ico.mce-i-code {
  font-family: "FontAwesome" !important; }
  .mce-container .mce-ico.mce-i-code:before {
    content: "\f121"; }

.mce-container.mce-floatpanel {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }

.modal-container .modal .modal-dialog .modal-content .modal-body .tox.tox-tinymce.tox-fullscreen {
  top: calc(-1.75rem + 2.5vh) !important;
  left: calc(-3em - 2.25vw) !important;
  width: 95vw !important;
  height: 95vh !important; }
  .modal-container .modal .modal-dialog .modal-content .modal-body .tox.tox-tinymce.tox-fullscreen .tox-sidebar-wrap {
    background-color: #FFFFFF; }
    .modal-container .modal .modal-dialog .modal-content .modal-body .tox.tox-tinymce.tox-fullscreen .tox-sidebar-wrap .tox-edit-area {
      padding: 0.8rem; }

.modal-container .modal .modal-dialog .modal-content .modal-body .tinymce-toggle a[style*="display:none;"], .modal-container .modal .modal-dialog .modal-content .modal-body .tinymce-toggle a[style*="display: none;"] {
  display: none !important; }

.tox.tox-tinymce-aux .tox-dialog-wrap__backdrop {
  background-color: #000;
  opacity: 0.8; }

.tox.tox-tinymce-aux .tox-dialog.tox-dialog--width-lg {
  max-width: initial;
  width: 95vw !important;
  height: 95vh !important; }
  .tox.tox-tinymce-aux .tox-dialog.tox-dialog--width-lg .tox-dialog__body-content {
    height: 100%;
    max-height: initial; }
    .tox.tox-tinymce-aux .tox-dialog.tox-dialog--width-lg .tox-dialog__body-content textarea {
      font-family: monospace; }

.control-group .tinymce-toggle, .form-group .tinymce-toggle {
  float: right;
  font-size: 0.9em;
  font-weight: bold; }

@media (max-width: 1199.98px) {
  .modal-container .modal .modal-dialog .modal-content .modal-body .tox.tox-tinymce.tox-fullscreen {
    top: calc(-1.75rem + 2.5vh) !important;
    left: 0 !important;
    width: 100vw !important;
    height: 95vh !important; }
    .modal-container .modal .modal-dialog .modal-content .modal-body .tox.tox-tinymce.tox-fullscreen .tox-sidebar-wrap {
      background-color: #FFFFFF; }
      .modal-container .modal .modal-dialog .modal-content .modal-body .tox.tox-tinymce.tox-fullscreen .tox-sidebar-wrap .tox-edit-area {
        padding: 0.8rem; } }

/* 
Date

### Standard UX
- Web Format: `MMM dd, yyyyy`, ex: Dec 01, 2025
    - Timezone: local to the user
- Email Format: `ddd, MMM dd, yyyyy`, ex: Tue, Dec 01, 2025

Styleguide ElementText.Date
*/
body {
  font-family: "Inter", "Open Sans", sans-serif;
  font-size: .9rem; }

code.field-link:before {
  content: "\f0ec";
  font-family: "FontAwesome";
  margin-right: 5px; }

kbd {
  background-color: #EEEEEE;
  border-color: #E0E0E0;
  color: #333333;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  box-shadow: none;
  font-size: 0.8rem; }
  kbd .badge {
    top: 0;
    padding: 0.35em 0.4em 0.25em 0.4em; }
  kbd kbd {
    background-color: #E0E0E0;
    border-color: #BDBDBD;
    padding: .2rem .4rem; }

.text-small kbd {
  font-size: inherit; }

i.fa.animated {
  animation-iteration-count: infinite;
  animation-duration: 6s; }
  i.fa.animated.fa-info-circle {
    color: #424242;
    animation-name: flash; }
    i.fa.animated.fa-info-circle.text-danger {
      color: #D32F2F; }
    i.fa.animated.fa-info-circle.text-success {
      color: #388E3C; }
  i.fa.animated.fa-check-square {
    color: #388E3C;
    animation-duration: 2s;
    animation-name: heartBeat; }
  i.fa.animated.fa-arrow-down {
    animation-duration: 2s;
    animation-name: heartBeat; }
  i.fa.animated.fa-exclamation-triangle {
    color: #D32F2F;
    animation-duration: 2s;
    animation-name: heartBeat; }
  i.fa.animated.rollIn {
    animation-iteration-count: 1;
    animation-duration: 1s; }

i.animated {
  display: inline-block;
  font-style: normal; }
  i.animated.tada {
    animation-iteration-count: infinite;
    animation-duration: 3s; }

p > img {
  padding: .5rem;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  max-width: 100%; }

p.lead {
  line-height: 1.75rem; }

small {
  font-size: 0.8em;
  color: #9E9E9E; }

.__react_component_tooltip {
  position: fixed !important; }
  .__react_component_tooltip.type-dark {
    background-color: #222222 !important; }

#process-overview h2:before {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  padding-left: 0.6em;
  padding-right: 0.6em;
  position: relative;
  top: -1px;
  border-radius: 10rem;
  font-size: 65%;
  margin-right: 10px;
  top: -0.2rem; }

#process-overview h2 .label-version {
  top: 0; }

#process-overview h2[data-is-live="1"]:before {
  color: #FFFFFF;
  background-color: #43A047;
  content: "Live"; }

#process-overview h2[data-is-archive="1"]:before {
  color: #FFFFFF;
  background-color: #616161;
  content: "Deactivated"; }

#process-overview h2[data-is-draft="1"]:before {
  color: #FFFFFF;
  background-color: #1E88E5;
  content: "Draft"; }

#process-overview h4.WE-version-lable {
  position: relative;
  top: 0.85em;
  left: 0.5em;
  float: left; }
  #process-overview h4.WE-version-lable span.label-version {
    padding-right: 0;
    top: 0;
    font-size: 1.5rem; }

#process-overview #process-overview-label {
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  text-decoration-skip-ink: none; }

#process-overview #workflow-summary.workflow-hidden .panel {
  position: relative; }
  #process-overview #workflow-summary.workflow-hidden .panel .panel-body {
    background-color: #FFEBEE;
    position: relative; }
    #process-overview #workflow-summary.workflow-hidden .panel .panel-body:before {
      content: "\f070";
      font-family: "FontAwesome";
      font-size: 7em;
      position: absolute;
      color: #EF9A9A;
      left: 47%;
      top: 0;
      opacity: 0.5; }

#process-overview #workflow-summary .flownote-only {
  border: 1px dashed #E0E0E0;
  padding: 1em;
  margin-left: 0;
  margin-top: 2em;
  position: relative;
  border-radius: 1rem;
  margin-bottom: 1em;
  text-align: left; }
  #process-overview #workflow-summary .flownote-only img {
    box-shadow: none;
    padding: 0; }
  #process-overview #workflow-summary .flownote-only:before {
    font-size: 0.8em;
    color: #9E9E9E;
    display: inline-block;
    position: absolute;
    top: -2em;
    width: 100%; }
  #process-overview #workflow-summary .flownote-only:before {
    content: "Internal Note"; }

#process-overview #workflow-summary #process-status-label {
  float: left;
  margin-right: 1em; }

#process-overview #workflow-summary #toggle-preventrequests:after {
  content: "Disable Submissions"; }

#process-overview #workflow-summary #toggle-live:after {
  content: "Live"; }

#process-overview #workflow-summary #toggle-public:after {
  content: "Public"; }

#process-overview #workflow-summary #modal-deactivate-workflow:not([data-is-archive='0']) {
  display: none; }

#process-overview #workflow-summary #modal-create-version-workflow:not([data-is-draft='0']) {
  display: none; }

#workflow-steps[data-use-due-dates="0"] .step-due-dates {
  display: none; }

#workflow-steps #workflow-form .timeline .timeline-panel .step-utils a.fa {
  display: none;
  font-size: 1.4em;
  text-decoration: none;
  padding-right: 15px; }
  #workflow-steps #workflow-form .timeline .timeline-panel .step-utils a.fa.fa-times-circle {
    color: #E53935; }
    #workflow-steps #workflow-form .timeline .timeline-panel .step-utils a.fa.fa-times-circle.text-muted {
      color: #BDBDBD; }
  #workflow-steps #workflow-form .timeline .timeline-panel .step-utils a.fa.text-muted {
    color: #BDBDBD; }

#workflow-steps #workflow-form .timeline .timeline-panel:hover .step-utils a.fa {
  display: inline; }

#create-qa-workflow {
  margin-left: 15px;
  top: -2px; }
  #create-qa-workflow > i:before {
    content: "\f055"; }

#submitmessage {
  width: calc(100% - 50px); }

#workflow-due-dates #toggle-due-dates:after {
  content: "Auto-Calculated Due Dates"; }

#workflow-rules #table-rules thead tr th .badge {
  margin-left: 0; }

#workflow-rules #table-rules tbody tr td .badge {
  margin-left: 0; }

#workflow-rules #table-rules tbody tr td.rule-then {
  word-break: break-all; }
  #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container {
    position: relative; }
    #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app {
      position: absolute;
      width: 28px;
      height: 28px;
      top: 0;
      right: 0;
      display: none; }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="AirTable"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/developer/c6c8c5e300ef0da0e47b3084e5522f20.png?auto=format&fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="API"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/services/6aafbb717d42f8b42f5be2e4e89e1a15.png?auto=format&fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="ConvertAPI"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/services/026088faed891af90e4dff8d49695076.png?auto=format&fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="DropBox"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/services/13ed79eef97afd56b212ece05251b2de.png?auto=format%fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="LeadConnector"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/services/99776e66344c67ffbf47b24633e809e3.png?auto=format&fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="Microsoft"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/developer/69d896f7745e4dcbc9c58403ba58d1e7_2.png?auto=format%fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="OpenAI"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/developer_cli/a86f51fcd659c4b311c82ba31a176e4a.png?auto=format%fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="QuickBooks"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/services/469ac865c30640b422480397b4c1f001.png?auto=format&fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="ShareFile"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/services/0f2f99ee0616137ed49a275be58053aa.png?auto=format&fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="Slack"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/services/6cf3f5a461feadfba7abc93c4c395b33_2.png?auto=format&fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="Stripe"] {
        display: block;
        background-image: url("https://zapier-images.imgix.net/storage/developer_cli/27f5433f521806493e2c38a304e1786e.png?auto=format&fit=crop&h=28&w=28"); }
      #workflow-rules #table-rules tbody tr td.rule-then .rule-then-container .webhook-app[data-app="Zapier"] {
        display: block;
        background-image: url("https://logo.clearbit.com/www.zapier.com?size=28"); }

#workflow-rules #table-rules tbody tr td.rule-then i.fa.fa-plus-circle, #workflow-rules #table-rules tbody tr td.rule-if i.fa.fa-plus-circle {
  font-size: 1em; }

#workflow-rules #table-rules tbody tr td.rule-then i.fa.fa-check-square-o, #workflow-rules #table-rules tbody tr td.rule-if i.fa.fa-check-square-o {
  font-size: 1em; }

#workflow-rules #table-rules tbody tr td.rule-then i.fa.fa-minus-square-o, #workflow-rules #table-rules tbody tr td.rule-if i.fa.fa-minus-square-o {
  font-size: 1em; }

#workflow-rules #table-rules tbody tr td.rule-then ul, #workflow-rules #table-rules tbody tr td.rule-if ul {
  margin-bottom: 0; }

#workflow-rules #table-rules tbody tr td.rule-then code.value-error:before, #workflow-rules #table-rules tbody tr td.rule-if code.value-error:before {
  animation-fill-mode: both;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: wobble;
  animation-timing-function: ease-in-out;
  font-family: "FontAwesome";
  content: "\f071";
  display: inline-block;
  margin-right: 5px;
  color: #D32F2F; }

#workflow-rules #table-rules tbody tr .rule-order {
  white-space: nowrap;
  width: 100px; }

#workflow-rules #table-rules .rule-action-type-tooltip {
  color: #212529; }

#workflow-rules #table-rules .rule-creator {
  color: #BDBDBD; }

.access-denied {
  background-image: url(https://d1v1s76gnntd7e.cloudfront.net/pipeline/smart-owl-153x221.png);
  background-repeat: no-repeat;
  background-position-x: center;
  height: 230px;
  margin: 1em 0; }

.speech-bubble, .speech-bubble-404, .speech-bubble-error {
  background: #FFF3E0;
  border: 1px solid #FFCC80;
  border-radius: 20px;
  margin: 4em auto 3em;
  display: inline-block;
  padding: 0 4em;
  position: relative; }
  .speech-bubble .speech-bubble-arrow, .speech-bubble-404 .speech-bubble-arrow, .speech-bubble-error .speech-bubble-arrow {
    bottom: -25px;
    position: absolute;
    left: 0; }
    .speech-bubble .speech-bubble-arrow::before, .speech-bubble-404 .speech-bubble-arrow::before, .speech-bubble-error .speech-bubble-arrow::before {
      border-left: 23px solid transparent;
      border-top: 23px solid #FFCC80;
      bottom: 2px;
      content: "";
      position: absolute;
      left: 150px; }
    .speech-bubble .speech-bubble-arrow::after, .speech-bubble-404 .speech-bubble-arrow::after, .speech-bubble-error .speech-bubble-arrow::after {
      border-left: 21px solid transparent;
      border-top: 21px solid #FFF3E0;
      bottom: 4px;
      content: "";
      position: absolute;
      left: 151px; }
  .speech-bubble h2, .speech-bubble-404 h2, .speech-bubble-error h2 {
    margin: .5em 0; }
    .speech-bubble h2 i, .speech-bubble-404 h2 i, .speech-bubble-error h2 i {
      margin-right: 5px; }

.speech-bubble-404, .speech-bubble-error {
  border: 1px solid #EF9A9A;
  background-color: #FFEBEE; }
  .speech-bubble-404 .speech-bubble-arrow, .speech-bubble-error .speech-bubble-arrow {
    left: 15%; }
    .speech-bubble-404 .speech-bubble-arrow::before, .speech-bubble-error .speech-bubble-arrow::before {
      border-top: 23px solid #EF9A9A; }
    .speech-bubble-404 .speech-bubble-arrow::after, .speech-bubble-error .speech-bubble-arrow::after {
      border-top: 21px solid #FFEBEE; }

.speech-bubble-error .speech-bubble-arrow {
  left: 0%; }

/* 
Page: One Tile

A page with one tile is typically used for grid pages.

<span class="text-highlight">If this tile has a header, it can only contain the action bar</span>. It cannot contain the user bar.

Weight: 200

Styleguide PageOnePanel
*/
/* 
Basic

### Components

- [`Action Link`](section-elementlinks.html)
- [`Heading`](section-elementheadings.html)
- [`Table`](section-elementtables.html)
- [`Tile`](section-componenttile.html)

Markup: page-onepanel-basic.hbs

Styleguide PageOnePanel.Basic
*/
/* 
Tabs

### Components

- [`Action Link`](section-elementlinks.html)
- [`Heading`](section-elementheadings.html)
- [`Table`](section-elementtables.html)
- [`Tile: Tab`](section-componenttiletab.html)

Markup: page-onepanel-tabs.hbs

Styleguide PageOnePanel.Tabs
*/
/* 
Kitchen Sink

### Components

- [`Action Link`](section-elementlinks.html)
- [`Heading`](section-elementheadings.html)
- [`Table`](section-elementtables.html)
- [`Tile`](section-componenttile.html)
- [`Pagination`](section-elementpagination.html)

Markup: page-onepanel-kitchensink.hbs

Weight: 200

Styleguide PageOnePanel.KitchenSink
*/
/* 
Page: Two Tiles

A page with two tiles is typically used for detail pages.

- The top tile is the Overview Tile. <span class="text-highlight">This tile must have a header with a user bar and action bar</span>.
- The bottom tile is the Details Tile, which typically has tabs. <span class="text-highlight">This tile cannot have a header</span>.

Weight: 200

Styleguide PageTwoPanel
*/
/* 
Basic

### Components

- [`Action Link`](section-elementlinks.html)
- [`Heading`](section-elementheadings.html)
- [`Table`](section-elementtables.html)
- [`Tile`](section-componenttile.html)
- [`Pagination`](section-elementpagination.html)

Markup: page-twopanel-basic.hbs

Styleguide PageTwoPanel.Basic
*/
/* 
Kitchen Sink

### Components

- [`Action Link`](section-elementlinks.html)
- [`Heading`](section-elementheadings.html)
- [`Table`](section-elementtables.html)
- [`Tile`](section-componenttile.html)
- [`Pagination`](section-elementpagination.html)

Markup: page-twopanel-kitchensink.hbs

Weight: 200

Styleguide PageTwoPanel.KitchenSink
*/
/* 
Page: Home

Markup: page-home.hbs

Weight: 200

Styleguide PageHome
*/
/* 
Page: External

Weight: 210

Styleguide PageExternal
*/
/* 
Create Ask

Markup: page-external-form.hbs

Weight: 200

Styleguide PageExternal.CreateAsk
*/
/* 
Error

### Components

- [`Error Messages: External`](section-componenterrormessagesexternal.html)

Markup: error-external.hbs

Weight: 200

Styleguide PageExternal.Error
*/
/* 
Step

### Components

- [`Ask Step: External`](section-componentaskstepexternal.html)

Markup: page-external-step.hbs

Weight: 200

Styleguide PageExternal.Step
*/
/* 
Step Confirmation

### Components

- [`Ask Step: External: Confirmation`](section-componentaskstepexternal.html#kssref-componentaskstepexternal-confirmationmessages)

Markup: request-step-external-done.hbs

Weight: 200

Styleguide PageExternal.StepConfirmation
*/
/* 
Step Error

### Components

- [`Ask Step: External: Error`](section-componentaskstepexternal.html#kssref-componentaskstepexternal-error)

Markup: request-step-external-error.hbs

Weight: 200

Styleguide PageExternal.StepError
*/
.text.datetime .time:before {
  content: " at "; }

.add-to-bundle[data-alreadyinbundle="true"] {
  color: #9E9E9E; }

#request-notes .note-creator {
  text-align: right; }
  #request-notes .note-creator .note-time {
    display: block;
    font-size: 85%; }

#all-form-fields-tab-step-forms-header {
  padding-bottom: 15px; }

#request-view-top-tile {
  position: relative;
  min-height: 260px; }
  #request-view-top-tile h2:before {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    padding-left: 0.6em;
    padding-right: 0.6em;
    position: relative;
    top: -1px;
    border-radius: 10rem;
    font-size: 65%;
    margin-right: 10px;
    top: -0.2rem; }
  #request-view-top-tile .contact-requester:after {
    font-family: "FontAwesome";
    content: "\f0e0";
    margin-left: 5px; }
  #request-view-top-tile .contact-workflow-owner:after {
    font-family: "FontAwesome";
    content: "\f0e0";
    margin-left: 5px; }
  #request-view-top-tile .contentwithborder p,
  #request-view-top-tile .panel-body p {
    word-wrap: break-word; }
    #request-view-top-tile .contentwithborder p .workflow-name,
    #request-view-top-tile .panel-body p .workflow-name {
      margin-right: 0.5em; }
  #request-view-top-tile a {
    text-decoration: none; }

#content[data-is-completed="1"] #request-view-top-tile h2:before {
  color: #255827;
  background-color: #E8F5E9;
  border-color: #A5D6A7;
  content: "Completed"; }

#content[data-is-completed="1"] #request-view-top-tile .contentwithborder,
#content[data-is-completed="1"] #request-view-top-tile .panel-body {
  background-color: #E8F5E9; }
  #content[data-is-completed="1"] #request-view-top-tile .contentwithborder:before,
  #content[data-is-completed="1"] #request-view-top-tile .panel-body:before {
    content: "\f00c";
    font-family: "FontAwesome";
    position: absolute;
    color: #A5D6A7;
    left: 47%;
    top: 150px; }

#content[data-is-completed="1"] #request-view-step-tile .panel-body h4:first-child {
  margin-top: 0; }

#content[data-is-completed="1"] #request-view-step-tile .step-detail-instructions {
  display: none; }

#content[data-is-canceled="1"] #request-view-top-tile h2:before {
  color: #424242;
  background-color: #EEEEEE;
  border-color: #BDBDBD;
  content: "Canceled"; }

#content[data-is-canceled="1"] #request-view-top-tile .contentwithborder,
#content[data-is-canceled="1"] #request-view-top-tile .panel-body {
  background-color: #EEEEEE; }
  #content[data-is-canceled="1"] #request-view-top-tile .contentwithborder:before,
  #content[data-is-canceled="1"] #request-view-top-tile .panel-body:before {
    content: "\f00d";
    font-family: "FontAwesome";
    position: absolute;
    color: #BDBDBD;
    left: 47%;
    top: 150px; }

#content[data-is-canceled="1"] #request-view-step-tile .panel-body h4:first-child {
  margin-top: 0; }

#content[data-is-canceled="1"] #request-view-step-tile .step-detail-instructions {
  display: none; }

#request-status[data-isowner="0"] #closeRequestLink {
  display: none; }

#request-status[data-isowner="0"] #deleteRequestLink {
  display: none; }

#request-status[data-isowner="0"][data-isrequester="0"] #editRequestLink {
  display: none; }

#request-status[data-isowner="0"][data-isrequester="0"][data-isstepowner="0"] #cancelRequestLink {
  display: none; }

#request-status[data-isowner="0"][data-isrequester="0"][data-isstepowner="0"] #reopenRequestLink {
  display: none; }

#request-status[data-isowner="1"][data-status="Completed"] #cancelRequestLink {
  display: none; }

#request-status[data-isowner="1"][data-status="Completed"] #closeRequestLink {
  display: none; }

#request-status[data-isowner="1"][data-status="Canceled"] #cancelRequestLink {
  display: none; }

#request-status[data-isowner="1"][data-status="Canceled"] #closeRequestLink {
  display: none; }

#request-status[data-isrequester="1"][data-status="Completed"] #cancelRequestLink {
  display: none; }

#request-status[data-isrequester="1"][data-status="Completed"] #closeRequestLink {
  display: none; }

#request-status[data-isrequester="1"][data-status="Canceled"] #cancelRequestLink {
  display: none; }

#request-status[data-isprocessarchived="1"] #duplicateRequestLink {
  display: none; }

#request-status[data-status="Open"] #reopenRequestLink {
  display: none; }

#request-status[data-status="Completed"] #request-view-top-tile h2:before {
  color: #FFFFFF;
  background-color: #43A047;
  content: "Completed"; }

#request-status[data-status="Completed"] #request-view-top-tile .contentwithborder,
#request-status[data-status="Completed"] #request-view-top-tile .panel-body {
  background-color: #E8F5E9; }
  #request-status[data-status="Completed"] #request-view-top-tile .contentwithborder:before,
  #request-status[data-status="Completed"] #request-view-top-tile .panel-body:before {
    content: "\f00c";
    font-family: "FontAwesome";
    font-size: 7em;
    position: absolute;
    color: #A5D6A7;
    left: 47%;
    top: 150px; }

#request-status[data-status="Completed"] #editRequestLink {
  display: none; }

#request-status[data-status="Completed"] #request-view-step-tile .panel-body h4:first-child {
  margin-top: 0; }

#request-status[data-status="Completed"] #request-view-step-tile .step-detail-instructions {
  display: none; }

#request-status[data-status="Canceled"] #request-view-top-tile h2:before {
  color: #FFFFFF;
  background-color: #616161;
  content: "Canceled"; }

#request-status[data-status="Canceled"] #request-view-top-tile .contentwithborder,
#request-status[data-status="Canceled"] #request-view-top-tile .panel-body {
  background-color: #EEEEEE; }
  #request-status[data-status="Canceled"] #request-view-top-tile .contentwithborder:before,
  #request-status[data-status="Canceled"] #request-view-top-tile .panel-body:before {
    content: "\f00d";
    font-family: "FontAwesome";
    font-size: 7em;
    position: absolute;
    color: #BDBDBD;
    left: 47%;
    top: 150px; }

#request-status[data-status="Canceled"] #editRequestLink {
  display: none; }

#request-status[data-status="Canceled"] #request-view-step-tile .panel-body h4:first-child {
  margin-top: 0; }

#request-status[data-status="Canceled"] #request-view-step-tile .step-detail-instructions {
  display: none; }

.step-detail-files .row.media-list {
  margin-left: 0px;
  margin-right: 0px; }

#request-view-step-tile[data-useduedates="0"] .step-duedates {
  display: none; }

[data-requires-files="1"][data-has-files="0"] input[value="Update"] {
  pointer-events: none;
  color: #424242;
  background-color: #E0E0E0;
  border: 1px solid #E0E0E0;
  opacity: 0.65; }

.delete-button-hover.text-muted {
  pointer-events: none; }

.download-all-files:before {
  font-family: "FontAwesome";
  content: '\f0ed';
  margin-right: 0.2em; }

#request-summary .rc-collapse {
  min-width: 600px;
  width: 600px;
  max-width: 600px; }
  #request-summary .rc-collapse .list-collapse a {
    padding: 0 0.5rem; }

.step-detail.panel-body .step-detail-files[data-requires-files="1"] h4:before {
  content: "* "; }

#request-view-tabs-tile .react-tabs {
  float: left; }

#request-view-tabs-tile.activity-open .react-tabs {
  width: 65%;
  transition: all 0.1s linear; }

#request-view-tabs-tile.activity-closed .react-tabs {
  width: 100%;
  transition: all 0.2s linear; }

#request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs {
  width: 100%; }
  #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step .rc-collapse-header .step-collapse-header .panel-actions .step-activity-feeds {
    display: none; }
  #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-iscurrentstep="true"] {
    width: 104%;
    padding: 1.5em 2%;
    left: -2%; }
  #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"], #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"] {
    padding: 0;
    border-top-width: 0; }
    #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"] .rc-collapse-header > span, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"] .rc-collapse-header > span {
      display: none; }
    #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"] .rc-collapse-header .step-collapse-header, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"] .rc-collapse-header .step-collapse-header {
      display: none; }
    #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"] .rc-collapse-header:before, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"] .rc-collapse-header:before {
      content: "...";
      display: block;
      text-align: left;
      position: relative;
      left: 71px;
      line-height: 0.75em;
      top: -0.25em;
      width: 80%; }
    #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"] .rc-collapse-content, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"] .rc-collapse-content {
      display: none; }
    #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"][data-iscurrentstep="true"], #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"][data-iscurrentstep="true"] {
      width: auto;
      box-shadow: none;
      left: 0; }
      #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"][data-iscurrentstep="true"] .rc-collapse-header, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"][data-iscurrentstep="true"] .rc-collapse-header {
        left: 0; }
        #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"][data-iscurrentstep="true"] .rc-collapse-header:before, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"][data-iscurrentstep="true"] .rc-collapse-header:before {
          content: "\f0e7";
          font-family: "FontAwesome";
          line-height: 2rem;
          top: 0;
          display: inline-block;
          width: auto;
          margin-right: 5px;
          font-size: 0.8em;
          animation-duration: 8s;
          animation-name: flash;
          animation-iteration-count: infinite; }
        #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"][data-iscurrentstep="true"] .rc-collapse-header:after, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"][data-iscurrentstep="true"] .rc-collapse-header:after {
          content: "Execute automation ...";
          line-height: 2rem;
          top: 0;
          display: inline-block;
          width: auto;
          font-size: 0.8em;
          position: relative;
          left: 72px; }
        #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"][data-iscurrentstep="true"] .rc-collapse-header .clearfix, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"][data-iscurrentstep="true"] .rc-collapse-header .clearfix {
          display: none; }
      #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:before, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:before {
        content: "\f017"; }
      #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:after, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"][data-iscurrentstep="true"][data-step-type="5"] .rc-collapse-header:after {
        content: "Delay based on timer ..."; }
    #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"]:first-child, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"]:first-child {
      border-top: 1px solid #E0E0E0; }
    #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-isbotowner="1"]:last-child, #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step[data-step-status="Skipped"]:last-child {
      border-bottom: 1px solid #E0E0E0; }
  #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step:not([data-isbotowner="1"]) + [data-isbotowner="1"] {
    border-top: 1px solid #E0E0E0; }
  #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step:not([data-isbotowner="1"]):not([data-step-status="Skipped"]) + :not([data-isbotowner="1"])[data-step-status="Skipped"] {
    border-top: 1px solid #E0E0E0; }
  #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step-group .step[data-iscurrentstep="true"] {
    left: 30px;
    width: 100%; }
  #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step-group .step[data-isbotowner="1"][data-iscurrentstep="true"], #request-view-tabs-tile[data-isshowstepdetails="0"] .react-tabs #request-view-step-tile .step-group .step[data-step-status="Skipped"][data-iscurrentstep="true"] {
    width: calc(100% - 62px);
    box-shadow: none;
    left: 62px; }

#request-view-tabs-tile[data-isshowstepdetails="0"] #request-view-activity-tile {
  display: none; }

.rc-collapse-anim-active {
  transition: height 0.2s ease-out; }

.rc-collapse-content-inactive {
  display: none; }

.arrow_box {
  position: relative;
  background: #F5F5F5;
  min-height: 60px;
  word-wrap: break-word;
  padding: 0.5em;
  border-radius: 3px; }

.arrow_box:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: #F5F5F5;
  border-width: 10px;
  margin-top: -15px; }

.table-request-recurrences-column[data-is-complete="1"] {
  color: #9E9E9E;
  background-color: #E0E0E0; }

.table-request-recurrences-column .modal-content {
  color: #000000; }

.alert.alert-danger.alert-error.alert-block.error h4 {
  margin-top: 0em !important; }

.all-forms-step-header-section-badge {
  margin-right: 5px; }

#request-view-recurrences-tile .panel-body.request-recurrences .panel-actions {
  z-index: 1000; }

@media (max-width: 1199.98px) {
  #request-view-tabs-tile {
    float: none;
    width: auto; }
    #request-view-tabs-tile .react-tabs {
      width: auto !important;
      transition: none !important; } }

#requestTabList li.tab_my-todos:hover .badge, #requestTabList li.tab_my-todos.react-tabs__tab--selected .badge {
  background-color: #E53935; }

#requestTabList li.tab_my-submitted:hover .badge, #requestTabList li.tab_my-submitted.react-tabs__tab--selected .badge {
  background-color: #FB8C00; }

#requestTabList li.tab_my-team-todos:hover .badge, #requestTabList li.tab_my-team-todos.react-tabs__tab--selected .badge {
  background-color: #3F51B5; }

#requestTabList li.tab_my-team-unassigned:hover .badge, #requestTabList li.tab_my-team-unassigned.react-tabs__tab--selected .badge {
  background-color: #3F51B5; }

#IWModal .modal-header {
  display: block; }

.modal-backdrop {
  opacity: .8; }

#request-grid-add-to-bundle {
  color: #3F51B5; }

.teams-workflow[data-isowner="1"] .label.app.label-stepowner {
  display: none; }

#fb_item_external_valid_date {
  text-align: left; }

/***Edit Workflow***/
#RecurrenceUpdateModalOverride .control-label {
  text-align: left; }

.panel .panel-body .request-step-summary .request-summary-step-header-section {
  font-size: 1.25rem; }
  .panel .panel-body .request-step-summary .request-summary-step-header-section .badge {
    font-size: 60%;
    top: -0.25em;
    background-color: #FFFFFF; }
    .panel .panel-body .request-step-summary .request-summary-step-header-section .badge.badge-step-default {
      margin-top: 0.2em;
      color: #424242;
      background-color: #FFCDD2;
      border-width: 0px; }
  .panel .panel-body .request-step-summary .request-summary-step-header-section .avatar {
    margin-left: .5em; }
  .panel .panel-body .request-step-summary .request-summary-step-header-section .step-completed-info {
    display: none;
    font-size: 60%;
    padding-left: 2em; }
    .panel .panel-body .request-step-summary .request-summary-step-header-section .step-completed-info .step-completed-date {
      color: #9E9E9E; }

.panel .panel-body .request-step-summary .request-step-summary-section {
  padding-left: 26px; }
  .panel .panel-body .request-step-summary .request-step-summary-section h4 {
    margin-bottom: 1em;
    font-size: 1.1rem; }
  .panel .panel-body .request-step-summary .request-step-summary-section .request-step-summary-body {
    padding-left: 26px; }
    .panel .panel-body .request-step-summary .request-step-summary-section .request-step-summary-body .datetime {
      font-size: 85%; }
  .panel .panel-body .request-step-summary .request-step-summary-section .row {
    margin-bottom: 1em; }

.panel .panel-body .request-step-summary[data-isadhocstep="1"] > .request-summary-step-header-section .badge.badge-step-default {
  background-color: #FF9800; }

.panel .panel-body .request-step-summary[data-isconfidential="0"] > .request-summary-step-header-section .step-confidential {
  display: none; }

.panel .panel-body .request-step-summary[data-step-status="Completed"] > .request-summary-step-header-section .badge.badge-step-default {
  background-color: #4CAF50;
  border-width: 0;
  color: #FFFFFF; }

.panel .panel-body .request-step-summary[data-step-status="Completed"] > .request-summary-step-header-section .step-completed-info {
  display: inline-block; }

.panel .panel-body .request-step-summary[data-step-status="Completed"] > .request-summary-step-header-section span.step-name:after {
  color: #81C784;
  font-family: "FontAwesome";
  content: "\f00c";
  padding: 0 1em 0 0.5em; }

.panel .panel-body .request-step-summary[data-step-status="Completed"][data-isadhocstep="1"] > .request-summary-step-header-section .badge.badge-step-default {
  background-color: #3F51B5; }

.panel .panel-body .request-step-summary[data-step-status="Canceled"] > .request-summary-step-header-section .badge.badge-step-default {
  background-color: #BDBDBD;
  border-width: 0;
  color: #FFFFFF; }

.panel .panel-body .request-step-summary[data-step-status="Skipped"] > .request-summary-step-header-section .badge.badge-step-default {
  background-color: #BDBDBD;
  border-width: 0;
  color: #FFFFFF; }

.panel .panel-body .request-step-summary[data-step-status="Skipped"] > .request-summary-step-header-section span.step-name {
  text-decoration: line-through; }

.panel .panel-body .request-step-summary[data-useduedates="0"] .due-dates {
  display: none; }

.panel .panel-body .step-group-steps .request-step-summary {
  margin-left: 40px; }

.request-summary-table {
  width: 100%; }

.request-summary-userbar {
  width: 90%; }

.request-summary-create-request-header-section {
  padding-bottom: 5px; }

.request-summary-step-header-section {
  padding-bottom: 10px; }
  .request-summary-step-header-section i.fa-check {
    padding-left: 15px;
    color: #81C784; }
  .request-summary-step-header-section .step-duedates-date {
    font-size: .9rem; }
    .request-summary-step-header-section .step-duedates-date.current-step {
      color: red;
      font-weight: bold; }

.request-summary-note,
.request-summary-file {
  padding-bottom: 10px; }
  .request-summary-note .datetime,
  .request-summary-file .datetime {
    color: #9E9E9E; }

.request-summary-form-fields-section {
  padding-left: 70px;
  padding-bottom: 10px; }

.badge.badge-step-default.request-summary-step-header-section-badge {
  margin-left: 0px; }

.request-summary.panel-body .avatar.avatar-sm {
  height: 30px;
  width: 30px; }

.request-summary.panel-body img {
  height: 30px;
  width: 30px; }

.request-summary.panel-body span {
  font-size: 0.9em;
  top: 15%; }

#content > div > div.request-summary.panel-heading > table > tr > td.request-summary-chart-progress > div > div {
  width: 200px; }

@media (max-width: 767.98px) {
  #request-view-top-tile {
    margin-bottom: 1em; } }

@media (max-width: 1199.98px) {
  #request-view-top-tile #request-summary .progress {
    height: 30px;
    margin-bottom: 1em; }
  #request-view-top-tile #request-summary .request-chart {
    display: none; } }

@media (min-width: 1199.99px) {
  #request-view-top-tile #request-summary .progress {
    display: none; } }

#workflow-form .panel-actions {
  position: relative;
  z-index: 10; }

#workflow-due-dates .panel-actions {
  position: relative;
  z-index: 10; }

#ajax-formdesign .control-label {
  text-align: left; }

/* The contents of this file came from now deprecated file: bootstrap-override-v3.css
   TODO: Move the styling in this file to other appropriate partials */
form input, form textarea, form select {
  width: auto; }

form input.pad15, form textarea.pad15, form select.pad15 {
  margin-right: 15px; }

form span.formrequired, form span.formnonrequired {
  display: none; }

form span.formrequired + label {
  font-weight: bold; }

form span.formrequired + label:before {
  content: "* ";
  font-weight: bold; }

form span.formrequired + span {
  font-weight: bold;
  display: block;
  text-align: right; }

form span.formrequired + span:before {
  content: "* ";
  font-weight: bold; }

form span.formnonrequired + label {
  font-weight: bold; }

form span.formnonrequired + span {
  font-weight: bold;
  display: block;
  text-align: right; }

form span.fieldformat {
  font-style: italic;
  font-size: 90%;
  color: #666666; }

form span.fieldformat a {
  padding: 0 !important; }

form span.fieldformat.d-block {
  font-style: normal;
  font-size: 1em;
  color: #424242;
  margin-bottom: 1em; }

form .btn.btn-inverse {
  background-color: #333333;
  background-image: none;
  color: #fff; }

form.form-horizontal .control-label {
  text-align: right;
  display: block; }

form.form-horizontal .control-group {
  margin-bottom: 10px; }

form.form-horizontal .control-group.flush {
  margin: 0; }

form.form-horizontal .control-group.topspacer {
  margin-top: 2.5em; }

form.form-horizontal .control-group table td.pad15 {
  padding-right: 15px; }

form.form-horizontal .control-group input.pad15 {
  margin-right: 15px; }

form.form-horizontal .control-group .highlight {
  background-color: #ffffcc; }

form.form-horizontal .control-group label.fdcheckboxlabel, form.form-horizontal .control-group label.fdradiolabel {
  cursor: pointer;
  display: block;
  font-weight: normal;
  margin: 0;
  position: relative; }

form.form-horizontal .control-group label.fdcheckboxlabel input, form.form-horizontal .control-group label.fdradiolabel input {
  float: left;
  position: relative;
  margin: 4px; }

form.form-horizontal .control-group label.fdcheckboxlabel input:hover, form.form-horizontal .control-group label.fdradiolabel input:hover {
  background-color: #FFFFCC; }

form.form-horizontal .control-group label.fdcheckboxlabel:hover, form.form-horizontal .control-group label.fdradiolabel:hover {
  background-color: #FFFFCC; }

form.form-horizontal .control-group .cellprompt {
  margin-left: 15px; }

form.form-horizontal .control-group .cellprompt label {
  display: inline; }

form.form-horizontal .control-group .cellprompt .control-label {
  float: none; }

form.form-horizontal .control-group .row p {
  margin: 0;
  padding-top: 7px; }

form.form-horizontal .form-actions {
  padding-left: 27%;
  background-color: inherit; }

form.form-horizontal .form-actions input.pad15 {
  margin-right: 15px; }

form.form-vertical .control-group {
  margin-bottom: 10px; }

form.form-vertical .control-group .topspacer {
  margin-top: 2.5em; }

form.form-vertical .control-group table td.pad15 {
  padding-right: 15px; }

form.form-vertical .control-group input.pad15 {
  margin-right: 15px; }

form.form-vertical .control-group .highlight {
  background-color: #FFF59D; }

form.form-vertical .control-group table.formlistgrid {
  margin-top: 3px; }

form.form-vertical .control-group label.fdcheckboxlabel, form.form-vertical .control-group label.fdradiolabel {
  cursor: pointer;
  display: block;
  font-weight: normal;
  margin: 0;
  padding: 2px 10px 2px 4px;
  position: relative; }

form.form-vertical .control-group label.fdcheckboxlabel input, form.form-vertical .control-group label.fdradiolabel input {
  float: left;
  position: relative;
  top: 0px;
  margin: 4px; }

form.form-vertical .control-group label.fdcheckboxlabel input:hover, form.form-vertical .control-group label.fdradiolabel input:hover {
  background-color: #FFFFCC; }

form.form-vertical .control-group label.fdcheckboxlabel:hover, form.form-vertical .control-group label.fdradiolabel:hover {
  background-color: #FFFFCC; }

form.form-vertical .control-group span.formrequired + span {
  text-align: left; }

form.form-vertical .control-group span.formnonrequired + span {
  text-align: left; }

form.form-vertical .form-actions {
  padding-left: 0;
  background-color: inherit; }

form.form-vertical .form-actions input.pad15 {
  margin-right: 15px; }

.well form {
  margin: 0;
  width: auto; }

.well form input.input-xxlarge {
  width: 430px; }

.well .form-horizontal .control-group.flush {
  margin: 5px 0; }

.well .form-horizontal .control-label {
  width: 15%; }

.well .form-horizontal .controls {
  margin-left: 17%; }

.well code {
  background-color: #ffffff; }

.span6 .well .control-group.flush {
  margin: 5px 0; }

.span6 .well .control-label {
  width: 20%; }

.span6 .well .controls {
  margin-left: 22%; }

table td .control-label {
  padding-top: 7px;
  text-align: right;
  display: block; }

table tr.danger td .control-label {
  color: #ff0000;
  font-weight: bold; }

table tr.danger td input.required, table tr.danger td select.required {
  border: 2px solid #ff0000; }

.alert h4 {
  margin-bottom: 0.3em; }

.alert.alert-block h4 {
  font-weight: bold; }

.progress {
  height: 40px; }

.progress.short {
  height: 20px; }

.fix-width {
  width: auto; }

.input-group .form-control.fix-width {
  width: auto; }

.navbar ul.nav li.dropdown ul.dropdown-menu {
  margin-top: 0px; }

.navbar ul.nav li.dropdown ul.dropdown-menu li.active a {
  color: #ffffff; }

.navbar ul.nav li.dropdown:hover ul.dropdown-menu {
  display: block; }

.modal .modal-header h3 {
  margin: 0; }

.popover {
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px; }

@media (max-width: 1199.98px) {
  body #headerwrapper {
    padding: 0;
    height: auto;
    position: relative;
    top: initial; }
    body #headerwrapper #mobilenav {
      display: flex;
      width: 100%;
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
      padding: 0.5em 0.5em; }
      body #headerwrapper #mobilenav .navbar-brand {
        margin-right: 0; }
        body #headerwrapper #mobilenav .navbar-brand img {
          width: 32px; }
      body #headerwrapper #mobilenav .navbar-nav .nav-link {
        color: #FFFFFF; }
      body #headerwrapper #mobilenav .navbar-toggler {
        border: none;
        padding-left: 0;
        padding-right: 0; }
        body #headerwrapper #mobilenav .navbar-toggler .navbar-toggler-icon {
          background-image: none; }
          body #headerwrapper #mobilenav .navbar-toggler .navbar-toggler-icon:before {
            font-family: "FontAwesome";
            content: "\f0c9";
            color: #FFFFFF;
            display: inline-block;
            margin-top: 0.1em;
            font-size: 1.2em; }
      body #headerwrapper #mobilenav .navbar-nav li.nav-item {
        padding-left: 5px; }
    body #headerwrapper #sidenav {
      display: none; }
    body #headerwrapper #header {
      display: none; }
  body #contentwrapper {
    padding: 0 0.5em;
    padding-top: 0em;
    margin-left: 0px; }
    body #contentwrapper .container {
      padding: 20px 20px 4em 20px; }
  body #footerwrapper {
    margin-left: 0; }
  body #chatbot {
    display: none; } }

@media (max-width: 768px) {
  iframe {
    width: 100% !important;
    height: auto !important; }
  .calendly-inline-widget iframe,
  .oncehub-inline-widget iframe {
    height: 600px !important; } }