@eform/ng-formio-builder/dist/ngFormBuilder-complete.css

The Angular.js form builder component.

@-webkit-keyframes ngdialog-fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ngdialog-fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ngdialog-fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes ngdialog-fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.ngdialog {
  box-sizing: border-box;
}

.ngdialog *,
.ngdialog *:before,
.ngdialog *:after {
  box-sizing: inherit;
}

.ngdialog {
  position: fixed;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* fix for Scrollbars not clickable on overflow #552 */
  background: rgba(0, 0, 0, 0.4); 
  animation: ngdialog-fadein 0.5s;
  /* end fix for Scrollbars not clickable on overflow #552 */
}

.ngdialog.ngdialog-disabled-animation,
.ngdialog.ngdialog-disabled-animation .ngdialog-overlay,
.ngdialog.ngdialog-disabled-animation .ngdialog-content {
  -webkit-animation: none!important;
  animation: none!important;
}

.ngdialog-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadein 0.5s;
  animation: ngdialog-fadein 0.5s;
  /* fix for Scrollbars not clickable on overflow #552 */
  margin-right: 15px;
  background: transparent;
  /* end fix for Scrollbars not clickable on overflow #552 */
}

.ngdialog-no-overlay {
  pointer-events: none;
}

.ngdialog.ngdialog-closing .ngdialog-overlay {
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadeout 0.5s;
  animation: ngdialog-fadeout 0.5s;
}

.ngdialog-content {
  background: white;
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadein 0.5s;
  animation: ngdialog-fadein 0.5s;
  pointer-events: all;
}

.ngdialog.ngdialog-closing .ngdialog-content {
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadeout 0.5s;
  animation: ngdialog-fadeout 0.5s;
}

.ngdialog-close:before {
  font-family: 'Helvetica', Arial, sans-serif;
  content: '\00D7';
  cursor: pointer;
}

html.ngdialog-open,
body.ngdialog-open {
  overflow: hidden;
}

@-webkit-keyframes ngdialog-flyin {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes ngdialog-flyin {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes ngdialog-flyout {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

@keyframes ngdialog-flyout {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

.ngdialog.ngdialog-theme-default {
  padding-bottom: 160px;
  padding-top: 160px;
}

.ngdialog.ngdialog-theme-default.ngdialog-closing .ngdialog-content {
  -webkit-animation: ngdialog-flyout .5s;
  animation: ngdialog-flyout .5s;
}

.ngdialog.ngdialog-theme-default .ngdialog-content {
  -webkit-animation: ngdialog-flyin .5s;
  animation: ngdialog-flyin .5s;
  background: #f0f0f0;
  border-radius: 5px;
  color: #444;
  font-family: 'Helvetica',sans-serif;
  font-size: 1.1em;
  line-height: 1.5em;
  margin: 0 auto;
  max-width: 100%;
  padding: 1em;
  position: relative;
  width: 450px;
}

.ngdialog.ngdialog-theme-default .ngdialog-close {
  border: none;
  background: transparent;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}

.ngdialog.ngdialog-theme-default .ngdialog-close:before {
  display: block;
  padding: 3px;
  background: transparent;
  color: #bbb;
  content: '\00D7';
  font-size: 26px;
  font-weight: 400;
  line-height: 26px;
  text-align: center;
}

.ngdialog.ngdialog-theme-default .ngdialog-close:hover:before,
.ngdialog.ngdialog-theme-default .ngdialog-close:active:before {
  color: #777;
}

.ngdialog.ngdialog-theme-default .ngdialog-message {
  margin-bottom: .5em;
}

.ngdialog.ngdialog-theme-default .ngdialog-input {
  margin-bottom: 1em;
}

.ngdialog.ngdialog-theme-default .ngdialog-input textarea,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"],
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"],
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"],
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"] {
  background: #fff;
  border: 0;
  border-radius: 3px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0 0 .25em;
  min-height: 2.5em;
  padding: .25em .67em;
  width: 100%;
}

.ngdialog.ngdialog-theme-default .ngdialog-input textarea:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"]:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"]:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"]:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"]:focus {
  box-shadow: inset 0 0 0 2px #8dbdf1;
  outline: none;
}

.ngdialog.ngdialog-theme-default .ngdialog-buttons {
  *zoom: 1;
}

.ngdialog.ngdialog-theme-default .ngdialog-buttons:after {
  content: '';
  display: table;
  clear: both;
}

.ngdialog.ngdialog-theme-default .ngdialog-button {
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  float: right;
  font-family: inherit;
  font-size: .8em;
  letter-spacing: .1em;
  line-height: 1em;
  margin: 0 0 0 .5em;
  padding: .75em 2em;
  text-transform: uppercase;
}

.ngdialog.ngdialog-theme-default .ngdialog-button:focus {
  -webkit-animation: ngdialog-pulse 1.1s infinite;
  animation: ngdialog-pulse 1.1s infinite;
  outline: none;
}

@media (max-width: 568px) {
  .ngdialog.ngdialog-theme-default .ngdialog-button:focus {
    -webkit-animation: none;
    animation: none;
  }
}

.ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-primary {
  background: #3288e6;
  color: #fff;
}

.ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-secondary {
  background: #e0e0e0;
  color: #777;
}
tags-input {
  display: block;
}
tags-input *, tags-input *:before, tags-input *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
tags-input .host {
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
  height: 100%;
}
tags-input .host:active {
  outline: none;
}

tags-input .tags {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  padding: 1px;
  overflow: hidden;
  word-wrap: break-word;
  cursor: text;
  background-color: #fff;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  height: 100%;
}
tags-input .tags.focused {
  outline: none;
  -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
  -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
  box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
}
tags-input .tags .tag-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
tags-input .tags .tag-item {
  margin: 2px;
  padding: 0 5px;
  display: inline-block;
  float: left;
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 26px;
  line-height: 25px;
  border: 1px solid #acacac;
  border-radius: 3px;
  background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
  background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
}
tags-input .tags .tag-item.selected {
  background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
  background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
}
tags-input .tags .tag-item .remove-button {
  margin: 0 0 0 5px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  vertical-align: middle;
  font: bold 16px Arial, sans-serif;
  color: #585858;
}
tags-input .tags .tag-item .remove-button:active {
  color: #ff0000;
}
tags-input .tags .input {
  border: 0;
  outline: none;
  margin: 2px;
  padding: 0;
  padding-left: 5px;
  float: left;
  height: 26px;
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
tags-input .tags .input.invalid-tag {
  color: #ff0000;
}
tags-input .tags .input::-ms-clear {
  display: none;
}
tags-input.ng-invalid .tags {
  -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
  -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
  box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
}
tags-input[disabled] .host:focus {
  outline: none;
}
tags-input[disabled] .tags {
  background-color: #eee;
  cursor: default;
}
tags-input[disabled] .tags .tag-item {
  opacity: 0.65;
  background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
  background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
}
tags-input[disabled] .tags .tag-item .remove-button {
  cursor: default;
}
tags-input[disabled] .tags .tag-item .remove-button:active {
  color: #585858;
}
tags-input[disabled] .tags .input {
  background-color: #eee;
  cursor: default;
}

tags-input .autocomplete {
  margin-top: 5px;
  position: absolute;
  padding: 5px 0;
  z-index: 999;
  width: 100%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
tags-input .autocomplete .suggestion-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-height: 280px;
  overflow-y: auto;
  position: relative;
}
tags-input .autocomplete .suggestion-item {
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  background-color: #fff;
}
tags-input .autocomplete .suggestion-item.selected {
  color: #fff;
  background-color: #0097cf;
}
tags-input .autocomplete .suggestion-item.selected em {
  color: #fff;
  background-color: #0097cf;
}
tags-input .autocomplete .suggestion-item em {
  font: normal bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  background-color: #fff;
}

/*# sourceMappingURL=ng-tags-input.css.map */

/*!
 * ui-select
 * http://github.com/angular-ui/ui-select
 * Version: 0.19.7 - 2017-04-15T14:28:36.790Z
 * License: MIT
 */


/* Style when highlighting a search. */
.ui-select-highlight {
  font-weight: bold;
}

.ui-select-offscreen {
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  outline: 0 !important;
  left: 0px !important;
  top: 0px !important;
}


.ui-select-choices-row:hover {
  background-color: #f5f5f5;
}

/* Select2 theme */

/* Mark invalid Select2 */
.ng-dirty.ng-invalid > a.select2-choice {
    border-color: #D44950;
}

.select2-result-single {
  padding-left: 0;
}

.select2-locked > .select2-search-choice-close{
  display:none;
}

.select-locked > .ui-select-match-close{
    display:none;
}

body > .select2-container.open {
  z-index: 9999; /* The z-index Select2 applies to the select2-drop */
}

/* Handle up direction Select2 */
.ui-select-container[theme="select2"].direction-up .ui-select-match,
.ui-select-container.select2.direction-up .ui-select-match {
    border-radius: 4px; /* FIXME hardcoded value :-/ */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.ui-select-container[theme="select2"].direction-up .ui-select-dropdown,
.ui-select-container.select2.direction-up .ui-select-dropdown {
    border-radius: 4px; /* FIXME hardcoded value :-/ */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    border-top-width: 1px;  /* FIXME hardcoded value :-/ */
    border-top-style: solid;

    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);

    margin-top: -4px; /* FIXME hardcoded value :-/ */
}
.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search,
.ui-select-container.select2.direction-up .ui-select-dropdown .select2-search {
    margin-top: 4px; /* FIXME hardcoded value :-/ */
}
.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match,
.ui-select-container.select2.direction-up.select2-dropdown-open .ui-select-match {
    border-bottom-color: #5897fb;
}

.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden,
.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input{
    opacity: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border:0;
}

/* Selectize theme */

/* Helper class to show styles when focus */
.selectize-input.selectize-focus{
  border-color: #007FBB !important;
}

/* Fix input width for Selectize theme */
.selectize-control.single > .selectize-input > input {
  width: 100%;
}

/* Fix line break when there's at least one item selected with the Selectize theme */
.selectize-control.multi > .selectize-input > input {
  margin: 0 !important;
}

/* Fix dropdown width for Selectize theme */
.selectize-control > .selectize-dropdown {
  width: 100%;
}

/* Mark invalid Selectize */
.ng-dirty.ng-invalid > div.selectize-input {
    border-color: #D44950;
}

/* Handle up direction Selectize */
.ui-select-container[theme="selectize"].direction-up .ui-select-dropdown {
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
    margin-top: -2px; /* FIXME hardcoded value :-/ */
}

.ui-select-container[theme="selectize"] input.ui-select-search-hidden{
    opacity: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border:0;
    width: 0;
}

/* Bootstrap theme */

/* Helper class to show styles when focus */
.btn-default-focus {
  color: #333;
  background-color: #EBEBEB;
  border-color: #ADADAD;
  text-decoration: none;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.ui-select-bootstrap .ui-select-toggle {
  position: relative;
}

.ui-select-bootstrap .ui-select-toggle > .caret {
  position: absolute;
  height: 10px;
  top: 50%;
  right: 10px;
  margin-top: -2px;
}

/* Fix Bootstrap dropdown position when inside a input-group */
.input-group > .ui-select-bootstrap.dropdown {
  /* Instead of relative */
  position: static;
}

.input-group > .ui-select-bootstrap > input.ui-select-search.form-control {
  border-radius: 4px; /* FIXME hardcoded value :-/ */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up {
  border-radius: 4px !important; /* FIXME hardcoded value :-/ */
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ui-select-bootstrap .ui-select-search-hidden{
    opacity: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border:0;
}

.ui-select-bootstrap > .ui-select-match > .btn{
  /* Instead of center because of .btn */
  text-align: left !important;
}

.ui-select-bootstrap > .ui-select-match > .caret {
  position: absolute;
  top: 45%;
  right: 15px;
}

/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
.ui-select-bootstrap > .ui-select-choices ,.ui-select-bootstrap > .ui-select-no-choice {
  width: 100%;
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
  margin-top: -1px;
}

body > .ui-select-bootstrap.open {
  z-index: 1000; /* Standard Bootstrap dropdown z-index */
}

.ui-select-multiple.ui-select-bootstrap {
  height: auto;
  padding: 3px 3px 0 3px;
}

.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
  background-color: transparent !important; /* To prevent double background when disabled */
  border: none;
  outline: none;
  height: 1.666666em;
  margin-bottom: 3px;
}

.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
  font-size: 1.6em;
  line-height: 0.75;
}

.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
  outline: 0;
  margin: 0 3px 3px 0;
}

.ui-select-multiple .ui-select-match-item {
  position: relative;
}

.ui-select-multiple .ui-select-match-item.dropping .ui-select-match-close {
  pointer-events: none;
}

.ui-select-multiple:hover .ui-select-match-item.dropping-before:before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  margin-right: 2px;
  border-left: 1px solid #428bca;
}

.ui-select-multiple:hover .ui-select-match-item.dropping-after:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  margin-left: 2px;
  border-right: 1px solid #428bca;
}

.ui-select-bootstrap .ui-select-choices-row>span {
    cursor: pointer;
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.ui-select-bootstrap .ui-select-choices-row>span:hover, .ui-select-bootstrap .ui-select-choices-row>span:focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}

.ui-select-bootstrap .ui-select-choices-row.active>span {
    color: #fff;
    text-decoration: none;
    outline: 0;
    background-color: #428bca;
}

.ui-select-bootstrap .ui-select-choices-row.disabled>span,
.ui-select-bootstrap .ui-select-choices-row.active.disabled>span {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
}

/* fix hide/show angular animation */
.ui-select-match.ng-hide-add,
.ui-select-search.ng-hide-add {
    display: none !important;
}

/* Mark invalid Bootstrap */
.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
    border-color: #D44950;
}

/* Handle up direction Bootstrap */
.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
}

.ui-select-bootstrap .ui-select-match-text {
    width: 100%;
    padding-right: 1em;
}
.ui-select-bootstrap .ui-select-match-text span {
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
.ui-select-bootstrap .ui-select-toggle > a.btn {
  position: absolute;
  height: 10px;
  right: 10px;
  margin-top: -2px;
}

/* Spinner */
.ui-select-refreshing.glyphicon {
    position: absolute;
    right: 0;
    padding: 8px 27px;
 }

@-webkit-keyframes ui-select-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes ui-select-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.ui-select-spin {
  -webkit-animation: ui-select-spin 2s infinite linear;
  animation: ui-select-spin 2s infinite linear;
}

.ui-select-refreshing.ng-animate {
  -webkit-animation: none 0s;
}

.ngdialog.ngdialog-theme-default .ngdialog-content {
  width: 65%;
}

.field-required:after {
  color:red;
  content:" *";
}

.ui-select-match > .btn-default {
  color: #333;
  border-color: #eee;
}

.ui-select-match > .btn.disabled,
.ui-select-match > .btn[disabled] {
  background-color: #e5e5e5 !important;
  border: 1px solid #b0b0b0 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.175);
}

.field-required-inline {
  color:red;
  z-index: 5;
}

.form-field-type-hidden {
  margin: 0;
  padding: 0;
}

.form-field-type-signature img {
  width: 100%;
}

.datetime-picker-dropdown div > table .btn-default {
  border: 0;
  background-color: #fff;
}

.datetime-picker-dropdown div > table .btn-default:hover {
  background-color: #ccc;
}

.datetime-picker-dropdown div > table .btn-default.active {
  background-color: #ccc;
}

.has-feedback .datetime-picker-dropdown .form-control {
  padding: inherit;
}

.has-error span.ui-select-toggle {
  border: 1px solid red;
}

.form-control.btn-default {
  background-color: #fff;
}

.glyphicon.formio-hidden {
  display: none;
}

/* Handle overflow of long matched placeholder/text without covering caret */
.has-feedback .form-control.ui-select-toggle {
  padding-right: 20px;
}
.ui-select-placeholder, .ui-select-match-text {
  width: 100%;
  margin-right: -15px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  display: block;
}

.ui-select-container {
  min-width: 200px;
}

/* FOR-873 */
.btn-disable{
  outline: none !important;
  cursor: not-allowed !important;
  background-color: #7DC4EE !important;
  border: #7DC4EE !important;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* No */
}

.btn-disable:hover{
  outline: none !important;
  background-color: #7DC4EE !important;
  border: #7DC4EE !important;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* No */
}

.btn-disable:active{
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* FOR-109 */
.input-group .form-control {
  z-index: inherit;
}
.input-group .form-control.ui-select-search {
  float: none;
}
.form-group .form-field-type-select {
  display: inline-block;
  width: 100%;
}

/* Fix Safari bug that prevents you from typing in draggable password fields */
input[type="password"][draggable="true"] {
  -webkit-user-select:text !important;
}

.glyphicon-spin {
  -webkit-animation: spin-anim 1s infinite;
  animation: spin-anim 1s infinite;
}
@-webkit-keyframes spin-anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin-anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.formio-submission:hover {
  background-color: rgba(0, 0, 0, .025);
}

.formio-submission:active {
  background-color: rgba(0, 0, 0, .05);
}

.form-field-type-file .fileSelector,
.component-type-file .fileSelector {
  padding: 15px;
  border: 2px dashed #ddd;
  text-align: center;
}

.form-field-type-file .fileSelector.fileDragOver,
.component-type-file .fileSelector.fileDragOver {
  border-color: #127abe;
}

.form-field-type-file .fileSelector .glyphicon,
.component-type-file .fileSelector .glyphicon {
  font-size: 20px;
  margin-right: 5px;
}

.component-type-selectboxes .checkbox-inline input[type="checkbox"],
.form-field-type-selectboxes .checkbox-inline input[type="checkbox"],
.form-field-type-radio .radio-inline input[type="radio"]
.component-type-radio .radio-inline input[type="radio"] {
  margin-top: 4px;
}

.form-field-type-table .form-group {
  margin-bottom: 0px;
}

/* FA-877 - Fix component widths in the data grid with prefix/sufix. */
.input-group {
  width: 100%;
}

.form-field-type-datagrid .form-group {
  margin-bottom: 0;
}

.form-field-type-datagrid .datagrid-table {
  margin-bottom: 0px;
}

.form-field-type-datagrid .datagrid-add {
  margin-bottom: 20px;
}

.form-field-type-datetime .input-group,
.form-field-type-datetime .input-group-btn {
  width: 100%;
}
.form-field-type-datetime .input-group-btn {
  width: auto;
}

.center-loader {
  font-size: 2em;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
}

.formio-iframe {
  border: none;
  width: 100%;
  height: 1000px;
}

.inline-form-button {
  margin-right: 10px;
}

.tooltip-inner {
  white-space: pre-wrap;
}

.control-label--bottom {
  margin-bottom: 0;
  margin-top: 5px;
}

/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;line-height: 1em;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum-wrapper {position:absolute;width:100%}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 12px; line-height:15px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; top: 25px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%; cursor:pointer;z-index:10;}
.bs-wizard.hasTitles > .bs-wizard-step > .bs-wizard-dot {top: 45px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot > .bs-wizard-dot-inner {width: 14px; height: 14px; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 10px; box-shadow: none; margin: 20px 0;border: none;padding: 0;}
.bs-wizard.hasTitles > .bs-wizard-step > .progress {margin-top: 40px;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;border-radius:0;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot > .bs-wizard-dot-inner {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/

@media (max-width: 767px) {
  .col-sm-1.bs-wizard-step,
  .col-sm-2.bs-wizard-step,
  .col-sm-3.bs-wizard-step,
  .col-sm-4.bs-wizard-step,
  .col-sm-5.bs-wizard-step,
  .col-sm-6.bs-wizard-step,
  .col-sm-7.bs-wizard-step,
  .col-sm-8.bs-wizard-step,
  .col-sm-9.bs-wizard-step,
  .col-sm-10.bs-wizard-step,
  .col-sm-11.bs-wizard-step,
  .col-sm-12.bs-wizard-step {
    float: left !important;
  }

  .col-sm-2.bs-wizard-step {
    width: 16.66667%;
  }

  .col-sm-1.bs-wizard-step {
    width: 8.33333%;
  }

  /*.bs-wizard > .bs-wizard-step:first-child {*/
  /*margin-left: 24.999999995%; */
  /*}*/
}

.ngdialog-close {
  -webkit-appearance: none;
  background: none;
  border: none;
  width: 40px;
  height: 30px;
  z-index: 200;
}

.form-builder-premium {
  display: none;
}

.component-form-group {
  position: relative;
}

.component-btn-group {
  position: absolute;
  right: 0;
  z-index: 1000;
}

.component-form-group.component-type-hidden.form-builder-component,
.component-form-group.component-type-form.form-builder-component {
  height: 3em;
  border: 2px dashed #ddd;
}

.component-form-group.component-type-hidden.form-builder-component .form-group,
.component-form-group.component-type-form.form-builder-component .form-group {
  text-align: center;
  color: #aaa;
  padding-top: 0.5em;
}

.component-btn-group .component-settings-button {
  float: right;
  z-index: 1001;
  margin: 4px 4px 0 0;
}

.component-form-group.col-xs-6 {
  clear: right;
}

li .component-btn-group .component-settings-button {
  z-index: 1001;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(48,113,169,0.6);
  -moz-box-shadow: 0px 0px 10px 1px rgba(48,113,169,0.6);
  box-shadow: 0px 0px 10px 1px rgba(48,113,169,0.6);
}

li:not(:hover) .component-btn-group .component-settings-button {
  display: none;
}

.formbuilder .nav-tabs {
  margin-bottom: 0;
}

.form-builder-panel .panel-body {
  padding: 5px;
}

.form-component-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-component-list li {
  margin-bottom: 10px;
}

.btn-xxs, .btn-group-xxs > .btn, .component-btn-group .component-settings-button {
  padding: 2px 2px;
  font-size: 10px;
  line-height: 1.2em;
  border-radius: 0;
  width: 18px;
  height: 18px;
}

.ngdialog.ngdialog-theme-default.component-settings .ngdialog-content {
  width: 65%;
}

#component-settings .tab-pane {
  padding: 10px;
}

#component-settings .nav-tabs {
  font-size: 12px;
}

.component-settings-key {
  margin: -1em 1em 1em 1em;
}

/***************************** Required styles *****************************/

/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
ul[dnd-list],
ul[dnd-list] > li {
  position: relative;
}

tr[dnd-list],
tr[dnd-list] > th {
  position: relative;
}

/***************************** Dropzone Styling *****************************/

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
ul.component-list {
  min-height: 42px;
  margin: 0px;
  padding-left: 0px;
}

/**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
ul.component-list li {
  display: block;
  padding: 0px;
}

.dropzone {
  min-height: 150px;
  min-width: 150px;
}

/**
 * Reduce opacity of elements during the drag operation. This allows the user
 * to see where he is dropping his element, even if the element is huge. The
 * .dndDragging class is automatically set during the drag operation.
 */
.dropzone .dndDragging {
  opacity: 0.7;
}

/**
 * The dndDraggingSource class will be applied to the source element of a drag
 * operation. It makes sense to hide it to give the user the feeling that he's
 * actually moving it. Note that the source element has also .dndDragging class.
 */
.dropzone .dndDraggingSource {
  display: none;
}

/**
 * An element with .dndPlaceholder class will be added as child of the dnd-list
 * while the user is dragging over it.
 */
.dropzone .dndPlaceholder {
  background-color: #ddd;
  min-height: 50px;
  min-width: 50px;
  position: relative;
}

/**
 * An overlay that is shown while dragging. This way, elements like iframes in
 * a content component do not interfere with dragging.
 */
.dropzone .dndOverlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  opacity: 0;
}

/***************************** Element Selection *****************************/

.dropzone .selected .item {
  color: #3c763d;
  background-color: #dff0d8;
}

.dropzone .selected .box {
  border-color: #d6e9c6;
}

.dropzone .selected .box > h3 {
  color: #3c763d;
  background-color: #dff0d8;
  background-image: linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);
  border-color: #d6e9c6;
}

/***************************** Element type specific styles *****************************/

.dropzone .item {
  padding: 20px;
}

.dropzone .container-element {
  margin: 10px;
}

.dropzone .container-element .column {
  float: left;
  width: 50%;
}

.dropzone .component-list {
  padding-bottom: 5px;
}

/***************************** Toolbox *****************************/

.toolbox ul {
  list-style: none;
  padding-left: 0px;
  cursor: move;
}

.toolbox button {
  margin: 5px;
  width: 123px;
  opacity: 1.0;
}

.toolbox .dndDragging {
  opacity: 0.5;
}

.toolbox .dndDraggingSource {
  opacity: 1.0;
}

/***************************** Trashcan *****************************/

.trashcan ul {
  list-style: none;
  padding-left: 0px;
}

.trashcan img {
  width: 100%;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
}

.trashcan .dndDragover img {
  width: 100%;
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
}

.trashcan .dndPlaceholder {
  display: none;
}

.ui-select-toggle.btn {
  text-align: left;
}

/***************************** Layout Styling *****************************/

.form-builder-component .form-field-type-fieldset fieldset,
.form-builder-component .form-field-type-editgrid fieldset,
.form-builder-component .form-field-type-container fieldset {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  border: dotted 2px #e8e8e8;
}

.form-builder-component .form-field-type-columns .formio-column {
  padding: 10px;
  border: dotted 2px #e8e8e8;
}

/****************************** Data Grid Styling *************************/

.datagrid-dnd {
  padding: 5px;
  border: dotted 2px #e8e8e8;
  min-height: inherit;
}

/***************************** Form Component Buttons *********************/

.formcomponents {
  overflow: auto;
  min-height: 200px;
}

.formcomponents .formcomponentcontainer {
  margin: 0 2px 2px 0;
}

.formcomponents .formcomponent {
  text-align: left;
  padding-left: 15px;
}

/********* Multi-mask component styles for default value ******************/

.form-control.formio-multiple-mask-select {
    width: 70px;
    z-index: 4;
}

.form-control.formio-multiple-mask-input {
    width: 100%;
    margin-left: -70px;
    padding-left: 80px;
}

.input-group.formio-multiple-mask-container {
    width: 100%;
}

.formio-drop-zone {
  display: none;
  position: absolute;
  z-index:10;
  background-color: #0d87e9;
  opacity: 0.1;
}

.formio-drop-zone.enabled {
  display: inherit;
}