@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@font-face {
  font-family: "Soehne";
  src: url("/Content/fonts/soehne-web-buch.eot");
  src: url("/Content/fonts/soehne-web-buch.woff") format("woff"), url("/Content/fonts/soehne-web-buch.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Soehne";
  src: url("/Content/fonts/soehne-web-halbfett.eot");
  src: url("/Content/fonts/soehne-web-halbfett.woff") format("woff"), url("/Content/fonts/soehne-web-halbfett.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
/** ****************************************
 * Typography - font selection
 **************************************** */

body {
  font-family: Soehne, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
.text-xl,
.text-lg {
  font-family: Soehne, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 600;
}
/** ****************************************
 * Typography - font sizes/line-height 
 **************************************** */

.text-xxs {
  font-size: 10px !important;
  line-height: 14px !important;
}
.text-xs {
  font-size: 12px !important;
  line-height: 16px !important;
}
.text-sm {
  font-size: 14px !important;
  line-height: 18px !important;
}
.lh-24 {
  line-height: 24px !important;
}
body {
  font-size: 16px;
  line-height: 24px;
}
.text {
  font-size: 16px;
  line-height: 24px;
}
.text-lg {
  font-size: 24px;
  line-height: 30px;
}
.text-xl {
  font-size: 48px;
  line-height: 110%;
}
.text-italic {
  font-style: italic;
}
.text-strong {
  font-weight: 600 !important;
}
.text-strong .pretty .state label {
  font-weight: 600 !important;
}
@media only screen and (min-width: 768px) {
  .sm-text-right {
    text-align: right;
  }
}
/** ****************************************
 * Global styles
 **************************************** */

*[ng-click] {
  cursor: pointer;
}
a {
  color: #00818c;
}
a:focus,
a:hover {
  color: #007580;
}
a.disabled {
  color: #a3aeb4 !important;
  cursor: not-allowed;
  pointer-events: none;
}
a svg {
  display: inline-block;
  vertical-align: text-top;
}
body {
  background: none;
  color: #121212;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #121212;
}
h1 {
  font-size: 32px;
  line-height: 38px;
  margin: 0;
}
h3 {
  font-size: 24px;
  line-height: 36px;
  margin: 0;
}
h4 {
  font-size: 20px;
  line-height: 30px;
  margin: 0;
}
h5 {
  font-size: 16px;
  line-height: 24px;
  margin: 0;
}
h6 {
  font-size: 14px;
  line-height: 21px;
  margin: 0;
}
.align-middle {
  vertical-align: middle !important;
}
.disabled {
  opacity: 0.7;
}
/** ****************************************
 * Alert styles
 **************************************** */

.alert {
  border: none;
  border-radius: 2px;
  font-size: 14px;
  text-align: center;
  z-index: 1001;
}
.error-list .alert.alert-danger {
  text-align: left;
}
.alert-info {
  color: #121212;
  background-color: #f2fafb;
  border-radius: 12px;
  border: solid 1px #66c1ca;
  padding: 16px;
  text-align: left;
}
.alert-success {
  background: rgba(39, 130, 130, 0.1);
  color: #00818c;
}
.alert-warning {
  background: rgba(255, 202, 40, 0.2);
  color: #121212;
}
.alert-danger {
  background: #f2dede;
  color: #ff333b;
}
/** ****************************************
 * Form styles
 **************************************** */

form {
  padding: 0;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
textarea[disabled] {
  opacity: 0.6 !important;
}
section.error-list {
  margin-bottom: 20px;
}
.form-group {
  margin-bottom: 20px;
}
.form-group:last-child {
  margin-bottom: 0 !important;
}
.form-group:before,
.form-group:after {
  display: table;
  content: " ";
}
.form-group:after {
  clear: both;
}
.form-group.required label.control-label:after,
.form-group .required label.control-label:after,
.form-group.required .has-float-label > label:after,
.form-group .required .has-float-label > label:after,
.form-group.required .has-float-label > span:after,
.form-group .required .has-float-label > span:after {
  content: "*";
  color: red;
  top: 0;
  right: -7px;
  left: auto;
}
.form-group label.required:after {
  content: "*";
  color: red;
  top: 0;
  right: -7px;
  left: auto;
}
.form-control {
  padding: 7px 13px;
  transition: none;
}
.form-control::-webkit-input-placeholder {
  font-style: normal;
  font-size: 16px;
}
.form-control,
.form-control:hover:not(:disabled),
.has-float-label .btn-group button {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: none;
  font-size: 16px;
  height: auto;
}
.form-control:focus,
.form-control:hover:not(:disabled):focus,
.has-float-label .btn-group button:focus {
  border: 1px solid #00818c;
  box-shadow: none;
}
.form-control.ng-dirty.ng-invalid,
.form-control:hover:not(:disabled).ng-dirty.ng-invalid,
.has-float-label .btn-group button.ng-dirty.ng-invalid {
  border-color: #a94442;
}
.stripe-control {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 20px;
}
.input-group .form-control,
.input-group .form-control:hover {
  height: 39px;
}
.input-group-addon {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.btn,
.btn-group > .btn {
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding: 8px 16px;
}
.btn:active,
.btn-group > .btn:active {
  box-shadow: none;
}
.btn:focus,
.btn-group > .btn:focus,
.btn:active:focus,
.btn-group > .btn:active:focus,
.btn.active:focus,
.btn-group > .btn.active:focus,
.btn.focus,
.btn-group > .btn.focus,
.btn:active.focus,
.btn-group > .btn:active.focus,
.btn.active.focus,
.btn-group > .btn.active.focus {
  outline-style: none;
}
.btn-sm {
  font-size: 13px;
  line-height: 14px;
  padding: 8px 16px;
}
.btn-xs {
  font-size: 13px;
  line-height: 14px;
  padding: 4px 8px;
}
.btn-icon {
  font-size: 13px;
  line-height: 14px;
  padding: 5px;
}
.btn-icon.disabled {
  color: white !important;
}
.btn-primary {
  background-color: #00818c;
  border-color: transparent;
}
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary[disabled]:hover {
  background-color: #007580;
  border-color: transparent;
}
.btn-link {
  background: none;
  color: #00818c;
  padding: 14px 10px;
}
.btn-link:active,
.btn-link:active:hover,
.btn-link:active:focus,
.btn-link:focus,
.btn-link:hover,
.btn-link[disabled]:hover {
  color: #007580;
}
.btn-cancel {
  background: rgba(0, 0, 0, 0.1);
  color: black;
}
.btn-cancel:active,
.btn-cancel:active:hover,
.btn-cancel:active:focus,
.btn-cancel:focus,
.btn-cancel:hover,
.btn-cancel[disabled]:hover {
  background: rbga(0, 0, 0, 0.2);
  color: black;
}
.btn-action,
.btn-add-remove {
  border: solid 1px #babdbd;
  color: black;
}
.btn.dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}
.o.btn-group .btn.btn-default.dropdown-toggle {
  background: white !important;
  border-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: none;
  color: #121212;
}
.o-badge {
  background-color: rgba(39, 130, 130, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  padding: 2px 10px;
}
.o-badge > div {
  flex-grow: 1;
}
.o-badge > div:last-child {
  flex-grow: 0;
  padding-left: 20px;
}
.o-badge-sm {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  line-height: 14px;
  padding: 2px 8px;
}
label {
  font-weight: 500;
}
.has-float-label {
  font-weight: normal;
  max-width: 100%;
  margin-bottom: 0;
}
.has-float-label input,
.has-float-label select,
.has-float-label .form-control:focus,
.has-float-label .ui-select-toggle,
.has-float-label/* For ui-select single select */ .ui-select-multiple.ui-select-bootstrap input.ui-select-search,
.has-float-label/* For ui-select multi select */ .btn-group button,
.has-float-label textarea {
  font-weight: normal;
  line-height: 24px;
  padding: 26px 16px 6px;
}
.has-float-label select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 100%;
  padding-right: 35px;
}
.has-float-label select.form-control:focus,
.has-float-label select.form-control:hover:not(:disabled),
.has-float-label select.form-control:hover:not(:disabled):focus {
  padding-right: 35px;
}
.has-float-label select.form-control::-ms-expand {
  display: none;
}
.has-float-label select.form-control + i {
  position: absolute;
  top: 36%;
  right: 10px;
}
.has-float-label input,
.has-float-label .ui-select-toggle,
.has-float-label/* For ui-select single select */ .ui-select-multiple.ui-select-bootstrap input.ui-select-search,
.has-float-label/* For ui-select multi select */ select {
  min-height: 56px;
}
.has-float-label .ui-select-multiple.ui-select-bootstrap input.ui-select-search {
  /* For ui-select multi select */
  width: 100% !important;
}
.has-float-label select,
.has-float-label .multiselect.dropdown-toggle {
  min-width: 200px;
  text-align: left;
  width: auto;
}
.has-float-label .ui-select-multiple .ui-select-match {
  position: relative;
  top: 27px;
  left: 12px;
}
.has-float-label > label,
.has-float-label > span {
  background: none;
  color: rgba(0, 33, 41, 0.7);
  font-size: 11px;
  font-weight: normal;
  line-height: 15px;
  top: 10px;
  left: 16px;
}
.has-float-label > label:after,
.has-float-label > span:after {
  background: none;
}
.has-float-label > span.multiselect-native-select {
  display: block;
  left: 0;
  position: relative;
  top: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
  font-size: 16px;
  line-height: 24px;
  top: 17px;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * .show-focus {
  display: none;
}
.has-float-label .form-control:placeholder-shown:focus + * .hide-focus {
  display: none;
}
.has-float-label .btn-group .btn {
  line-height: 24px;
}
.has-float-label .btn-group .btn.btn-default:hover {
  background: white;
}
.has-float-label .btn-group .btn .caret {
  position: absolute;
  right: 5px;
}
.has-float-label .btn-group.open > .dropdown-toggle.btn-default {
  background: white;
  border-color: #00818c;
  box-shadow: none;
  color: unset;
}
.has-float-label .btn-group .multiselect-container > li > a > label {
  position: static;
  font-size: 100%;
  line-height: 1.4em;
}
.has-float-label .btn-group .multiselect-container > li > a > label > input {
  min-height: auto;
}
.help-block {
  color: #666666;
  font-size: 14px;
  line-height: 1.4em;
}
.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-block;
  margin-right: 1px;
}
.color-swatch:hover {
  box-shadow: 0 0 0 2px #121212;
}
.color-swatch-selected {
  box-shadow: 0 0 0 2px #121212;
}
.color-picker {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 0 0 1px #babdbd;
}
.color-picker:hover {
  box-shadow: 0 0 0 2px #121212;
}
.color-picker-selected {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 0 0 2px #121212;
}
fieldset {
  margin-top: 30px;
}
fieldset legend {
  border-bottom: 0;
  color: black;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 15px;
}
.dropdown-menu {
  -webkit-box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.03), 0px 16px 32px rgba(0, 0, 0, 0.03), 0px 8px 16px rgba(0, 0, 0, 0.03), 0px 4px 8px rgba(0, 0, 0, 0.03), 0px 2px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.03), 0px 0px 0px 1px rgba(0, 0, 0, 0.03);
  box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.03), 0px 16px 32px rgba(0, 0, 0, 0.03), 0px 8px 16px rgba(0, 0, 0, 0.03), 0px 4px 8px rgba(0, 0, 0, 0.03), 0px 2px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.03), 0px 0px 0px 1px rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  border: none;
  padding: 8px 0;
}
.dropdown-menu > li > a {
  padding: 12px 16px;
  margin: 0 8px;
  border-radius: 4px;
}
.dropdown-menu > .active > a {
  background-color: #00818c;
}
.dropdown-menu > .active > a:hover {
  background-color: #007580;
}
.o-activity .dropdown-menu > li > a {
  padding: 8px 16px;
}
.o-activity .dropdown-menu > .active > a {
  background-color: white;
  color: #121212;
  font-weight: 500;
}
.o-activity .dropdown-menu > .active > a > label > input[type='checkbox'] {
  accent-color: #00818c;
}
/* Pretty checkboxes */

.pretty input:checked ~ .state.p-primary-o label:before,
.pretty.p-switch.p-fill input:checked ~ .state.p-success:before,
.pretty.p-toggle .state.p-primary-o label:before {
  border-color: #00818c;
}
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after,
.pretty input:checked ~ .state.p-primary label:after,
.pretty.p-switch.p-fill input:checked ~ .state.p-success:before,
.pretty.p-toggle .state.p-primary label:after {
  background-color: #00818c !important;
  /* Must be important because pretty.css defines it as such */

}
/* Pretty toggle switch disabled state */

.pretty.p-switch .state:before {
  background: #bdc3c7;
}
.pretty.p-switch .state label:after {
  background: white !important;
}
/* Pretty checkbox/radio adjustments to wrap labels */

.pretty {
  width: 100%;
}
.pretty input[type="checkbox"] {
  height: 25px;
  width: 45px;
  top: -4px;
}
.pretty.p-switch {
  width: auto;
}
.pretty .state label {
  line-height: 1.4em;
  padding-left: 1.8em;
  text-indent: 0;
  white-space: normal;
}
.pretty.p-svg .state .svg,
.pretty .state label:after,
.pretty .state label:before {
  position: absolute;
  top: 3px;
}
.pretty.p-switch .state label:after,
.pretty.p-switch .state label:before {
  top: -2px;
}
.ui-select-container .ui-select-match .btn.btn-default:hover {
  background-color: white;
}
.file-upload-overlay {
  background: #fafafa;
  border: 3px dashed;
  border-color: rgba(0, 0, 0, 0.1);
  display: none;
  padding: 5% 20px;
  /* Vertically center */
  text-align: center;
}
.dragover {
  position: relative;
}
.dragover * {
  pointer-events: none;
}
.dragover .file-upload-overlay {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
}
/** ****************************************
 * Color styles
 **************************************** */

.bgcolor-black-5,
.bg-color-black-5-hover:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.bgcolor-dust {
  background-color: #fafafa;
}
.bgcolor-granite {
  background-color: rgba(0, 0, 0, 0.1);
}
.bgcolor-granite-light {
  background-color: rgba(0, 0, 0, 0.05);
}
.bgcolor-gray-50-hover:hover {
  background-color: #f9fafb;
}
.bgcolor-gray-100 {
  background-color: #f3f3f3;
}
.bgcolor-gray-900 {
  background-color: #121212;
}
.bgcolor-fir {
  background-color: #00818c;
}
.bgcolor-fir-hover:hover {
  background-color: #00818c;
}
.bgcolor-fir-light-2 {
  background-color: rgba(39, 130, 130, 0.1);
}
.bgcolor-negative-light {
  background-color: #f6e6b8;
}
.bgcolor-positive-light {
  background-color: #caf4c9;
}
.bgcolor-red {
  background-color: #ff333b;
}
.bgcolor-red-light {
  background-color: rgba(255, 51, 59, 0.1);
}
.bgcolor-success-50 {
  background-color: #ecfdf3;
}
.bgcolor-yellow {
  background-color: #ffd970;
}
.bgcolor-yellow-light {
  background-color: rgba(255, 202, 40, 0.2);
}
.bggradient-blue {
  background: linear-gradient(107.56deg, #60efff 0%, #0061ff 100%);
}
.bggradient-orange {
  background: linear-gradient(107.56deg, #fff29e 0%, #ff930f 50.52%, #ff5f14 100%);
}
.bggradient-pale-purple-green {
  background: linear-gradient(107.56deg, #d1ffeb 0%, #aab2ff 49.48%, #eca0ff 100%);
}
.bggradient-pink {
  background: linear-gradient(107.56deg, #ffcccc 0%, #ff7be0 52.08%, #c626ff 100%);
}
.bggradient-green {
  background: linear-gradient(107.56deg, #f3f98a 0%, #a1ffbe 50%, #2ee6a5 100%);
}
.border-color-white {
  border-color: white !important;
}
.border-color-granite {
  border-color: rgba(0, 0, 0, 0.1) !important;
}
.border-color-gray-200 {
  border-color: #d7d8d8 !important;
}
.color-black-hover:hover {
  color: black;
}
.color-black-30 {
  color: rgba(0, 0, 0, 0.3);
}
.color-black-55 {
  color: rgba(0, 0, 0, 0.55);
}
.color-fir {
  color: #00818c !important;
}
.color-fir-hover:hover {
  color: #007580;
}
.color-fir-hover:hover svg g,
.color-fir-hover:hover svg path {
  fill: #007580;
}
.color-fir-light-1 {
  color: rgba(39, 130, 130, 0.3);
}
.color-granite {
  color: rgba(0, 0, 0, 0.1);
}
.color-granite-light {
  color: rgba(0, 0, 0, 0.05);
}
.color-gray-400 {
  color: #9da2a3;
}
.color-gray-600 {
  color: #606d70;
}
.color-gray-700 {
  color: #414141;
}
.color-gray-900,
.color-gray-900-hover:hover {
  color: #121212;
}
.color-grey {
  color: #cccccc;
}
.color-negative-dark {
  color: #912c00;
}
.color-nightfall {
  color: #002129;
}
.color-nightfall-hover:hover {
  color: #002129 !important;
}
.color-nightfall-light-1 {
  color: rgba(0, 33, 41, 0.7);
}
.color-nightfall-light-2 {
  color: rgba(0, 33, 41, 0.3);
}
.color-positive-dark {
  color: #0b6042;
}
.color-red {
  color: #ff333b;
}
.color-red-hover:hover {
  color: #ff333b;
}
.color-success-700 {
  color: #027a48;
}
.color-warning-600 {
  color: #dc6803;
}
.color-white {
  color: white;
}
/** ****************************************
 * Helper styles
 **************************************** */

.bb-1 {
  border-bottom: 1px solid;
}
.br-8 {
  border-radius: 8px !important;
}
.display-flex-row {
  display: flex;
  flex-direction: row;
}
.display-flex-column {
  display: flex;
  flex-direction: column;
}
.flex-grow {
  flex-grow: 1;
}
.hr-label {
  border: 0;
  color: black;
  height: 1.5em;
  line-height: 1em;
  outline: 0;
  position: relative;
  text-align: center;
}
.hr-label:before {
  background: rgba(0, 0, 0, 0.1);
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}
.hr-label:after {
  background-color: white;
  color: black;
  content: attr(data-label);
  display: inline-block;
  line-height: 1.5em;
  padding: 0 24px;
  position: relative;
}
.show-on-hover {
  visibility: hidden !important;
}
.show-on-hover-parent:hover .show-on-hover {
  visibility: visible !important;
}
/** ****************************************
 * Responsive styles
 **************************************** */

@media only screen and (max-width: 768px) {
  .xs-mt-20 {
    margin-top: 20px;
  }
}
/** ****************************************
 * Text handling styles
 **************************************** */

.text-overflow-ellipsis {
  height: 1.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.text-overflow-ellipsis * {
  height: 1.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
/** ****************************************
 * Material Design icon styles 
 **************************************** */

#gapi-wrapper .btn-google-signin {
  background: white url(/Content/img/logo_google.png) 12px 12px / 24px 24px no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  color: black;
  font-family: 'Roboto', sans-serif;
  height: 50px;
  line-height: 24px;
  padding: 12px 12px 12px 54px;
}
#gapi-wrapper .btn-google-signin:focus {
  outline: none;
}
.mdi-xs {
  font-size: 11px !important;
}
.mdi-sm {
  font-size: 16px !important;
}
.mdi-lg {
  font-size: 30px !important;
}
.mdi-xl {
  font-size: 48px !important;
}
.va-top {
  vertical-align: top;
}
.va-text-top {
  vertical-align: text-top;
}
.va-middle {
  vertical-align: middle;
}
.va-text-bottom {
  vertical-align: text-bottom;
}
.va-sub {
  vertical-align: sub;
}
.va-bottom {
  vertical-align: bottom;
}
.mdi-spin {
  -webkit-animation: mdi-spin 2s infinite linear;
  animation: mdi-spin 2s infinite linear;
}
@-webkit-keyframes mdi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes mdi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
/** ****************************************
 * Winding styles
 **************************************** */

.x {
  background: none;
  display: block;
  height: 20px;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 20px;
  z-index: 1000;
}
@media only screen and (min-width: 767px) {
  .x {
    right: 30px;
    top: 30px;
  }
}
.x:before,
.x:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0;
  top: 9px;
}
.x:hover:before,
.x:hover:after {
  background-color: #007580;
}
.x:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 2px;
}
.x:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 2px;
}
.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}
@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
/** ****************************************
 * Bootstrap overrides 
 **************************************** */

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: black;
}
.alert {
  border: none;
  border-radius: 4px;
  font-size: 14px;
  margin: 0;
  padding: 5px 15px;
}
.alert.warning {
  color: black;
}
.alert-dismissible .close {
  right: -5px;
  top: 0;
}
.badge {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  color: black;
  font-weight: normal;
}
.badge a {
  color: black;
}
.btn-cancel {
  color: rgba(0, 0, 0, 0.7);
}
.btn-cancel:active,
.btn-cancel:focus,
.btn-cancel:hover {
  color: black;
}
.color-nightfall-light-1 {
  color: rgba(0, 0, 0, 0.7);
}
.panel {
  box-shadow: none;
}
/** ****************************************
 * Mobile styles
 **************************************** */

body.popup {
  margin-top: 8px;
}
body,
input,
.btn,
.form-control,
.form-control:focus,
.form-control:hover:not(:disabled),
.has-float-label input,
.has-float-label .form-control:focus,
.has-float-label .btn-group button {
  font-size: 14px;
  line-height: 21px;
}
h1 {
  font-size: 28px;
  line-height: 33px;
}
h4 {
  font-size: 17px;
  line-height: 26px;
}
.btn {
  padding: 6px 12px;
}
/** ****************************************
 * Desktop resets 
 **************************************** */

@media only screen and (min-width: 768px) {
  body.popup {
    margin-top: 75px;
  }
  body,
  input,
  .btn,
  .form-control,
  .form-control:focus,
  .form-control:hover:not(:disabled),
  .has-float-label input,
  .has-float-label .form-control:focus,
  .has-float-label .btn-group button {
    font-size: 16px;
    line-height: 24px;
  }
  h1 {
    font-size: 32px;
    line-height: 38px;
  }
  .btn {
    padding: 12px 24px;
  }
}
/** ****************************************
 * Widget styles
 **************************************** */

div#widget-background {
  background: rgba(0, 0, 0, 0.6);
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 900;
}
body.popup div#widget-background {
  display: block;
}
div#widget-container {
  border-radius: 4px;
  margin: 0 auto;
  max-width: 95vw;
  overflow: hidden;
  position: relative;
  transition: height 0.4s, width 0.4s;
}
div#widget-container div.widget {
  transition: all 0.4s;
}
div#widget-container div.widget header {
  padding: 50px 50px 20px;
  position: relative;
}
div#widget-container div.widget header .action-row a {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  padding-right: 10px;
}
div#widget-container div.widget header .action-row a:last-child {
  border: none;
  padding-right: 0;
  margin-right: 0;
}
div#widget-container div.widget .body {
  overflow: hidden;
  padding: 10px 50px 50px;
  position: relative;
}
div#widget-container div.widget .body .confirmation {
  bottom: 0;
  left: 0;
  padding-top: 50px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: bottom linear 0.25s;
  -moz-transition: bottom linear 0.25s;
  -o-transition: bottom linear 0.25s;
  transition: bottom linear 0.25s;
  z-index: 100;
}
div#widget-container div.widget .body .confirmation.ng-hide {
  bottom: -100%;
}
div#widget-container div.widget .body .confirmation p {
  padding-bottom: 50px;
}
div#widget-container div.widget footer {
  background: #333333;
  color: white;
}
div#widget-container div.widget footer a {
  color: white;
}
@media only screen and (max-width: 480px) {
  div#widget-container div.widget header {
    padding-left: 10px;
    padding-right: 10px;
  }
  div#widget-container div.widget .body {
    padding: 0 10px 30px;
  }
}
/** ****************************************
 * State transition styles
 **************************************** */

.widget > .state,
.widget > .col-layout > .col-body > div > .state {
  position: absolute;
  top: 0;
  transition: all 0.4s;
  width: 100%;
}
.widget > .state.ng-enter,
.widget > .col-layout > .col-body > div > .state.ng-enter {
  opacity: 0;
}
.widget > .state.prev,
.widget > .col-layout > .col-body > div > .state.prev {
  opacity: 0;
}
/** ****************************************
 * Winding styles
 **************************************** */

.chevron::before {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: '';
  display: inline-block;
  height: 9px;
  position: relative;
  top: 7px;
  transform: rotate(-45deg);
  vertical-align: top;
  width: 9px;
}
.chevron.left:before {
  left: 2px;
  transform: rotate(-135deg);
}
.chevron.right:before {
  left: 0;
  transform: rotate(45deg);
}
/** ****************************************
 * Control styles
 **************************************** */

o-plan-summary-header .row {
  margin: 6px 0;
}
o-plan-summary-header .row:first-child {
  margin-top: 0;
}
o-plan-summary-header .row:last-child {
  margin-bottom: 0;
}
o-plan-summary-header .total-summary-info {
  position: relative;
}
o-plan-summary-header .total-summary-info #renewal-total-summary,
o-plan-summary-header .total-summary-info #now-total-summary {
  background: white;
  border: 1px solid rgba(0, 30, 255, 0.1);
  border-radius: 4px;
  box-shadow: 0px 2px 16px rgba(33, 43, 54, 0.1);
  color: #002129;
  padding: 16px;
  position: absolute;
  z-index: 1000;
}
o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row,
o-plan-summary-header .total-summary-info #now-total-summary .summary-row {
  margin: 6px 0;
}
o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row .left,
o-plan-summary-header .total-summary-info #now-total-summary .summary-row .left {
  white-space: nowrap;
}
o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row.separator,
o-plan-summary-header .total-summary-info #now-total-summary .summary-row.separator {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row.separator *,
o-plan-summary-header .total-summary-info #now-total-summary .summary-row.separator * {
  display: none;
}
o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row:first-child,
o-plan-summary-header .total-summary-info #now-total-summary .summary-row:first-child {
  margin-top: 0;
}
o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row:first-child .left,
o-plan-summary-header .total-summary-info #now-total-summary .summary-row:first-child .left {
  font-weight: bold;
}
o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row:first-child .left .badge,
o-plan-summary-header .total-summary-info #now-total-summary .summary-row:first-child .left .badge {
  font-weight: normal;
}
o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row:last-child,
o-plan-summary-header .total-summary-info #now-total-summary .summary-row:last-child {
  margin-bottom: 0;
}
o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row:last-child .right,
o-plan-summary-header .total-summary-info #now-total-summary .summary-row:last-child .right {
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  o-plan-summary-header .total-summary-info #renewal-total-summary,
  o-plan-summary-header .total-summary-info #now-total-summary {
    min-width: 400px;
  }
  o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row,
  o-plan-summary-header .total-summary-info #now-total-summary .summary-row {
    display: flex;
    flex-direction: row;
  }
  o-plan-summary-header .total-summary-info #renewal-total-summary .summary-row .right,
  o-plan-summary-header .total-summary-info #now-total-summary .summary-row .right {
    flex-grow: 1;
    padding-left: 60px;
    text-align: right;
  }
}
o-plan-summary-header .action-row {
  margin-top: 16px;
}
.o-select-plan-options .add-on-details {
  margin: 10px 0 20px;
}
o-integer-input {
  display: inline-block;
}
o-integer-input .o-integer-input {
  display: flex;
  flex-direction: row;
}
o-integer-input .o-integer-input .input-group-addon {
  background: none;
  padding: 6px;
  width: auto;
}
o-integer-input .o-integer-input .input-group-addon a {
  user-select: none;
}
o-integer-input .o-integer-input input::-webkit-outer-spin-button,
o-integer-input .o-integer-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
o-integer-input .o-integer-input input[type=number] {
  -moz-appearance: textfield;
}
o-integer-input .o-integer-input input.form-control,
o-integer-input .o-integer-input input.form-control:hover,
o-integer-input .o-integer-input input.form-control:focus,
o-integer-input .o-integer-input input.form-control:hover:not(:disabled):focus {
  border-left: none;
  border-right: none;
  border-width: 1px;
  height: auto;
  padding: 7px;
  width: auto;
}
.input-group.disabled .input-group-addon {
  background: #eeeeee;
}
/** ****************************************
 * Widget styles
 **************************************** */

div#widget-container {
  width: 450px;
}
div#widget-container .widget .x-container {
  display: none;
}
div#widget-container .widget.popup .x-container {
  display: block;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  z-index: 1000;
}
@media only screen and (max-width: 480px) {
  div#widget-container .widget.popup .x-container .x {
    top: 20px;
    right: 10px;
  }
}
div#widget-container.state-RegisterSelectPlan,
div#widget-container.state-RegisterSelectPlanOptions,
div#widget-container.state-RegisterEnterAccountInformation,
div#widget-container.state-RegisterEnterPayment,
div#widget-container.state-RegisterConfirmation,
div#widget-container.state-UpgradeSelectPlan,
div#widget-container.state-UpgradeSelectPlanOptions,
div#widget-container.state-UpgradeEnterPaymentInformation {
  width: 950px;
}
div#widget-container.state-RegisterSelectPlan .widget nav,
div#widget-container.state-RegisterSelectPlanOptions .widget nav,
div#widget-container.state-RegisterEnterAccountInformation .widget nav,
div#widget-container.state-RegisterEnterPayment .widget nav,
div#widget-container.state-RegisterConfirmation .widget nav,
div#widget-container.state-UpgradeSelectPlan .widget nav,
div#widget-container.state-UpgradeSelectPlanOptions .widget nav,
div#widget-container.state-UpgradeEnterPaymentInformation .widget nav {
  min-height: 50px;
  padding: 0;
  text-align: left;
}
div#widget-container.state-RegisterSelectPlan .widget nav ul,
div#widget-container.state-RegisterSelectPlanOptions .widget nav ul,
div#widget-container.state-RegisterEnterAccountInformation .widget nav ul,
div#widget-container.state-RegisterEnterPayment .widget nav ul,
div#widget-container.state-RegisterConfirmation .widget nav ul,
div#widget-container.state-UpgradeSelectPlan .widget nav ul,
div#widget-container.state-UpgradeSelectPlanOptions .widget nav ul,
div#widget-container.state-UpgradeEnterPaymentInformation .widget nav ul {
  border-bottom: 1px solid;
  margin: 0;
  padding-left: 50px;
  width: 100%;
}
div#widget-container.state-RegisterSelectPlan .widget nav ul li,
div#widget-container.state-RegisterSelectPlanOptions .widget nav ul li,
div#widget-container.state-RegisterEnterAccountInformation .widget nav ul li,
div#widget-container.state-RegisterEnterPayment .widget nav ul li,
div#widget-container.state-RegisterConfirmation .widget nav ul li,
div#widget-container.state-UpgradeSelectPlan .widget nav ul li,
div#widget-container.state-UpgradeSelectPlanOptions .widget nav ul li,
div#widget-container.state-UpgradeEnterPaymentInformation .widget nav ul li {
  height: 72px;
  line-height: 72px;
  padding-left: 20px;
  padding-right: 20px;
}
div#widget-container.state-RegisterSelectPlan .widget nav ul li.selected,
div#widget-container.state-RegisterSelectPlanOptions .widget nav ul li.selected,
div#widget-container.state-RegisterEnterAccountInformation .widget nav ul li.selected,
div#widget-container.state-RegisterEnterPayment .widget nav ul li.selected,
div#widget-container.state-RegisterConfirmation .widget nav ul li.selected,
div#widget-container.state-UpgradeSelectPlan .widget nav ul li.selected,
div#widget-container.state-UpgradeSelectPlanOptions .widget nav ul li.selected,
div#widget-container.state-UpgradeEnterPaymentInformation .widget nav ul li.selected {
  border-bottom: 2px solid #00818c;
}
div#widget-container.state-RegisterSelectPlan .widget nav ul li.selected a,
div#widget-container.state-RegisterSelectPlanOptions .widget nav ul li.selected a,
div#widget-container.state-RegisterEnterAccountInformation .widget nav ul li.selected a,
div#widget-container.state-RegisterEnterPayment .widget nav ul li.selected a,
div#widget-container.state-RegisterConfirmation .widget nav ul li.selected a,
div#widget-container.state-UpgradeSelectPlan .widget nav ul li.selected a,
div#widget-container.state-UpgradeSelectPlanOptions .widget nav ul li.selected a,
div#widget-container.state-UpgradeEnterPaymentInformation .widget nav ul li.selected a {
  color: #00818c;
}
div#widget-container.state-RegisterSelectPlan .widget header,
div#widget-container.state-RegisterSelectPlanOptions .widget header,
div#widget-container.state-RegisterEnterAccountInformation .widget header,
div#widget-container.state-RegisterEnterPayment .widget header,
div#widget-container.state-RegisterConfirmation .widget header,
div#widget-container.state-UpgradeSelectPlan .widget header,
div#widget-container.state-UpgradeSelectPlanOptions .widget header,
div#widget-container.state-UpgradeEnterPaymentInformation .widget header {
  padding-top: 20px;
}
div#widget-container.state-RegisterSelectPlan .widget header .plan-info,
div#widget-container.state-RegisterSelectPlanOptions .widget header .plan-info,
div#widget-container.state-RegisterEnterAccountInformation .widget header .plan-info,
div#widget-container.state-RegisterEnterPayment .widget header .plan-info,
div#widget-container.state-RegisterConfirmation .widget header .plan-info,
div#widget-container.state-UpgradeSelectPlan .widget header .plan-info,
div#widget-container.state-UpgradeSelectPlanOptions .widget header .plan-info,
div#widget-container.state-UpgradeEnterPaymentInformation .widget header .plan-info {
  margin-bottom: 20px;
  padding: 16px 0;
}
div#widget-container.state-RegisterSelectPlan .widget header .plan-info .divider,
div#widget-container.state-RegisterSelectPlanOptions .widget header .plan-info .divider,
div#widget-container.state-RegisterEnterAccountInformation .widget header .plan-info .divider,
div#widget-container.state-RegisterEnterPayment .widget header .plan-info .divider,
div#widget-container.state-RegisterConfirmation .widget header .plan-info .divider,
div#widget-container.state-UpgradeSelectPlan .widget header .plan-info .divider,
div#widget-container.state-UpgradeSelectPlanOptions .widget header .plan-info .divider,
div#widget-container.state-UpgradeEnterPaymentInformation .widget header .plan-info .divider {
  border-color: rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 480px) {
  div#widget-container.state-RegisterSelectPlan .widget.popup header,
  div#widget-container.state-RegisterSelectPlanOptions .widget.popup header,
  div#widget-container.state-RegisterEnterAccountInformation .widget.popup header,
  div#widget-container.state-RegisterEnterPayment .widget.popup header,
  div#widget-container.state-RegisterConfirmation .widget.popup header,
  div#widget-container.state-UpgradeSelectPlan .widget.popup header,
  div#widget-container.state-UpgradeSelectPlanOptions .widget.popup header,
  div#widget-container.state-UpgradeEnterPaymentInformation .widget.popup header {
    padding-top: 50px;
  }
}
div#widget-container .form-horizontal .form-group legend {
  margin-left: 15px;
}
div#widget-container .form-horizontal .form-group .form-group {
  margin-left: 0;
  margin-right: 0;
}
div#widget-container .fa-check-circle {
  color: #00818c;
}
.google-signup-row > div {
  padding-top: 10px;
}
@media only screen and (min-width: 768px) {
  .google-signup-row {
    display: flex;
    flex-direction: row;
  }
  .google-signup-row > button {
    flex-grow: 0;
    white-space: nowrap;
  }
  .google-signup-row > div {
    flex-grow: 1;
    padding: 7px 10px;
  }
}
.btn-google-signin[disabled] {
  background-color: rgba(0, 0, 0, 0.1);
}