.ng-hide-add, .ng-hide-remove {
  display: block !important;
}

/*Main container fading */
.fade-animation.ng-enter {
  -webkit-transition: opacity 1s;
}

.fade-animation.ng-leave {
  -webkit-transition: opacity 0.2s;
}

.fade-animation.ng-enter, .fade-animation.ng-leave.ng-leave-active {
  opacity: 0;
}

.fade-animation.ng-leave, .fade-animation.ng-enter.ng-enter-active {
  opacity: 1;
}

/*Alert sliding*/
.slide-animate.ng-enter, .slide-animate.ng-leave {
  -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}

.slide-animate.ng-enter {
  right: -320px;
  position: relative;
}

.slide-animate.ng-enter.ng-enter-active {
  right: 0;
}

.slide-animate.ng-leave {
  right: 0;
}

.slide-animate.ng-leave.ng-leave-active {
  opacity: 0;
}

.main-navigation {
  transition: .3s ease-in all;
  overflow: hidden;
}

.main-navigation.ng-hide {
  width: 0;
  opacity: 0;
}


body {
  font-size: 14px;
  color: #292B2C;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.modules {
  font-weight: 400 !important;
}

h1, h2, h3, h4, h5, h6, label {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override header font thickness, so it doesnt look so weird and blurred on windows */
h1, h2, h3, h4, h5, h6, label {
  font-weight: 600;
}

/* Do not render spans inside labels as bold (for checkbox etc) */
label span {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  color: #337AB7;
  text-decoration: none;
}

.font-thin {
  font-weight: 300;
}

.font-regular {
  font-weight: 400 !important;
}

.font-bold {
  font-weight: 600 !important;
}

.font-size-12 {
  font-size: 12px !important;
}

.font-size-13 {
  font-size: 13px !important;
}

.font-size-14 {
  font-size: 14px !important;
}

.font-size-15 {
  font-size: 15px !important;
}

.font-size-16 {
  font-size: 16px !important;
}

.font-size-17 {
  font-size: 17px !important;
}

.font-size-18 {
  font-size: 18px !important;
}

.font-size-20 {
  font-size: 20px !important;
}

.font-size-22 {
  font-size: 22px !important;
}

.font-size-24 {
  font-size: 24px !important;
}

.page-title {
  font-size: 22px;
  font-weight: 300;
}

.min-width-80 {
  min-width: 105px;
}

/* Add overflow auto, so background will expand vertically with the content */
.gray-bg {
  background-color: #EFEFEF;
}

/* Override navbar z index, so the user popup menu will be shown over other content */
.navbar-static-side {
  z-index: 1;
}

header[role="banner"] {
  height: 65px;
}

header nav ul {
  display: -ms-flexbox;
  /*For IE 10*/
  display: flex;
  -ms-align-items: baseline;
  /* For IE 10 */
  align-items: baseline;
  list-style: none;
}

.navbar-item {
  margin: 0;
  -ms-align-items: center;
  /* For IE 10 */
  align-items: center;
  display: -ms-flexbox;
  /* For IE 10 */
  display: flex;
}

.img-circle {
  border-radius: 0;
}

header {
  background: linear-gradient(to right, #1DB1E1, #1182AE);
}

.delete:hover, .delete:active {
  color: #E64D35;
}

/* Tooltip styling */
.tooltip > .tooltip-inner {
  background-color: #1ea3d0;
  color: #FFFFFF;
  box-shadow: rgba(23, 43, 99, 0.24) 0 4px 12px;
  height: inherit;
  padding: 9px auto 10px auto;
  font-size: 13px;
  line-height: 17px;
  font-weight: 400;
}

.tooltip.right > .tooltip-arrow {
  border-right: 5px solid #1ea3d0;
}

.tooltip.top > .tooltip-arrow {
  border-top: 5px solid #1ea3d0;
}

.tooltip.bottom > .tooltip-arrow {
  border-bottom: 5px solid #1ea3d0;
}

.tooltip.left > .tooltip-arrow {
  border-left: 5px solid #1ea3d0;
}

/* Header styling */
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  background: transparent;
}

.navbar {
  background-color: transparent;
  min-height: 45px !important;
  margin-bottom: 0;
  padding-left: 0;
}

.navbar-header {
  margin: 30px 0 0 0;
}

.dropdown-menu-right__icon {
  color: #ccc;
  padding-right: 10px;
}

.profile-img {
  width: 42px;
  border: 1px solid white;
  background-color: #1b7da3;
  border-radius: 50%;
  height: 42px;
  text-transform: uppercase;
  text-align: center;
  font-size: 148%;
  position: relative;
  overflow: hidden;
}

.profile-img img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

.navbar-item {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1.3em;
}

.navbar-item__icon {
  display: block;
}

.navbar-item__text {
  margin-left: 12px;
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 13px;
  display: inline-block;
}

.navbar-item__text_partner {
  font-weight: 400;
  opacity: 0.5;
}

.navbar-top-links li a {
  padding: 5px 10px;
  min-height: 50px;
}

.navbar-top-links li:last-child {
  margin-right: 0px;
}

.navbar-top-links li a:hover {
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.navbar .dropdown-menu {
  margin-top: 7px;
}

.search-field {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 50px;
  box-shadow: none;
  width: 100%;
  padding: 6px 60px 6px 12px;
}

.header-img {
  width: 56%;
  cursor: pointer;
}

.dropdown {
  z-index: 2001;
}

.hamburger-placement {
  margin-left: 13px;
  margin-top: 27px;
  background: transparent;
}

.help-block {
  margin-bottom: 5px;
}

@media (min-width: 768px) {
  .navbar-right {
    margin-right: 20px;
  }
}

@media (max-width: 768px) {
  .navbar-right {
    float: right;
  }
  .navbar-right .dropdown-menu {
    right: 20px;
    left: auto;
  }
  .hideMobile {
    display: none;
  }
  a.navbar-item.dropdown-toggle {
    width: 115px;
  }
  .navbar-item__text {
    margin-left: 6px;
  }
  .navbar-top-links li a {
    padding: 5px 20px;
  }
  .navbar-item__icon {
    padding-top: 5px;
  }
  .header-img {
    width: 45%;
  }
  header[role="banner"] {
    height: auto;
  }
  .navbar-item {
    margin: 0 10px;
  }
  .dropdown {
    z-index: 0;
  }
  .popover {
    left: -105px !important;
  }
}

/* for android 5+ and related devices 411 width */
@media (max-width: 420px) {
  .navbar-right {
    margin-top: -30px;
  }
}

/* for iOS 9+ and android 4+ */
@media (max-width: 375px) {
  .navbar-right {
    margin-top: -40px;
  }
  .navbar-right .dropdown-menu {
    right: 20px;
    left: auto;
  }
  .navbar-item__text {
    margin-bottom: -27px;
  }
  .navbar-item__icon {
    padding-top: 5px;
  }
  .navbar .dropdown-menu {
    margin-top: 21px;
  }
  .profile-img {
    top: 17px;
  }
  .header-img {
    width: 35%;
  }
}

@media (max-width: 320px) {
  .navbar-right {
    margin-top: -60px;
  }
  .navbar-right .dropdown-menu {
    right: 20px;
    left: auto;
  }
  .navbar-item__text {
    margin-left: 45px;
    margin-top: -17px;
  }
  .navbar-item__icon {
    padding-top: 5px;
  }
  .profile-img {
    top: 17px;
  }
  .header-img {
    width: 35%;
  }
}

div.splash-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ebebeb;
  font-size: 30px;
  z-index: 100004;
}

.splash-screen > div {
  margin: 20% 30% 20% 30%;
}

span.current {
  background-color: #d3d3d3;
  height: 2em;
  display: inline-block;
  padding-right: 3px;
}

.bootstrap-datetimepicker-widget {
  z-index: 9999 !important;
}

/** override toast to make it use fontawesome */
#toast-container > .toast {
  background-image: none !important;
}

#toast-container > .toast:before {
  position: relative;
  font-family: FontAwesome;
  font-size: 24px;
  line-height: 18px;
  float: left;
  margin-left: -1em;
  color: #FFFFFF;
  padding-right: 0.5em;
  margin-right: 0.5em;
}

#toast-container > .toast-warning:before {
  color: #8a6d3b;
  content: "\26A1";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  position: absolute;
  top: 19px;
}

#toast-container > .toast-error:before {
  color: #a94442;
  content: "\26A0";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  position: absolute;
}

#toast-container > .toast-info:before {
  color: #31708f;
  content: "\2605";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  position: absolute;
}

#toast-container > .toast-success:before {
  color: #8CB22C;
  content: "\2714";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  position: absolute;
}

/** Temp override theme.css, that overrides toastr.min.css, until we have defined a success color in theme. */
.toast-success {
  background-color: #d6e4b8;
}

.toast-info {
  background-color: #b4e8f6;
}

.toast-error {
  background-color: #f8c2bb;
}

.toast-warning {
  background-color: #fed9b3;
}

#toast-container > div.toast-success,
#toast-container > div.toast-success .toast-close-button {
  color: #8CB22C;
}

#toast-container > div.toast-error,
#toast-container > div.toast-error .toast-close-button {
  color: #E64D35;
}

#toast-container > div.toast-warning,
#toast-container > div.toast-warning .toast-close-button {
  color: #FF9200;
}

#toast-container > div.toast-info,
#toast-container > div.toast-info .toast-close-button {
  color: #1DB0E1;
}

/** Notification styles **/
.alert-danger {
  color: #a94442;
  background-color: #ffdede;
  border-color: #ff8a9d;
}

.breadcrumb {
  padding: 20px 0 0 0;
}

/** Input containers **/
.input-transparent {
  background-color: transparent;
  border-style: none;
  width: 100%;
  font-size: 20px;
  line-height: 24px;
}

/** Forms **/
.form-group {
  margin-bottom: 20px;
}

/** Colors */
.red {
  color: #E64D35;
}

.green {
  color: #8CB22C;
}

.darkOrange {
  color: #FF9200;
}

.lightGrey {
  color: #d4d4d4;
}

.greyDark {
  color: #837979;
}

.blue {
  color: #28A6DE;
}

/** Background colors */
.bg-grey {
  background-color: #F4F4F4;
}

.bg-blue {
  background-color: #28A6DE;
}

.text-blue-link a {
  color: #28A6DE !important;
}

.text-blue-link a:hover {
  color: #15678b !important;
  -moz-transition-property: color;
  -o-transition-property: color;
  -webkit-transition-property: color;
  transition-property: color;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

/** Border colors */
.border-red {
  border: 1px solid #E64D35;
  color: #E64D35;
}

.border-green {
  border: 1px solid #8CB22C;
  color: #8CB22C;
}

.border-darkOrange {
  border: 1px solid #FF9200;
  color: #FF9200;
}

.border-lightGrey {
  border: 1px solid #d4d4d4;
  color: #d4d4d4;
}

.border-link-blue {
  border: 1px solid #1db0e0;
  color: #1db0e0;
}

/** Container stylings **/
.container-shadow {
  box-shadow: rgba(23, 43, 99, 0.21) 0 6px 28px;
}

.container-shadow2 {
  box-shadow: rgba(23, 43, 99, 0.14) 0 5px 22px;
}

.container-border {
  border: 1px solid #d6d6d6 !important;
}

/** Status labels */
.label-status {
  padding: 2px 6px !important;
  border-radius: 4px;
  font-weight: 400;
  text-align: center;
  display: block;
}

.label-green {
  color: #FFFFFF;
  background-color: #7ECE39;
}

.label-blue {
  color: #FFFFFF;
  background-color: #1db0e0;
}

.label-error {
  color: #FFFFFF;
  background-color: #E64D35;
}

.label-grey {
  color: #8f8f8f;
  background-color: #E3E1E1;
}

@media (max-width: 768px) {
  .label-status {
    padding: 2px 10px !important;
    display: inline;
  }
}

/** Override button padding from bootstrap  */
.btn-default {
  padding: 5px 16px 6px 16px;
}

.btn-primary {
  padding: 5px 16px 6px 16px;
}

.btn-success {
  padding: 5px 16px 6px 16px;
}

.btn-info {
  padding: 5px 16px 6px 16px;
}

.btn-danger {
  padding: 5px 16px 6px 16px;
}

.btn-sm {
  padding: 5px 14px 6px 14px;
}

/** Button styles  */
.default-button {
  color: #999999;
  font-size: 18px;
}

.btn-primary {
  font-weight: 600;
  color: #FFFFFF;
  border-color: #1DB0E1;
  background-color: #1DB0E1;
}

.primary-button {
  color: #1DB0E1;
  font-size: 18px;
}

.primary-button:active, .primary-button:hover, .primary-button:focus, .danger-button:active, .danger-button:hover, .danger-button:focus,
.default-button:active, .default-button:focus, .default-button:hover {
  color: #555555;
  cursor: pointer;
}

.btn-primary:hover {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.btn-badge-small {
  padding: 5px 14px 5px 14px;
  font-size: 11px;
  border-radius: 12px;
}

.danger-button {
  color: #E64D35;
  cursor: pointer;
  font-size: 18px;
}

.btn-shadow {
  box-shadow: rgba(23, 43, 99, 0.24) 0 6px 28px;
}

.btn-shadow:hover {
  color: #f8f8f8;
  box-shadow: rgba(23, 43, 99, 0.16) 0 6px 28px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.btn-grey, .btn-grey:focus {
  color: #FFFFFF;
  background-color: #666666;
}

.btn-grey:hover, .btn-grey:active {
  color: #FFFFFF;
  background-color: #888;
  border: 1px solid #666666;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.btn-state-over {
  color: #FFFFFF !important;
  background-color: #888 !important;
  border: 1px solid #666666 !important;
}

.btn-outline-default {
  color: #555555;
  border: 1px solid #555555;
  background-color: transparent;
}

.btn-outline-default:hover {
  color: #FFFFFF;
  background-color: #555555;
  -ms-transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
  transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
}

.btn-outline-primary {
  color: #28A6DE;
  border: 1px solid #28A6DE;
  background-color: transparent;
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
  color: #FFFFFF;
  background-color: #28A6DE;
  -ms-transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
  transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
}

.btn-rounded {
  border-radius: 50px !important;
}

.input-btn {
  padding: 6px 20px;
}

.btn-link-primary {
  font-size: 16px;
  color: #1DB0E1;
  text-decoration: underline;
}

.btn-link-primary:hover {
  color: #2ba1d5;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.btn-group-search {
  background-color: #f3f8fb !important;
  padding: 7px 8px !important;
  font-size: 13px;
  border-radius: 3px;
}

.btn-group-search:hover {
  border: #9B9B9B 1px solid;
  background-color: #cce0ed !important;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.btn-group-search.active {
  background-color: #cce0ed !important;
  border: #bcb7b7 1px solid;
}

.btn-group-search.active:hover {
  background-color: #cce0ed !important;
}

/* Icon styles */
.default-icon {
  color: #999999;
  font-size: 18px;
}

.primary-icon {
  color: #1DB0E1;
  font-size: 18px;
}

.success-icon {
  color: #8CB22C;
  font-size: 18px;
}

.danger-icon {
  color: #E64D35;
  font-size: 18px;
}

.primary-disabled-icon {
  color: rgba(29, 176, 225, 0.3);
}

.primary-disabled-icon:hover {
  color: rgba(85, 85, 85, 0.3);
}

/** Override input size from theme.css  */
.input-sm {
  height: 32px;
}

.filter-search {
  border: 1px solid #f8f8f8;
  border-bottom: 1px solid #1DB0E1;
  padding: 6px 8px;
  color: #555555;
  background-color: #fcfcfc;
  font-weight: 400;
}

.filter-search-clear {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 6px;
  right: 15px;
  font-size: 20px;
  top: 0;
  cursor: pointer;
  color: #555555;
}

.popover_search_btn {
  z-index: 1;
  position: absolute;
  top: 6px;
  width: 38px;
  height: 20px;
  padding-top: 6px;
  padding-right: 9px;
  font-size: 13px;
  right: 20px;
}

.dropdown-style-1 {
  background-color: #FFFFFF;
  border: 1px solid #1DB0E1;
  color: #777;
  margin-left: 5px;
  outline: none;
}

/* Pagination */
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  background-color: #00bce4;
  border-color: #00bce4;
  color: #FFFFFF;
  font-weight: 600;
}

/** Page tab for inner pages **/
.page-main-tab {
  padding-top: 18px;
  background: #F9F9F9;
}

.page-tab-header {
  margin: 0 -20px;
}

.page-message-tab-selected .page-message-tab-title {
  color: #28A6DE;
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 12px;
  margin: 1px 5px;
}

.page-message-tab-selected .border-tab {
  border-bottom: 3px solid #28A6DE;
  border-radius: 5px;
  padding-bottom: 0;
  margin: 0 5px;
}

.page-messages-tab {
  font-size: 14px;
  border-bottom: 1px solid #EFEFEF;
}

.page-messages-tab .page-message-tab-title {
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 12px;
}

.page-messages-tab li {
  display: inline-block;
  min-width: 130px;
  color: #292B2C;
  text-align: center;
}

/** back-to-overview link **/
.page-back-to-overview {
  font-size: 14px;
  color: #28A6DE;
}

.page-back-to-overview:hover {
  color: #15678b !important;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

/** css for spinners **/
.spinnerMargin10pct {
  padding-top: 20%;
}

#mainGeneralSpinner, #mainGeneralSpinner2 {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999;
  margin-left: -15px;
}

.sk-spinner-three-bounce div {
  width: 60px;
  height: 60px;
}

.sk-spinner-three-bounce.sk-spinner {
  width: 200px;
  height: 100px;
}

/** ---------------- **/
.tabbed-form {
  margin: 20px;
}

.sms-placeholders {
  padding-top: 6px;
}

.sms-data {
  color: #28A6DE;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 10px 0 0;
  line-height: 1.5;
}

@media (min-width: 1200px) {
  /* Only show border between name and keywords on service setup page,
    if they are positioned besides each other */
  .custom-border-right {
    padding-right: 20px;
    border-right: 1px solid #d6d6d6;
  }
}

@media (min-width: 768px) {
  .text-right-sm {
    text-align: right;
  }
}

@media (max-width: 768px) {
  .no-padding-right-xs {
    padding-right: 0;
  }
  .no-padding-left-xs {
    padding-left: 0;
  }
}

/* No more tables css */
@media (max-width: 767px) {
  /* Force table to not be like tables anymore */
  .no-more-tables thead,
  .no-more-tables th,
  .no-more-tables table,
  .no-more-tables tbody,
  .no-more-tables td,
  .no-more-tables tr {
    display: block !important;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  .no-more-tables thead tr {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  .no-more-tables tr {
    border: 1px solid #ccc !important;
  }
  .no-more-tables td {
    /* Behave  like a "row" */
    border: none !important;
    border-bottom: 1px solid #eee !important;
    position: relative !important;
    padding-left: 50% !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .no-more-tables tfoot .no-more-tables-footer {
    /* Behaves like a "row" */
    border: none !important;
    border-bottom: 1px solid #eee !important;
    position: relative !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .no-more-tables td:before {
    /* Now like a table header */
    position: absolute !important;
    /* Top/left values mimic padding */
    top: 6px !important;
    left: 6px !important;
    width: 45% !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-weight: 600 !important;
  }
  /*
    Label the data
    */
  .no-more-tables td:before {
    content: attr(data-title) !important;
  }
}

/** view Messages **/
.dialog-searchResultLabel {
  font-size: 16px;
}

.dialog-searchResultLabel .margin-left10 {
  margin-left: 10px;
}

.system .availibleModulesContainer {
  padding-left: 20px;
  border-left: 1px solid #D6D6D6;
}

.system #tblAvailibleModules .modulecheckbox {
  vertical-align: middle;
  cursor: pointer;
}

.system .modulename {
  font-weight: 600;
  padding: 10px;
  font-size: 18px;
}

.system .moduledependencies,
.system .moduledescription {
  padding-left: 10px;
  padding-top: 3px;
}

.system .moduledependencies span {
  margin-right: 5px;
}

.system #tblAvailibleModules tr.selected, .system #tblAvailibleModules tr.selected:hover {
  background-color: #D0EBF3;
}

.system #tblAvailibleModules tr {
  cursor: pointer;
}

.system #tblAvailibleModules tr:hover {
  background-color: #ECF2F3;
}

.help-wizard .wizard-step {
  line-height: 24px;
  font-size: 15px;
}

.help-wizard .wizard-step img {
  box-shadow: 3px 3px 7px #d5d5d5;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.help-wizard .wizard-step img#dialogPhone {
  box-shadow: none;
  margin-bottom: -45px;
}

@media (min-width: 1200px) {
  .help-wizard .wizard-step img#dialogPhone {
    width: unset;
  }
}

.help-wizard label.lblAlwaysShow {
  padding-right: 5px;
  position: relative;
  left: 10px;
  bottom: -45px;
  font-weight: 600;
}

/* Align */
.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.align-top {
  vertical-align: top;
}

/* Global changes for thead in tables */
th {
  font-weight: 600 !important;
}

.table > thead > tr > th {
  line-height: 1.3;
}

/* Prevent click on parent beradcrumb */
.breadcrumb > li:first-child {
  pointer-events: none;
}

.click-label-sm {
  color: #555555;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  line-height: 30px;
}

.click-label-sm:hover {
  color: #eb6651;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

/* Customized checkbox */
.control {
  position: relative;
  display: block;
  margin-bottom: 5px;
  padding-left: 25px;
  cursor: pointer;
  font-size: 12px;
  padding-top: 3px;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control-indicator {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border: 1px solid #9B9B9B;
}

/* Hover and focus states */
.control:hover input ~ .control-indicator,
.control input:focus ~ .control-indicator {
  background: #FFFFFF;
  border-color: #9B9B9B;
}

/* Checked state */
.control input:checked ~ .control-indicator {
  background: #28A6DE;
  border-color: #28A6DE;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control-indicator,
.control input:checked:focus ~ .control-indicator {
  background: #28A6DE;
}

/* Disabled state */
.control input:disabled ~ .control-indicator {
  pointer-events: none;
  opacity: .6;
  background: #FFFFFF;
  border-color: #9B9B9B;
}

/* Check mark */
.control-indicator:after {
  position: absolute;
  display: none;
  content: '';
}

/* Show check mark */
.control input:checked ~ .control-indicator:after {
  display: block;
}

.static-member-page-group-control {
  left: 140px !important;
}

.static-member-page-group-url {
  width: 100%;
  height: 33px;
  margin-right: 5px;
}

/* Checkbox tick */
.control-checkbox .control-indicator:after {
  top: 2px;
  left: 6px;
  width: 6px;
  height: 12px;
  transform: rotate(45deg);
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control-checkbox input:disabled ~ .control-indicator:after {
  border-color: #9B9B9B;
}

/*Default cursor */
.default-cursor {
  cursor: default;
}

/** re-styling of the colour picker containers **/
.sp-container {
  border-radius: 5px;
  background-color: #efefef;
  border: solid 1px #dddddd;
}

.sp-replacer:hover, .sp-replacer.sp-active {
  border-color: #ddd;
  color: #111;
}

.sp-replacer {
  border: solid 1px #dddddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #efefef;
  color: #333;
  height: 34px;
}

.sp-palette-container {
  border-right: solid 1px #ccc;
}

.sp-preview {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: solid 1px #222;
  margin-right: 3px;
}

.sp-preview-inner, .sp-alpha-inner {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.sp-initial {
  float: left;
  border: solid 1px #eee;
}

.sp-initial span {
  border: 1px solid #f3f3f3;
}

.sp-palette-button-container {
  margin-top: 10px;
}

.sp-palette-button-container .sp-palette-toggle {
  background-color: transparent;
  border: 1px solid #666666;
  color: #666666;
}

.sp-palette-button-container .sp-palette-toggle:hover {
  background-color: transparent;
  border: 1px solid #666666;
  color: #666666;
}

.sp-container button {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 0;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 15px;
  font-weight: 400;
  background-color: #666666;
  background-image: none !important;
  text-shadow: none !important;
  color: #FFFFFF;
  font-family: inherit;
}

.sp-container button:hover {
  background: #777777 none;
  border: 0;
  border-bottom: none;
  text-shadow: none !important;
}

.sp-container button:active {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  text-shadow: none !important;
}

.sp-button-container {
  margin-top: 5px;
}

.sp-input-container {
  padding-top: 3px;
}

.sp-input {
  background: #FFFFFF;
}

.colorPicker-input {
  position: absolute;
  left: 60px;
}

ul.segment_popover_select_dropdown {
  display: block;
  padding: 6px 3px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  min-width: 250px;
  max-width: 90%;
  max-height: 250px;
  font-size: 14px;
  font-weight: 400;
  overflow: auto;
  left: 18px;
}

/* The preview box for Marked (markdown) plugin loses list style because Gridster has a badly formed list-style css definition */
.marked-fix ul {
  list-style-type: disc;
}

/* Override SweetAlert2 outline on focus */
.swal2-styled:focus {
  box-shadow: 0 0 0 2px white,
 0 0 0 4px #aaa;
}

/* Ensure SweetAlert2 appears on top when modals are open */
.modal-open .swal2-container {
  z-index: 3000;
}

/* Enable placeholders popover to be used in modals */
.placeholdersPopover {
  z-index: 3000;
}

/* Checkbox into radiobox */
.control-radio1 .control-indicator:after {
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  border: dotted #FFFFFF;
  border-radius: 10px;
}

/* Disabled tick colour */
.control-radio1 input:disabled ~ .control-indicator:after {
  border-color: #9B9B9B;
}

.round-radio {
  border-radius: 10px;
}

.radio-inline-align {
  display: inline-block;
}

.back-nav * {
  color: #666666;
  padding: 0;
}

.image-description {
  font-size: 12px;
  color: #808285;
  padding-top: 5px;
  width: 80px;
  text-align: center;
}

.popover-img {
  cursor: pointer;
  color: #1db0e0;
}

.image-size img {
  width: 250px;
  height: 258px;
}

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

/* Make something disabled  */
.disabled-link {
  cursor: not-allowed;
  pointer-events: none;
}

.disabled {
  color: #CCCCCC !important;
  pointer-events: none;
}

.align-top {
  vertical-align: top;
}

.border-top {
  border-top: 1px solid #D6D6D6 !important;
}

.sortBy-inactive {
  font-size: 11px;
  color: #28A6DE;
  padding-left: 2px;
  padding-right: 5px;
}

.sortBy-active {
  font-size: 11px;
  color: #666666;
  padding-left: 2px;
  padding-right: 5px;
}

.border-none {
  border: none;
}

.cursor-pointer {
  cursor: pointer;
}

/* Treeview multiselect */
.tree-control .item-close:before, .tree-control .tree-input span.selected-items .selected-item-close:before {
  content: 'x';
}

.tree-control .tree-input {
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: 1px solid #c6c6c6;
  padding: 1px 8px;
  font-size: 14px;
  min-height: 38px !important;
  border-radius: 4px;
  color: #555;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  white-space: normal;
  background-color: #fff;
  background-image: linear-gradient(#fff, #f7f7f7);
}

.tree-control .tree-input:hover {
  background-image: linear-gradient(#fff, #e9e9e9);
}

.tree-control .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 0 1px 12px !important;
  vertical-align: middle;
  border-top: 4px solid #333;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 0 dotted;
}

.tree-control .tree-input span.selected-items .selected-item {
  background: #f2f2f2;
  border: 1px solid #a9a9a9;
  border-radius: 3px;
  padding: 3px;
  cursor: text;
}

.tree-control .tree-input span.selected-items .selected-item-close {
  width: 20px;
  cursor: pointer;
  font-weight: 700;
  display: inline-block;
  padding: 2px;
  text-align: center;
}

.tree-control .tree-input span.selected-items .selected-item-close:hover {
  background-color: #f2f2f2;
}

.tree-control .tree-view {
  background-color: #eee;
  z-index: 999;
  min-width: 348px;
  max-height: 400px;
  overflow: auto;
  padding: 10px 5px;
}

.tree-control .tree-view ul {
  padding: 0;
  margin: 0;
}

.tree-control .tree-view ul .item-details {
  display: inline-block;
  margin-left: 5px;
}

.tree-control .tree-view ul .tree-checkbox {
  margin-right: 3px;
  margin-top: 0;
  color: #ddd !important;
  cursor: pointer;
}

.tree-control .tree-view .selected.active {
  background-color: #46b8da;
}

.tree-control .tree-view .helper-container {
  border-bottom: 1px solid #ddd;
  padding: 8px 8px 0;
}

.tree-control .tree-view .tree-container {
  padding: 8px;
}

.tree-control .tree-view .item-container {
  padding: 3px;
  color: #444;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  position: relative;
}

.tree-control .tree-view .item-container:hover {
  background-image: linear-gradient(#c1c1c1, #999) !important;
  color: #fff !important;
  cursor: pointer;
  border: 1px solid #ccc !important;
}

.tree-control .tree-view .selected {
  background-image: linear-gradient(#e9e9e9, #f1f1f1);
  color: #555;
  cursor: pointer;
  border-top: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #d9d9d9;
}

.tree-control .clear-button, .tree-control .tree-view .helper-button {
  display: inline;
  text-align: center;
  font-size: 13px;
  color: #666;
  background-color: #f1f1f1;
  cursor: pointer;
}

.tree-control .tree-view .helper-button {
  border: 1px solid #ccc;
  height: 26px;
  border-radius: 2px;
  line-height: 1.6;
  margin: 0 0 8px;
}

.tree-control .clear-button {
  position: absolute;
  height: 22px;
  width: 22px;
  line-height: 1.4;
  right: 40px;
  top: 6px;
  z-index: 50;
}

.tree-control .input-filter {
  border-radius: 2px;
  border: 1px solid #ccc;
  height: 26px;
  font-size: 14px;
  width: 100%;
  padding-left: 7px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #888;
  margin: 0 0 8px;
}

.tree-control .clear-button:hover, .tree-control .tree-view .helper-button:hover {
  border: 1px solid #ccc;
  color: #999;
  background-color: #f4f4f4;
}

.tree-control .clear-button:focus, .tree-control .input-filter:focus, .tree-control .tree-view .helper-button:focus {
  border: 1px solid #66AFE9 !important;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.035), 0 0 5px rgba(82, 168, 236, 0.7) !important;
}

.tree-control .tree-view .line {
  max-height: 34px;
  overflow: hidden;
  position: relative;
}

.tree-control .item-close {
  width: 20px;
  cursor: pointer;
  font-weight: 700;
  padding: 5px;
}

.tree-control .item-close:hover {
  background-color: #f2f2f2;
}

.tree-control .tree-view li {
  list-style-type: none;
  margin-left: 15px;
}

.tree-control .tree-view li .expand {
  margin-left: -15px;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #525252;
}

.tree-control .tree-view li .expand-opened {
  border: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #525252;
}

.tree-control .tree-view li.top-level {
  margin: 0;
}

/* Global margins and paddings*/
/* Padding All Sides */
.padding-5 {
  padding: 5px !important;
}

.padding-10 {
  padding: 10px !important;
}

.padding-15 {
  padding: 15px !important;
}

.padding-20 {
  padding: 20px !important;
}

.padding-25 {
  padding: 25px !important;
}

.padding-30 {
  padding: 30px !important;
}

.padding-40 {
  padding: 40px !important;
}

.padding-50 {
  padding: 50px !important;
}

.padding-60 {
  padding: 60px !important;
}

.padding-70 {
  padding: 70px !important;
}

.padding-80 {
  padding: 80px !important;
}

.padding-90 {
  padding: 90px !important;
}

.padding-100 {
  padding: 100px !important;
}

/* Padding (Left & Right) Horizontal Sides
    Left
*/
.padding-horizontal-0, .padding-left-0 {
  padding-left: 0 !important;
}

.padding-horizontal-5, .padding-left-5 {
  padding-left: 5px !important;
}

.padding-horizontal-10, .padding-left-10 {
  padding-left: 10px !important;
}

.padding-horizontal-15, .padding-left-15 {
  padding-left: 15px !important;
}

.padding-horizontal-20, .padding-left-20 {
  padding-left: 20px !important;
}

.padding-horizontal-25, .padding-left-25 {
  padding-left: 25px !important;
}

.padding-horizontal-30, .padding-left-30 {
  padding-left: 30px !important;
}

.padding-horizontal-40, .padding-left-40 {
  padding-left: 40px !important;
}

.padding-horizontal-50, .padding-left-50 {
  padding-left: 50px !important;
}

.padding-horizontal-60, .padding-left-60 {
  padding-left: 60px !important;
}

.padding-horizontal-70, .padding-left-70 {
  padding-left: 70px !important;
}

.padding-horizontal-80, .padding-left-80 {
  padding-left: 80px !important;
}

.padding-horizontal-90, .padding-left-90 {
  padding-left: 90px !important;
}

.padding-horizontal-100, .padding-left-100 {
  padding-left: 100px !important;
}

/*
    Right
*/
.padding-horizontal-5, .padding-right-5 {
  padding-right: 5px !important;
}

.padding-horizontal-10, .padding-right-10 {
  padding-right: 10px !important;
}

.padding-horizontal-15, .padding-right-15 {
  padding-right: 15px !important;
}

.padding-horizontal-20, .padding-right-20 {
  padding-right: 20px !important;
}

.padding-horizontal-25, .padding-right-25 {
  padding-right: 25px !important;
}

.padding-horizontal-30, .padding-right-30 {
  padding-right: 30px !important;
}

.padding-horizontal-40, .padding-right-40 {
  padding-right: 40px !important;
}

.padding-horizontal-50, .padding-right-50 {
  padding-right: 50px !important;
}

.padding-horizontal-60, .padding-right-60 {
  padding-right: 60px !important;
}

.padding-horizontal-70, .padding-right-70 {
  padding-right: 70px !important;
}

.padding-horizontal-80, .padding-right-80 {
  padding-right: 80px !important;
}

.padding-horizontal-90, .padding-right-90 {
  padding-right: 90px !important;
}

.padding-horizontal-100, .padding-right-100 {
  padding-right: 100px !important;
}

/* Padding (Top & Bottom) Vertical Sides
    Top
*/
.padding-vertical-5, .padding-top-5 {
  padding-top: 5px !important;
}

.padding-vertical-10, .padding-top-10 {
  padding-top: 10px !important;
}

.padding-vertical-15, .padding-top-15 {
  padding-top: 15px !important;
}

.padding-vertical-20, .padding-top-20 {
  padding-top: 20px !important;
}

.padding-vertical-25, .padding-top-25 {
  padding-top: 25px !important;
}

.padding-vertical-30, .padding-top-30 {
  padding-top: 30px !important;
}

.padding-vertical-40, .padding-top-40 {
  padding-top: 40px !important;
}

.padding-vertical-50, .padding-top-50 {
  padding-top: 50px !important;
}

.padding-vertical-60, .padding-top-60 {
  padding-top: 60px !important;
}

.padding-vertical-70, .padding-top-70 {
  padding-top: 70px !important;
}

.padding-vertical-80, .padding-top-80 {
  padding-top: 80px !important;
}

.padding-vertical-90, .padding-top-90 {
  padding-top: 90px !important;
}

.padding-vertical-100, .padding-top-100 {
  padding-top: 100px !important;
}

/*
    Bottom
*/
.padding-vertical-5, .padding-bottom-5 {
  padding-bottom: 5px !important;
}

.padding-vertical-10, .padding-bottom-10 {
  padding-bottom: 10px !important;
}

.padding-vertical-15, .padding-bottom-15 {
  padding-bottom: 15px !important;
}

.padding-vertical-20, .padding-bottom-20 {
  padding-bottom: 20px !important;
}

.padding-vertical-25, .padding-bottom-25 {
  padding-bottom: 25px !important;
}

.padding-vertical-30, .padding-bottom-30 {
  padding-bottom: 30px !important;
}

.padding-vertical-40, .padding-bottom-40 {
  padding-bottom: 40px !important;
}

.padding-vertical-50, .padding-bottom-50 {
  padding-bottom: 50px !important;
}

.padding-vertical-60, .padding-bottom-60 {
  padding-bottom: 60px !important;
}

.padding-vertical-70, .padding-bottom-70 {
  padding-bottom: 70px !important;
}

.padding-vertical-80, .padding-bottom-80 {
  padding-bottom: 80px !important;
}

.padding-vertical-90, .padding-bottom-90 {
  padding-bottom: 90px !important;
}

.padding-vertical-100, .padding-bottom-100 {
  padding-bottom: 100px !important;
}

/* No Padding */
.padding-none {
  padding: 0 !important;
}

.padding-left-none {
  padding-left: 0 !important;
}

.padding-right-none {
  padding-right: 0 !important;
}

.padding-top-none {
  padding-top: 0 !important;
}

.padding-bottom-none {
  padding-bottom: 0 !important;
}

/* Margin All Sides */
.margin-5 {
  margin: 5px !important;
}

.margin-10 {
  margin: 10px !important;
}

.margin-15 {
  margin: 15px !important;
}

.margin-20 {
  margin: 20px !important;
}

.margin-25 {
  margin: 25px !important;
}

.margin-30 {
  margin: 30px !important;
}

.margin-40 {
  margin: 40px !important;
}

.margin-50 {
  margin: 50px !important;
}

.margin-60 {
  margin: 60px !important;
}

.margin-70 {
  margin: 70px !important;
}

.margin-80 {
  margin: 80px !important;
}

.margin-90 {
  margin: 90px !important;
}

.margin-100 {
  margin: 100px !important;
}

/* Margin (Left & Right) Horizontal Sides
    Left
*/
.margin-horizontal-5, .margin-left-5 {
  margin-left: 5px !important;
}

.margin-horizontal-10, .margin-left-10 {
  margin-left: 10px !important;
}

.margin-horizontal-15, .margin-left-15 {
  margin-left: 15px !important;
}

.margin-horizontal-20, .margin-left-20 {
  margin-left: 20px !important;
}

.margin-horizontal-25, .margin-left-25 {
  margin-left: 25px !important;
}

.margin-horizontal-30, .margin-left-30 {
  margin-left: 30px !important;
}

.margin-horizontal-40, .margin-left-40 {
  margin-left: 40px !important;
}

.margin-horizontal-50, .margin-left-50 {
  margin-left: 50px !important;
}

.margin-horizontal-60, .margin-left-60 {
  margin-left: 60px !important;
}

.margin-horizontal-70, .margin-left-70 {
  margin-left: 70px !important;
}

.margin-horizontal-80, .margin-left-80 {
  margin-left: 80px !important;
}

.margin-horizontal-90, .margin-left-90 {
  margin-left: 90px !important;
}

.margin-horizontal-100, .margin-left-100 {
  margin-left: 100px !important;
}

/*
    Right
*/
.margin-horizontal-5, .margin-right-5 {
  margin-right: 5px !important;
}

.margin-horizontal-10, .margin-right-10 {
  margin-right: 10px !important;
}

.margin-horizontal-15, .margin-right-15 {
  margin-right: 15px !important;
}

.margin-horizontal-20, .margin-right-20 {
  margin-right: 20px !important;
}

.margin-horizontal-25, .margin-right-25 {
  margin-right: 25px !important;
}

.margin-horizontal-30, .margin-right-30 {
  margin-right: 30px !important;
}

.margin-horizontal-40, .margin-right-40 {
  margin-right: 40px !important;
}

.margin-horizontal-50, .margin-right-50 {
  margin-right: 50px !important;
}

.margin-horizontal-60, .margin-right-60 {
  margin-right: 60px !important;
}

.margin-horizontal-70, .margin-right-70 {
  margin-right: 70px !important;
}

.margin-horizontal-80, .margin-right-80 {
  margin-right: 80px !important;
}

.margin-horizontal-90, .margin-right-90 {
  margin-right: 90px !important;
}

.margin-horizontal-100, .margin-right-100 {
  margin-right: 100px !important;
}

/* Margin (Top & Bottom) Vertical Sides
    Top
*/
.margin-vertical-5, .margin-top-5 {
  margin-top: 5px !important;
}

.margin-vertical-10, .margin-top-10 {
  margin-top: 10px !important;
}

.margin-vertical-15, .margin-top-15 {
  margin-top: 15px !important;
}

.margin-vertical-20, .margin-top-20 {
  margin-top: 20px !important;
}

.margin-vertical-25, .margin-top-25 {
  margin-top: 25px !important;
}

.margin-vertical-30, .margin-top-30 {
  margin-top: 30px !important;
}

.margin-vertical-40, .margin-top-40 {
  margin-top: 40px !important;
}

.margin-vertical-50, .margin-top-50 {
  margin-top: 50px !important;
}

.margin-vertical-60, .margin-top-60 {
  margin-top: 60px !important;
}

.margin-vertical-70, .margin-top-70 {
  margin-top: 70px !important;
}

.margin-vertical-80, .margin-top-80 {
  margin-top: 80px !important;
}

.margin-vertical-90, .margin-top-90 {
  margin-top: 90px !important;
}

.margin-vertical-100, .margin-top-100 {
  margin-top: 100px !important;
}

/*
    Bottom
*/
.margin-vertical-5, .margin-bottom-5 {
  margin-bottom: 5px !important;
}

.margin-vertical-10, .margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-vertical-15, .margin-bottom-15 {
  margin-bottom: 15px !important;
}

.margin-vertical-20, .margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-vertical-25, .margin-bottom-25 {
  margin-bottom: 25px !important;
}

.margin-vertical-30, .margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-vertical-40, .margin-bottom-40 {
  margin-bottom: 40px !important;
}

.margin-vertical-50, .margin-bottom-50 {
  margin-bottom: 50px !important;
}

.margin-vertical-60, .margin-bottom-60 {
  margin-bottom: 60px !important;
}

.margin-vertical-70, .margin-bottom-70 {
  margin-bottom: 70px !important;
}

.margin-vertical-80, .margin-bottom-80 {
  margin-bottom: 80px !important;
}

.margin-vertical-90, .margin-bottom-90 {
  margin-bottom: 90px !important;
}

.margin-vertical-100, .margin-bottom-100 {
  margin-bottom: 100px !important;
}

/* No Margin */
.margin-none {
  margin: 0 !important;
}

.margin-left-none {
  margin-left: 0 !important;
}

.margin-right-none {
  margin-right: 0 !important;
}

.margin-top-none {
  margin-top: 0 !important;
}

.margin-bottom-none {
  margin-bottom: 0 !important;
}

.account_name_box {
  border: 1px solid #50bae8;
  border-radius: 3px;
  margin: 10px 30px;
  color: #7fd4f8;
  padding: 5px 15px;
  font-size: 12px;
}

.account_name_box:active, .account_name_box:hover {
  background-color: #50bae8;
  color: #1c7395;
}

.account_icon {
  margin-right: 10px;
}

.account_popover_search_box {
  border: 1px solid #50bae8;
  border-radius: 3px;
  width: 100%;
  margin-bottom: 15px;
  height: 28px;
  font-weight: 400;
  font-size: 13px;
  padding: 7px;
  color: #777;
}

.account_popover_search_box:focus {
  outline-width: 1px;
}

.account_popover_search_btn {
  z-index: 1;
  position: absolute;
  top: 12px;
  left: 80%;
  width: 38px;
  height: 20px;
  padding-top: 6px;
  padding-right: 9px;
  font-size: 12px;
}

.navbar-top-links li {
  display: block;
}

.childtree {
  display: none !important;
}

ul.account_popover_select_dropdown {
  display: block;
  padding: 6px 3px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  min-width: 250px;
  max-height: 250px;
  font-size: 14px;
  font-weight: 400;
  overflow: auto;
}

.account_popover_select_dropdown li :last-child {
  display: block;
}

.account_popover_select_dropdown ul {
  padding-left: 15px;
}

.account-popover {
  z-index: 10000;
}

li .selected {
  background-color: #efefef;
  color: #000 !important;
  padding: 5px;
  margin: 5px 0px;
}

.account_popover_select_dropdown li a {
  color: #9d9d9d;
  cursor: pointer;
  width: 100%;
  display: block;
  min-height: 9px;
}

.account_popover_select_dropdown li:hover, .account_popover_select_dropdown li a:hover {
  color: #29a6de;
  cursor: pointer;
}

.account_popover_select_dropdown li a:hover {
  background-color: #efefef;
}

.account_popover_allAccounts_btn {
  width: 100%;
  height: 30px;
  background-color: #50bae8;
  color: #FFFFFF;
  margin-top: 10px;
  text-align: center;
  padding-top: 5px;
  font-weight: 300;
  font-size: 12px;
}

header nav ul {
  align-items: center;
}

.account-filter-search-clear {
  position: absolute;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin: 6px;
  right: 15px;
  font-size: 20px;
  top: 7px;
  cursor: pointer;
  color: #555555;
}

/* overriding popover css */
.popover-content {
  color: #555555;
}

.popover-content p {
  font-size: 12px;
  font-weight: 300;
}

.popover {
  border: none;
}

.popover.bottom {
  margin-top: 25px;
}

.popover.bottom > .arrow {
  display: none;
}

@media (max-width: 768px) {
  header nav ul {
    display: inline-grid;
  }
  .navbar-top-links li {
    display: block;
  }
}

.promo-page h1, .promo-page h2, .promo-page h3, .promo-page h4, .promo-page h5, .promo-page h6, .promo-page p, .promo-page label {
  -webkit-font-smoothing: antialiased;
}

.promo-page {
  text-align: center;
  margin: 0 auto;
  max-width: 1440px;
}

.text-separator-line {
  width: 80px;
  height: 1px;
  margin: 30px auto 0;
  border-bottom: 2px solid #aaaeb0;
}

.link-blue {
  color: #1db0e0;
  border-bottom: 2px solid rgba(192, 199, 201, 0.39) !important;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.link-blue:hover {
  border-bottom: 1px solid rgba(192, 199, 201, 0.14) !important;
  font-size: 26px;
  font-weight: 600;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.promo-boxes {
  margin-top: 30px;
  display: block;
  position: relative;
  -webkit-box-shadow: rgba(29, 29, 31, 0.14) 0 10px 26px;
  -moz-box-shadow: rgba(29, 29, 31, 0.14) 0 10px 26px;
  -ms-box-shadow: rgba(29, 29, 31, 0.14) 0 10px 26px;
  -o-box-shadow: rgba(29, 29, 31, 0.14) 0 10px 26px;
  box-shadow: rgba(29, 29, 31, 0.14) 0 10px 26px;
}

.promo-box-title {
  text-align: center;
  background: linear-gradient(to right, #1DB1E1, rgba(17, 130, 174, 0.69));
  padding: 4px 0;
  position: absolute;
  bottom: 8%;
  width: 100%;
}

.promo-box-title h2 {
  font-weight: 300;
  color: #FFFFFF;
  margin: 10px auto;
  font-size: 23px;
}

.promo-box-title p {
  font-weight: 400 !important;
  color: #FFFFFF;
  margin: 10px 4px;
  font-size: 16px;
}

.font-slim {
  font-weight: 400;
}

.font-20 {
  font-size: 20px;
}

.main-header {
  color: #28A6DE;
}

/* -------------------------------------------------------------------------
   OVERLAY
------------------------------------------------------------------------- */
.overlay {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
}

.overlay img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay:hover .overlay-content {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.overlay:hover .overlay-shadow {
  visibility: visible;
  opacity: 1;
}

.overlay-shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background: rgba(30, 46, 66, 0.8);
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.overlay-content {
  position: absolute;
  top: 4%;
  width: 100%;
  padding-left: 14px;
  padding-right: 14px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -ms-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.overlay-content h2 {
  color: #FFFFFF;
  font-size: 22px;
}

.overlay-content p {
  color: #FFFFFF;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .overlay-content h2 {
    color: #FFFFFF;
    font-size: 20px;
  }
  .overlay-content p {
    font-size: 14px;
    line-height: 18px;
  }
}

.rs_text-left {
  text-align: left;
}

.rs_nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

.rs-chart {
  margin-top: 30px;
}

.rs_full-width {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
}

.partnersync-table--fixed-layout {
  table-layout: fixed;
}

.content-tab-joyn {
  border: 1px solid #d6d6d6;
  background: #FFFFFF;
  border-top: none !important;
  padding: 5px 10px 10px 10px;
}

.joyn-switchlabel {
  position: relative;
  display: inline-block;
  /*width: 50px;*/
  height: 28px;
  line-height: 28px;
}

.joyn-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.joyn-switch input {
  display: none;
}

.joyn-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.joyn-slider:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 20px;
  left: 2px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .joyn-slider {
  background-color: #00ff00;
}

input:focus + .joyn-slider {
  box-shadow: 0 0 1px #00ff00;
}

input:checked + .joyn-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded joyn-sliders */
.joyn-slider.round {
  border-radius: 34px;
}

.joyn-slider.round:before {
  border-radius: 50%;
}

/* Promotion */
.joyn-preview-mobile {
  width: 320px;
  height: 660px;
  background: #ccc;
  border-radius: 20px;
  padding-top: 20px;
}

.joyn-preview-mobile-mic {
  height: 4px;
  width: 20%;
  background-color: white;
  z-index: 99;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 2px;
}

.joyn-preview-mobile-home-button {
  height: 28px;
  width: 70px;
  background-color: white;
  z-index: 99;
  margin: auto;
  margin-top: 24px;
  border-radius: 8px;
  border: 2px solid silver;
}

.joyn-preview-mobile-inner {
  width: 300px;
  height: 540px;
  border: 1px solid #dddddd;
  background-color: white;
  overflow-y: hidden;
  margin: auto;
}

/* Messages / Offers Preview Item */
.joyn-status-symbol {
  font-weight: bold;
  font-size: 1.3em;
  margin-top: 10px;
  padding-bottom: -10px;
}

.joyn-status-symbol-text {
  font-weight: bold;
  font-size: 13px;
  margin-top: 10px;
  padding-bottom: -10px;
}

.joyn-item-type {
  font-size: 14px;
  color: #474747;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

.joyn-item-timespan {
  font-size: 14px;
  color: #BEBEBE;
  font-family: Arial, Helvetica, sans-serif;
}

.joyn-item-title {
  font-size: 18px;
  line-height: 30px;
  max-width: 390px;
  color: #474747;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  overflow: hidden;
}

.joyn-item-ingress {
  font-size: 16px;
  width: 390px;
  color: #BEBEBE;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  overflow: hidden;
}

.joyn-item-content {
  border-top: 2px solid silver;
  border-bottom: 2px solid silver;
  width: 500px;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.joyn-item-img {
  float: left;
  padding: 2px;
  height: 80px;
  width: 80px;
  border: 1px solid silver;
}

.joyn-item-img img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

/* Setup Name and logo */
.joyn-preview-add-membership-container {
  background-color: #eee;
  padding-top: 8px;
  padding-bottom: 8px;
  max-width: 350px;
}

.joyn-preview-add-membership-letter {
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}

.joyn-preview-add-membership-item {
  border-bottom: 1px solid #ddd;
  background-color: white;
  height: 60px;
  vertical-align: middle;
  line-height: 60px;
  vertical-align: middle;
  width: 100%;
}

.joyn-preview-add-membership-image {
  float: left;
  width: 40px;
  height: 40px;
  margin-left: 16px;
  margin-right: 16px;
  margin-top: 10px;
}

.joyn-preview-add-membership-text {
  font-size: 18px;
  font-family: Arial;
  vertical-align: middle;
}

.joyn-round-image {
  width: 100%;
  border-radius: 50%;
}

/* Setup tiles */
.joyn-setup-tile-container > div {
  border-top: 1px solid #e0e0e0;
}

.joyn-setup-tile-container > div:nth-child(odd) {
  border-right: 1px solid #e0e0e0;
}

.joyn-setup-tile-container > div:nth-child(1), .joyn-setup-tile-container > div:nth-child(2) {
  border-top: 0;
}

.joyn-setup-tile {
  width: 50%;
  height: 90px;
  background: white;
  margin: 0;
  padding: 0;
  border-radius: 0;
  opacity: .6;
  overflow: hidden;
}

.joyn-setup-tile-label {
  font-weight: bold;
  text-align: center;
  font-size: 12px;
  margin-top: 5px;
}

.joyn-setup-tile-box {
  padding: 4px;
  height: 90px;
  width: 100%;
  float: left;
  margin: 2px;
}

.joyn-setup-tile-icon {
  text-align: center;
  margin-top: 18px;
}

.joyn-setup-tile-added {
  position: absolute;
  right: 2px;
  top: 2px;
  font-size: 12px;
  color: #00FF00;
}

.joyn-setup-tile-move {
  position: absolute;
  left: 2px;
  bottom: 2px;
  font-size: 12px;
  cursor: move;
}

.joyn-setup-tile.last-column {
  border-right: none;
}

.joyn-setup-tile.last-row {
  border-bottom: none;
}

.joyn-setup-tile-highlight {
  border: 1px solid #428bca;
  background: #5bc0de;
}

/*Fixes ui-select with font awesome icon inside*/
.ui-select-match .form-control {
  height: 80px !important;
}

.short-button-joyn {
  padding-right: 20px;
  padding-left: 20px;
}

.icon60 {
  width: 60px;
  height: 60px;
  width: 100%;
  overflow: hidden;
}

.joyn-container60 {
  width: 60px;
  height: 60px;
  overflow: hidden;
}

.joyn-left-with-margin {
  float: left;
  margin-left: 24px;
}

.joyn-card-preview-container.joyn_box {
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom: 45px;
}

.joyn-card-preview {
  position: relative;
  width: 100%;
  padding-top: 63%;
  background-color: grey;
  border-radius: 5%/7%;
  overflow: hidden;
}

.joyn-card-preview .joyn-card-preview-text {
  position: absolute;
  bottom: 9.5%;
  left: 6.42%;
}

.joyn-card-preview-number {
  position: absolute;
  bottom: 18%;
  left: 6.42%;
  line-height: 1;
}

.joyn-card-preview-name {
  position: absolute;
  bottom: 25.68%;
  left: 6.42%;
  line-height: 1;
}

.joyn-card-preview-date {
  position: absolute;
  bottom: 10.5%;
  left: 6.42%;
  line-height: 1;
}

.joyn-card-preview-barcode {
  position: absolute;
  bottom: 9.5%;
  right: 6.42%;
  height: 23%;
}

.joyn-card-preview-barcode * {
  display: block;
  padding: 11%;
  background-color: white;
  color: #000;
  border-radius: 10%;
  height: 90%;
}

.joyn-card-preview:after {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(225deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
  -webkit-mask-image: linear-gradient(#000, transparent);
}

.joyn-card-preview img {
  position: absolute;
  top: 0;
}

.joyn-color-preview-box {
  width: 100%;
  border: 1px solid #e5e6e7;
  height: 34px;
}

.joyn-card-alert {
  margin-left: -21px;
  margin-right: -21px;
  margin-bottom: -21px;
  margin-top: 20px;
  border-radius: 0;
}

.joyn-card-error {
  border-color: #ff8a9d;
}

.joyn-card-box:hover {
  border-color: #1DB1E1;
}

.joyn-card-box .table td {
  border: none;
  padding-right: 0;
  padding-left: 0;
}

.joyn-sortable-tile {
  opacity: 1;
  cursor: move;
}

.joyn-sortable-tile:hover {
  background-color: #E5FFFF;
}

.joyn-tile-grid-item {
  border-radius: 0;
  border: 0;
  border-right: 1px solid lightgrey;
  border-bottom: 1px solid lightgrey;
  padding: 0;
  text-align: center;
  height: 40px;
}

.joyn-tile-grid {
  margin: 0;
  border-top: 1px solid lightgrey;
}

.joyn-tile-list .btn-group {
  margin-top: -7px;
}

.joyn-tile-grid .joyn-tile-grid-item:nth-child(12n + 1) {
  border-left: 1px solid lightgrey;
}

.joyn-select-icon-btn .fa {
  vertical-align: middle;
  margin-right: 8px;
}

.joyn-tabs-body {
  margin-top: -1px;
  border: 1px solid #D6D6D6;
}

.joyn-error-message {
  display: none;
}

.has-error .joyn-error-message {
  display: block;
}

.joyn-benefitTemplate--preview {
  text-align: center;
  max-width: 500px;
}

.joyn-benefitTemplate--headerText {
  word-break: break-all;
  font-family: ProximaNova;
  font-size: 27px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.22;
  letter-spacing: normal;
  margin-bottom: 15px;
  margin-left: 25px;
  margin-right: 25px;
}

.joyn-benefitTemplate--body {
  word-break: break-all;
  font-family: ProximaNova;
  font-size: 17px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.53;
  letter-spacing: 0.2px;
  margin-bottom: 15px;
  margin-left: 25px;
  margin-right: 25px;
}

.joyn-messageEdit__box-32square {
  overflow: hidden;
  width: 32px;
  height: 32px;
}

.joyn-message-bottomRight {
  position: relative;
  margin-top: 10px;
  float: right;
}

.joyn-preview__box--bodyText {
  font-size: 1.5em;
  text-align: left;
  word-wrap: break-word;
}

.joyn-icon32 {
  width: 32px;
  height: 32px;
  overflow-y: hidden;
}

.joyn-noinput-label {
  font-weight: 600;
  color: #292B2C;
}

.joyn-separator-line {
  margin-top: 5px;
  margin-bottom: 5px;
  border: 0;
  border-top: 1px solid #bdbdbd;
}

.joyn-custom-properties-title {
  color: #000;
}

.joyn-setup-partner .progress-success {
  color: #3c763d;
}

.joyn-setup-partner .progress-text {
  font-size: 1.5em;
}

.joyn-setup-partner .progress-edit-text {
  font-size: 0.7em;
}

.joyn-setup-partner .progress-warning-info-text {
  font-size: 0.7em !important;
  color: #666666;
}

.joyn-setup-partner .progress-warning-text {
  color: #8A6D3B;
}

.joyn-setup-partner .progress-row {
  margin-top: 15px;
  margin-bottom: 20px;
}

.joyn-setup-partner .progress-row-item {
  padding-left: 0px;
  padding-right: 0px;
}

.joyn-setup-partner .progress-help-block {
  margin-left: 22px;
}

.joyn-table--with-input .form-group {
  margin-bottom: 0px;
}

.joyn-message-title {
  border: 1px solid #474747;
  max-width: 400px;
  color: #474747;
  border-bottom: 0;
  line-height: 60px;
  padding-left: 80px;
  font-size: 25px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.joyn-message-container {
  color: #474747;
}

.joyn-message-container h1 {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 300;
  margin: 0 0 1em;
  letter-spacing: .8px;
}

.joyn-message-header {
  padding-bottom: 30px;
  background: #f9f9f9;
}

.joyn-message-header-container {
  padding-top: 25px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-left: 20px;
}

.joyn-message-image {
  margin: 0;
  position: relative;
}

.joyn-message-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.joyn-message-meta {
  display: flex;
  margin-bottom: 1rem;
}

.joyn-message-meta span {
  color: #ff4c3c;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.75px;
}

.joyn-message-body {
  margin-top: 1em;
  font-size: 1rem;
}

.joyn-message-body p {
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 26.6667px;
}

.joyn-btn-grey-noanimation, .joyn-btn-grey-noanimation:focus {
  color: #FFFFFF;
  background-color: #666666;
}

.joyn-btn-grey-noanimation:hover, .joyn-btn-grey-noanimation:active {
  color: #FFFFFF;
  background-color: #888;
  border: 1px solid #666666;
}

.joyn-color {
  color: #ff4c3c;
}

.joyn-btn-green-indicator {
  color: #8bb12a;
}

.joyn-word-break {
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
}

.joyn_color-primary {
  color: #13516D;
}

.joyn_color-primary-darker {
  color: #0E2850;
}

.joyn_color-primary-second {
  color: #1DB0E0;
}

.joyn_color-secondary {
  color: #FF5A5F;
}

.joyn_color-secondary-darker {
  color: #F04E42;
}

.joyn_color-text {
  color: #252525;
}

.joyn_color-text-lighter {
  color: #444444;
}

.joyn_color-dark-grey {
  color: #333536;
}

.joyn_color-medium-grey {
  color: #b2b7b9;
}

.joyn_color-border-grey {
  color: #CFD2D5;
}

.joyn_color-background-grey {
  color: #EFEFEF;
}

.joyn_color-signal-green {
  color: #8DB22D;
}

.joyn_color-signal-green-light {
  color: #A4F3CC;
}

.joyn_color-signal-red {
  color: #AC0000;
}

.joyn_color-signal-yellow {
  color: #FFCC00;
}

.joyn_backgroundColor-primary {
  background-color: #13516D;
}

.joyn_backgroundColor-primary--darker {
  background-color: #0E2850;
}

.joyn_backgroundColor-primary--second {
  background-color: #1DB0E0;
}

.joyn_backgroundColor-secondary {
  background-color: #FF5A5F;
}

.joyn_backgroundColor-secondary--darker {
  background-color: #F04E42;
}

.joyn_backgroundColor-text {
  background-color: #252525;
}

.joyn_backgroundColor-text--lighter {
  background-color: #444444;
}

.joyn_backgroundColor-grey--dark {
  background-color: #333536;
}

.joyn_backgroundColor-grey--medium {
  background-color: #b2b7b9;
}

.joyn_backgroundColor-grey--border {
  background-color: #CFD2D5;
}

.joyn_backgroundColor-grey--background {
  background-color: #EFEFEF;
}

.joyn_backgroundColor-signal-green {
  background-color: #8DB22D;
}

.joyn_backgroundColor-signal-green--light {
  background-color: #A4F3CC;
}

.joyn_backgroundColor-signal-red {
  background-color: #AC0000;
}

.joyn_btn {
  text-transform: uppercase;
  transition: background-color 0.2s ease,
 color 0.2s ease,
 border-color 0.2s ease;
  font-family: "open sans";
  font-weight: 600;
  border-radius: 4px;
  font-size: 14px;
  display: inline-block;
  padding: 10px 15px;
  margin-bottom: 0;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}

.joyn_btn.ng-animate {
  transition: none;
}

.joyn_btn.joyn_btn-fixedWidth {
  width: 175px;
}

.joyn_btn.joyn_btn-fullWidth {
  width: 100%;
}

.joyn_btn.joyn_btn-primary {
  color: #FFFFFF;
  background-color: #13516D;
}

.joyn_btn.joyn_btn-primary:hover {
  background-color: #0E2850;
}

.joyn_btn.joyn_btn-secondary {
  border-color: #FF5A5F;
  color: #FF5A5F;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-secondary:hover {
  border-color: #FF5A5F;
  color: #FFFFFF;
  background-color: #FF5A5F;
}

.joyn_btn.joyn_btn-clear {
  border-color: transparent;
  color: black;
  background-color: transparent;
  padding: 5px 8px;
}

.joyn_btn.joyn_btn-clear:hover {
  border-color: #CFD2D5;
  color: black;
  background-color: transparent;
}

.joyn_btn.joyn_btn-secondary-alternative {
  border-color: #FF5A5F;
  color: #FFFFFF;
  background-color: #FF5A5F;
}

.joyn_btn.joyn_btn-secondary-alternative:hover {
  border-color: #FF5A5F;
  color: #FF5A5F;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-third {
  border-color: #b2b7b9;
  color: #444444;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-third:hover {
  border-color: #13516D;
  color: #FFFFFF;
  background-color: #13516D;
}

.joyn_btn.joyn_btn-third-alternative {
  border-color: #13516D;
  color: #13516D;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-third-alternative:hover {
  border-color: #13516D;
  color: #FFFFFF;
  background-color: #13516D;
}

.joyn_btn.joyn_btn-fourth {
  color: #444444;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-fourth:hover {
  color: #FFFFFF;
  background: #13516D;
  background: rgba(19, 81, 109, 0.5);
}

.joyn_btn.joyn_btn-fifth {
  color: #1DB0E0;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-fifth:hover {
  border-color: #1DB0E0;
  color: #FFFFFF;
  background-color: #1DB0E0;
}

.joyn_btn.joyn_btn-card {
  width: 110px;
  font-weight: bold;
}

.joyn_btn.joyn_btn-tile {
  text-transform: none;
  text-align: left;
  display: flex;
  flex-direction: row;
  padding: 15px;
  padding-bottom: 0;
  border-radius: 4px;
  border: 1px solid #CFD2D5;
  margin-bottom: 15px;
  color: #444444;
  font-family: "open sans";
  font-size: 14px;
  font-weight: 500;
}

.joyn_btn.joyn_btn-tile .joyn_btn-tile_leftColumn {
  min-width: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  padding-top: 20px;
  flex-direction: column;
}

.joyn_btn.joyn_btn-tile .joyn_btn-tile_rightColumn {
  min-width: 50%;
  flex: 2;
}

.joyn_btn.joyn_btn-tile .joyn_btn-tile_rightColumn .joyn_btn-tile_title {
  font-weight: 600;
  border: 0;
  margin-bottom: 5px;
}

.joyn_btn.joyn_btn-tile .joyn_btn-tile_rightColumn .joyn_btn-tile_text {
  word-break: break-word;
  margin-bottom: 20px;
  overflow-wrap: break-word;
  white-space: normal;
}

.joyn_btn.joyn_btn-tile:hover {
  border-color: #13516D;
  color: #FFFFFF;
  background-color: #13516D;
}

.joyn_btn.joyn_btn-plain {
  text-transform: none;
  font-size: 14px;
  color: #252525;
  font-family: "open sans";
  font-weight: 100;
  padding: 0px;
  padding-right: 20px;
  background-color: transparent;
  outline: none;
}

.joyn_btn.joyn_btn-plain.joyn_btn-expand {
  background-image: url("../../img/joyn/down-arrow.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 12px 12px;
}

.joyn_btn.joyn_btn-plain.joyn_btn-collapse {
  background-image: url("../../img/joyn/up-arrow.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 12px 12px;
}

.joyn_btn.joyn_btn-plain:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-link {
  text-transform: uppercase;
  color: #13516D;
  background-color: transparent;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-link.joyn_btn-link--inline {
  padding: 0;
  margin-top: -3px;
}

.joyn_btn.joyn_btn-link.joyn_btn-link--danger {
  color: #AC0000;
}

.joyn_btn.joyn_btn-link:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-link--light {
  text-transform: none;
  color: #1DB0E0;
  background-color: transparent;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-link--light:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-link--secondary-darker {
  text-transform: none;
  color: #F04E42;
  background-color: transparent;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-link--secondary-darker:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-link--text {
  text-transform: none;
  color: #252525;
  background-color: transparent;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-link--text:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-file {
  color: #1DB0E0;
  background-color: transparent;
  text-decoration: underline;
  min-height: 100px;
  width: 100%;
  border-color: #CFD2D5;
}

.joyn_btn.joyn_btn-file:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-table {
  color: #13516D;
  background-color: transparent;
}

.joyn_btn.joyn_btn-edit-action {
  padding: 0px;
  text-transform: none;
  color: #1DB0E0;
  background-color: transparent;
}

.joyn_btn.joyn_btn-edit-action .joyn_btn-edit-action-text {
  padding-left: 5px;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-edit-action:hover > span {
  text-decoration: none;
}

.joyn_btn.joyn_btn-alert.confirm {
  background-color: #e64d35 !important;
}

.joyn_btn.joyn_btn-alert.cancel {
  background-color: #aaa !important;
}

label.joyn_btn.joyn_btn-file {
  padding-top: 35px;
}

.joyn_h1, .joyn_h2, .joyn_h3 {
  margin-bottom: 20px;
}

.joyn_h1 {
  font-size: 24px;
  color: #444444;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_h2 {
  font-size: 18px;
  color: #444444;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_h3 {
  font-size: 14px;
  color: #252525;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_p {
  font-size: 14px;
  color: #444444;
  font-family: "open sans";
  font-weight: 500;
  margin-bottom: 20px;
  overflow-wrap: break-word;
}

.joyn_p-title {
  font-size: 14px;
  color: #444444;
  font-family: "open sans";
  font-weight: 600;
  border: 0;
  margin-bottom: 5px;
}

.joyn_fieldset {
  margin-bottom: 20px;
}

.joyn_helptext {
  font-size: 14px;
  color: #252525;
  font-family: "open sans";
  font-weight: 100;
  margin-bottom: 5px;
}

.joyn_ul-bullet {
  font-size: 14px;
  color: #444444;
  font-family: "open sans";
  font-weight: 500;
  list-style-type: disc;
}

.joyn_ul-bullet li {
  padding-bottom: 5px;
}

.joyn_text_preWrap {
  white-space: pre-wrap;
}

.modal .joyn_box {
  box-shadow: none;
  padding: 40px;
  padding-top: 30px;
}

.joyn_box {
  background-color: #FFFFFF;
  border-radius: 4px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 30px;
  padding-left: 30px;
  box-shadow: 0 2px 9px 1px #CFD2D5;
}

.joyn_box.joyn_box-noPad {
  overflow: hidden;
  padding: 0;
}

.joyn_box.joyn_box--success {
  background-color: #A4F3CC;
}

.joyn_box.joyn_box--info {
  background-color: #1DB0E0;
  color: #FFFFFF;
}

.joyn_box.joyn_box--info .joyn_p-title {
  color: #FFFFFF;
}

.joyn_box.joyn_box--error {
  background-color: #AC0000;
  color: #FFFFFF;
}

.joyn_box.joyn_box--error .joyn_p-title {
  color: #FFFFFF;
}

.joyn_box.joyn_box--loading {
  position: relative;
}

.joyn_box.joyn_box--loading:before {
  content: "";
  background-image: url("../../img/joyn/loading-spinner.svg");
  background-size: 100px 100px;
  position: absolute;
  z-index: 11;
  top: 20%;
  left: 0;
  right: 0;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center;
}

.joyn_box.joyn_box--loading:after {
  content: "";
  background: #FFFFFF;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.joyn_box .joyn_box-seperator {
  border-top: 1px solid #CFD2D5;
  right: 0;
  left: 0;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: 20px;
  margin-top: 0;
}

.joyn_box .joyn_box-seperator.joyn_box-seperator--light {
  border-color: #EFEFEF;
}

.joyn_box .joyn_box-nav {
  padding-top: 20px;
}

.joyn_box .joyn_box-nav .joyn_btn-fixedWidth {
  width: 150px;
}

.joyn_box .joyn_phoneControl {
  display: flex;
  width: 100%;
}

.joyn_box .joyn_phoneControl .joyn_phoneControl-countryCode {
  margin-right: 3px;
  width: 50px;
}

.joyn_box .joyn_phoneControl .joyn_phoneControl-phoneNo {
  flex: 2;
}

.joyn_box .form-control,
.joyn_box .md-editor {
  border-radius: 4px;
  border-color: #CFD2D5;
  min-height: 42px;
}

.joyn_box .md-editor > textarea {
  border: 0;
}

.joyn_box textarea.joyn_disableHorizontalResize {
  resize: vertical;
}

.joyn_box .control-label {
  font-size: 14px;
  color: #444444;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_box .has-error .form-control {
  border-color: #AC0000;
}

.joyn_box .has-error .help-block {
  color: #AC0000;
}

.joyn_box .has-error .control-label {
  color: #444444;
}

.joyn_box .joyn_box--light {
  background: #1DB0E0;
  background: rgba(29, 176, 224, 0.2);
}

.joyn_box.joyn_box-smallStats {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 147px;
  padding-top: 25px;
}

.joyn_box.joyn_box-smallStats .joyn_box-smallStats_primaryText {
  font-size: 42px;
  line-height: 30px;
  color: #1ba7d7;
  margin-bottom: 20px;
  font-weight: bolder;
}

.joyn_box.joyn_box-smallStats .joyn_box-smallStats_secondaryText {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bolder;
}

.joyn_box.joyn_box-smallStats .joyn_box-smallStats_infoText {
  font-size: 12px;
}

.joyn_box.joyn_box-largeStats {
  min-height: 500px;
}

.joyn_form-control, .joyn_datepicker > input {
  border-radius: 4px;
  border-color: #CFD2D5;
  min-height: 42px;
}

label ~ .joyn_datepicker {
  margin-top: 0;
}

.joyn_colorpicker .joyn_colorpicker_preview {
  float: left;
  width: 42px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  height: 42px;
  border: 1px solid #CFD2D5;
  border-right: 0;
}

.joyn_colorpicker .form-control {
  width: 90px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.joyn_roundImage {
  border-radius: 50%;
  border: 1px solid #CFD2D5;
}

.joyn_infoSection {
  display: flex;
  align-items: center;
  margin-bottom: 30;
  margin-top: 30;
}

.joyn_infoSection .fa, .joyn_infoSection svg {
  color: #13516D;
}

.joyn_datepicker {
  width: 175px;
  margin-top: 5px;
}

.joyn_datepicker input {
  padding-right: 0;
  border-right: 0;
  transition: border-color 0.2s ease;
}

.joyn_datepicker input:focus {
  border-color: #1DB0E1;
}

.joyn_datepicker input:focus + .input-group-btn .datepickerbutton {
  border-color: #1DB0E1;
}

.joyn_datepicker .datepickerbutton {
  height: 42px;
  border-left: 0;
  transition: border-color 0.2s ease;
}

.joyn_datepicker .datepickerbutton span {
  border-left: 0;
}

.has-error .joyn_datepicker .datepickerbutton {
  border-color: #AC0000;
}

.joyn_datepicker-seperator {
  height: 40px;
  width: 30px;
  display: inline-block;
  position: relative;
}

.joyn_datepicker-seperator:after {
  content: "";
  position: absolute;
  margin-left: 5px;
  margin-right: 5px;
  left: 0;
  right: 0;
  top: 20px;
  border-top: 1px solid #CFD2D5;
}

.joyn_radio {
  font-family: "open sans";
  font-weight: 500;
  padding-left: 8px;
  position: relative;
  margin-right: 10px;
  margin-top: 5px;
  cursor: pointer;
  display: block;
}

.joyn_radio.joyn_radio-inline {
  display: inline-block;
}

.joyn_radio input {
  width: 1px;
  height: 1px;
  opacity: .1;
  margin-right: 10px;
}

.joyn_radio input:checked ~ .joyn_radio_indicator {
  background: #1DB0E0;
  border-color: #1DB0E0;
}

.joyn_radio input:focus ~ .joyn_radio_indicator {
  box-shadow: 0 0px 7px #1DB0E0, 0 0px 7px #1DB0E0;
}

.joyn_radio .joyn_radio_indicator {
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border: 1px solid #CFD2D5;
  border-radius: 10px;
}

.joyn_radio .joyn_radio_indicator::after {
  position: absolute;
  top: 4px;
  left: 4px;
  border: solid #FFFFFF;
  border-radius: 10px;
  content: " ";
  border-width: 3px;
}

.joyn_checkbox {
  position: relative;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  display: block;
}

.joyn_checkbox input {
  opacity: 0;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  margin-left: 5px;
}

.joyn_checkbox input:checked + label::before {
  border-color: #1DB0E0;
  background-color: #1DB0E0;
  background-position: center;
  background-image: url("../../img/joyn/ic_check.svg");
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.joyn_checkbox input:focus ~ label::before {
  box-shadow: 0 0px 7px #1DB0E0, 0 0px 7px #1DB0E0;
}

.joyn_checkbox label {
  padding-left: 23px;
  font-family: "open sans";
  font-weight: 500;
  cursor: pointer;
  margin: 0;
}

.joyn_checkbox label::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 2px;
  border-radius: 4px;
  border: 1px solid #CFD2D5;
  background-color: #FFFFFF;
}

.joyn_checkbox input[disabled] ~ label {
  opacity: .5;
}

.joyn_subForm {
  border-left: 2px solid #1DB0E0;
  margin-left: 22px;
  padding-top: 15px;
  padding-left: 25px;
  margin-top: -20px;
}

.joyn_subForm_sending {
  border-left: 2px solid #1DB0E0;
  margin-left: 7px;
  padding-top: 15px;
  padding-left: 25px;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 15px;
}

.joyn_input-sm {
  width: 155px;
}

.joyn_input-sm.joyn_datepicker {
  width: 130px;
}

.joyn_insertableElement.ng-enter {
  background-color: #FFFFFF;
  animation: joyn-element-inserted 5s;
}

@keyframes joyn-element-inserted {
  0% {
    background-color: #FFFFFF;
  }
  4% {
    background-color: #FFFFFF;
  }
  17% {
    background-color: #A4F3CC;
  }
  60% {
    background-color: #A4F3CC;
  }
  100% {
    background-color: #FFFFFF;
  }
}

.joyn_d-block {
  display: block;
}

.joyn-benefit-window .modal-dialog {
  width: 1200px;
}

.zindex {
  z-index: 99000 !important;
}

ul.joyn_wizard-steps {
  padding: 0;
  padding-top: 5px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
}

ul.joyn_wizard-steps li.joyn_wizard-step {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
}

ul.joyn_wizard-steps li.joyn_wizard-step .joyn_wizard-step_divider {
  display: flex;
  flex: 1;
  border-top: 1px solid #CFD2D5;
  margin-bottom: 30px;
}

ul.joyn_wizard-steps li.joyn_wizard-step:first-child, ul.joyn_wizard-steps li.joyn_wizard-step:last-child {
  max-width: 80px;
}

ul.joyn_wizard-steps li.joyn_wizard-step:first-child .joyn_wizard-step_divider, ul.joyn_wizard-steps li.joyn_wizard-step:last-child .joyn_wizard-step_divider {
  display: none;
}

ul.joyn_wizard-steps li.joyn_wizard-step:last-child {
  margin-right: 10px;
}

ul.joyn_wizard-steps li.joyn_wizard-step:first-child {
  margin-left: 10px;
}

ul.joyn_wizard-steps li.joyn_wizard-step .joyn_wizard-step_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100;
  width: 80px;
  white-space: nowrap;
}

ul.joyn_wizard-steps li.joyn_wizard-step .joyn_wizard-step_content .joyn_wizard-step_badge {
  font-weight: 700;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #FFFFFF;
  background-color: #CFD2D5;
  padding-top: 4px;
  margin-bottom: 10px;
  text-align: center;
}

ul.joyn_wizard-steps li.joyn_wizard-step.complete .joyn_wizard-step_content .joyn_wizard-step_badge {
  background-color: #8DB22D;
  font-size: 12px;
  padding-top: 5px;
}

ul.joyn_wizard-steps li.joyn_wizard-step.active .joyn_wizard-step_content {
  font-weight: 700;
}

ul.joyn_wizard-steps li.joyn_wizard-step.active .joyn_wizard-step_content .joyn_wizard-step_badge {
  background-color: #1DB0E0;
  color: #FFFFFF;
}

.joyn_messagePreview {
  min-width: 400px;
}

.joyn_messagePreview .joyn_messagePreview-list {
  display: flex;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-img {
  margin-right: 15px;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-img img {
  height: 60px;
  width: 60px;
  border: 1px #333536;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details {
  flex: 2;
  flex-grow: 1;
  min-width: 0;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details .joyn_messagePreview-list-type {
  font-weight: 700;
  font-size: 14px;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details .joyn_messagePreview-list-date {
  font-weight: 100;
  font-size: 14px;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details .joyn_messagePreview-list-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details .joyn_messagePreview-list-ingress {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 14px;
}

.joyn_messagePreview .joyn_messagePreview-url {
  width: 100%;
  min-height: 500px;
  overflow: hidden;
  margin-bottom: -5px;
}

.joyn_cardListPreview {
  background-color: whitesmoke;
}

.joyn_cardListPreview .joyn_cardListPreview_otherCard {
  height: 83px;
  border-radius: 8px;
  background-color: lightGrey;
  padding: 18px;
  display: flex;
  align-items: center;
  box-shadow: none;
  margin-bottom: 8px;
}

.joyn_cardListPreview .joyn_cardListPreview_providerCard {
  height: 83px;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  align-items: center;
  box-shadow: none;
  margin-bottom: 8px;
}

.joyn_cardListPreview .joyn_cardListPreview_providerCard img {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background-color: lightGrey;
}

.joyn_cardListPreview .joyn_cardListPreview_providerCard div {
  text-transform: uppercase;
  padding-left: 18px;
  font-family: 'open sans';
  font-weight: 600;
  color: white;
}

.joyn_testMessage-container {
  margin-left: -30px;
  margin-right: -30px;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: -20px;
  clear: both;
}

.joyn_testMessage-container .joyn_testMessage-confirmationLeft {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 15px;
}

.joyn_testMessage-container .joyn_testMessage-confirmationLeft img {
  margin-right: 35px;
  height: 70px;
  width: 70px;
}

.joyn_testMessage-container .joyn_testMessage-confirmationRight {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  flex-direction: row;
}

.joyn_messageSummary-img {
  width: 100%;
}

.joyn_messageImgEdit-preview {
  max-width: 175px;
  margin-bottom: 20px;
}

.joyn_messageSendConfirmation-img {
  height: 100px;
}

.joyn_setupStepHeader {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  min-height: 70px;
  display: flex;
}

.joyn_setupStepHeader .joyn_setupStepHeader-title {
  flex: 2;
  display: flex;
  align-items: center;
}

.joyn_setupStepHeader .joyn_setupStepHeader-title .joyn_h2 {
  margin: 0;
}

.joyn_setupStepHeader .joyn_setupStepHeader-status {
  flex: 3;
  display: flex;
  align-items: center;
}

.joyn_setupStepHeader .joyn_setupStepHeader-action {
  flex: 1;
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
}

.joyn_setupCardHeader {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  min-height: 30px;
  display: flex;
}

.joyn_setupCardHeader .joyn_setupCardHeader-icon {
  max-height: 40px;
  max-width: 40px;
  flex: 1;
  display: flex;
  align-items: center;
}

.joyn_setupCardHeader .joyn_setupCardHeader-title {
  max-height: 40px;
  flex: 4;
  display: flex;
  align-items: center;
}

.joyn_setupCardHeader .joyn_setupCardHeader-action {
  max-height: 30px;
  flex: 2;
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
}

.joyn_promotionPreview {
  background-color: whitesmoke;
  padding-bottom: 10px;
}

.joyn_promotionPreview > img {
  width: 100%;
}

.joyn_promotionPreview .joyn_promotionPreview-img {
  position: relative;
}

.joyn_promotionPreview .joyn_promotionPreview-img img {
  width: 100%;
  height: auto;
}

.joyn_promotionPreview .joyn_promotionPreview-img .joyn_promotionPreview-img-logo {
  position: absolute;
  top: 19%;
  left: 33.33%;
  height: auto;
  width: 33.33%;
  border-radius: 50%;
  overflow: hidden;
}

.joyn_promotionPreview .joyn_promotionPreview-img .joyn_promotionPreview-img-logo img {
  width: 100%;
  height: auto;
}

.joyn_promotionPreview .joyn_promotionPreview-img .joyn_promotionPreview-img-logo.initial {
  top: 20px;
  position: relative;
}

.joyn_promotionPreview .joyn_promotionPreview-body {
  position: relative;
  max-height: 55px;
  overflow: hidden;
  margin-bottom: 0;
  padding-left: 10px;
  padding-right: 10px;
}

.joyn_promotionPreview .joyn_promotionPreview-body > div {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 30px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, whitesmoke 100%);
}

.joyn_promotionPreview .joyn_promotionPreview-readMoreBtn {
  background-color: #FFFFFF;
  position: relative;
  left: 50%;
  top: -10px;
  margin-left: -45px;
  border: 1px solid #c2c2c2;
  height: 30px;
  width: 90px;
  text-transform: none;
  font-size: 13px;
  padding-top: 5px;
  padding-left: 10px;
  font-weight: 400;
}

.joyn_promotionPreview .joyn_promotionPreview-benefitInfo {
  background-color: #efefef;
  height: 120px;
  border-radius: 4px;
  text-align: center;
  padding-top: 40px;
}

.joyn_promotionPreview .joyn_promotionPreview-benefit {
  background-color: #fff;
  border-radius: 4px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 15px;
  padding-right: 35px;
  margin-bottom: 5px;
  position: relative;
}

.joyn_promotionPreview .joyn_promotionPreview-benefit img {
  position: absolute;
  right: 13px;
  top: 50%;
  height: 13px;
  margin-top: -6px;
}

.joyn_promotionPreview .joyn_promotionPreview-benefit .joyn_promotionPreview-benefit-title {
  font-size: 14px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.joyn_promotionPreview .joyn_promotionPreview-benefit .joyn_promotionPreview-benefit-body {
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.joyn_promotionPreview .joyn_promotionPreview-signupBtn {
  border-radius: 5px;
  border: 1px solid #ff4c3c;
  color: #ff4c3c;
  background-color: #FFFFFF;
  height: 45px;
  padding-top: 10px;
  font-size: 16px;
}

.joyn_promotionPreview .joyn_promotionPreview-existingBtn {
  border-radius: 5px;
  background-color: #ff4c3c;
  color: #FFFFFF;
  height: 45px;
  margin-bottom: 10px;
  padding-top: 10px;
  font-size: 16px;
}

.joyn_fieldPreview_profileHeader {
  font-size: 18px;
  font-weight: bold;
}

.joyn_fieldPreview_addPicture {
  width: 49%;
  display: inline-block;
  padding: 5px;
}

.joyn_fieldPreview_addPicture .joyn_fieldPreview_addPicture_box {
  background-color: #c1c1c1;
  height: 90px;
  border-radius: 4px;
  text-align: center;
  padding-top: 20px;
  color: #444444;
  font-weight: bold;
}

.joyn_fieldPreview_addPicture .joyn_fieldPreview_addPicture_box .joyn_fieldPreview_addPicture_icon {
  color: #fff;
  font-size: 30px;
}

.joyn_fieldPreview_label {
  margin-bottom: 5px;
  font-size: 13px;
  color: #444444;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
}

.joyn_fieldPreview_textInput {
  width: 100%;
  height: 45px;
  border: 1px solid #c1c1c1;
  background-color: white;
  border-radius: 3px;
  margin-bottom: 15px;
  position: relative;
}

.joyn_fieldPreview_optionsLabel {
  text-align: center;
  text-transform: uppercase;
  padding-top: 20px;
  padding-bottom: 15px;
}

.joyn_fieldPreview_option_checkbox {
  position: absolute;
  right: 0;
  top: 5px;
  border: 2px solid #c1c1c1;
  width: 16px;
  height: 16px;
}

.joyn_fieldPreview_caret {
  border-width: 4px;
  border-style: solid;
  border-right: 4px solid transparent;
  border-color: black transparent transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  right: 10px;
}

.joyn_fieldPreview_termsAndConsents {
  height: 100px;
  background-color: lightgray;
  padding-top: 30px;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 40px;
  margin-bottom: 10px;
}

.joyn_fieldPreview_option_radio {
  position: absolute;
  right: 0;
  top: 5px;
  border: 2px solid #c1c1c1;
  width: 16px;
  height: 16px;
  border-radius: 8px;
}

.joyn_fieldPreview_option {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
}

.joyn_table-header {
  font-size: 18px;
  color: #252525;
  font-family: "open sans";
  font-weight: 600;
  margin-top: 25px;
}

.joyn_box-noPad .joyn_table-clean tbody tr:last-child {
  border-bottom: 0;
}

.joyn_box-noPad .joyn_table-clean tbody tr:first-child {
  border-top: 0;
}

.joyn_table-clean {
  width: 100%;
  overflow: hidden;
  table-layout: fixed;
}

.joyn_table-clean.joyn_table-darkHeader thead tr {
  height: 50px;
  background-color: gray;
  border-radius: 5px 5px 0 0;
  color: #ffff;
  margin-right: 0px;
}

.joyn_table-clean.joyn_table-darkHeader tbody tr {
  min-height: 40px;
}

.joyn_table-clean.joyn_table-clean--largeRows tr {
  min-height: 55px;
}

.joyn_table-clean tr {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.joyn_table-clean tr td, .joyn_table-clean tr th {
  flex: 2;
  display: flex;
  align-items: center;
  min-width: 0;
}

.joyn_table-clean tr .joyn_ellipsisText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 50px;
}

.joyn_table-clean .joyn_p,
.joyn_table-clean .joyn_p-title {
  margin-bottom: 0;
}

.joyn_table-clean .joyn_table-img {
  max-height: 30px;
  max-width: 30px;
  margin: 10px;
  margin-left: 15px;
  margin-right: 15px;
}

.joyn_table-clean .joyn_table-img img {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  overflow: hidden;
}

.joyn_table-clean .joyn_table-checkbox {
  max-height: 30px;
  max-width: 30px;
  margin-top: 10px;
  margin-left: 15px;
}

.joyn_table-clean .joyn_table-benefit-icon {
  max-height: 30px;
  max-width: 30px;
  margin-top: 10px;
}

.joyn_table-clean .joyn_table-benefit-text {
  max-height: 30px;
  max-width: 230px;
  margin-top: 10px;
  font-size: 14px;
  color: #252525;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_table-clean .joyn_table-benefit-type {
  max-height: 30px;
  max-width: 110px;
  margin-top: 10px;
}

.joyn_table-clean .joyn_table-multiLine {
  flex-direction: row;
  align-items: center;
}

.joyn_table-clean .joyn_table-multiLine > div {
  width: 100%;
}

.joyn_table-clean .joyn_table-imgLarge {
  flex: 2;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  max-width: 70px;
  overflow: hidden;
  border-radius: 5px;
}

.joyn_table-clean .joyn_table-imgLarge img {
  margin-left: -50%;
  height: 70px;
}

.joyn_table-clean .joyn_table-icon {
  max-height: 30px;
  max-width: 30px;
  margin: 10px;
  margin-left: 20px;
  font-size: 16px;
  margin-right: 0;
}

.joyn_table-clean .joyn_table-clickableIndicator {
  color: #CFD2D5;
  max-width: 20px;
}

.joyn_table-clean tbody tr {
  border-bottom: 2px solid #EFEFEF;
  border-left: 2px solid #EFEFEF;
  border-right: 2px solid #EFEFEF;
}

.joyn_box-noPad .joyn_table-clean tbody tr {
  border-left: none;
  border-right: none;
}

.joyn_table-clean tbody tr:first-child {
  border-top: 2px solid #EFEFEF;
}

.joyn_table-clean.joyn_table-clickable tbody tr:hover {
  background-color: #F1F9F9;
  cursor: pointer;
}

.joyn_table-clean .joyn_table-statistics {
  max-width: 260px;
}

.joyn_table-clean .joyn_table-status {
  max-width: 150px;
}

.joyn_table-clean .joyn_table-shortInfo {
  max-width: 120px;
}

.joyn_table-clean .joyn_table-info {
  max-width: 180px;
}

.joyn_table-clean .joyn_table-info .joyn_table-infoIcon {
  height: 28px;
  width: 28px;
  margin-right: 10px;
}

.joyn_table-clean .joyn_table-info .joyn_table-infoIcon img {
  max-height: 28px;
  max-width: 28px;
}

.joyn_table-clean .joyn_table-info .joyn_table-infoText {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: start;
  font-size: 12px;
}

.joyn_table-clean .joyn_table-tile-info {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38;
  align-items: right;
}

.joyn_table-clean .joyn_table-tile-status {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38;
  max-width: 100px;
  color: #b2b7b9;
}

.joyn_table-clean .joyn_table-import-error-row {
  min-height: 40px;
}

.joyn_table-clean .joyn_table-import-error-row-column {
  max-width: 75px;
}

.joyn_table-clean .joyn_table-email {
  max-width: 220px;
}

.joyn_table-benefits .ui-sortable-placeholder {
  height: 92px;
  background-color: #EFEFEF;
}

.joyn_table-benefits tr {
  background-color: #FFFFFF;
}

.joyn_table-benefits .joyn_table-clickablecol:hover {
  background-color: #F1F9F9;
  cursor: pointer;
}

.joyn_table-benefits .joyn_table-dragColumn {
  max-width: 64px;
  border-left: 1px solid #EFEFEF;
  padding-left: 28px;
  font-size: 14px;
  cursor: grab;
  background-color: #FAFAFA;
}

.expandable-content.ng-hide {
  max-height: 0;
  transition: max-height 0.45s ease;
  overflow: hidden;
  position: relative;
}

.expandable-content {
  max-height: 141px;
  transition: max-height 0.45s ease;
  overflow: hidden;
  position: relative;
}

.expandable-content.ng-hide-remove,
.expandable-content.ng-hide-add {
  /* remember, the .hg-hide class is added to element
    when the active class is added causing it to appear
    as hidden. Therefore set the styling to display=block
    so that the hide animation is visible */
  display: block !important;
}

.expandable-content.ng-hide-add {
  animation-name: hide;
  -webkit-animation-name: hide;
  animation-duration: .5s;
  -webkit-animation-duration: .5s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
}

.expandable-content.ng-hide-remove {
  animation-name: show;
  -webkit-animation-name: show;
  animation-duration: .5s;
  -webkit-animation-duration: .5s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
}

.alert-box {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-box-success {
  color: #252525;
  background-color: #A4F3CC;
  border-color: #A4F3CC;
  display: none;
}

.alert-box-failure {
  color: #252525;
  background-color: #FF5A5F;
  border-color: #FF5A5F;
  display: none;
}

.joyn_color-primary {
  color: #13516D;
}

.joyn_color-primary-darker {
  color: #0E2850;
}

.joyn_color-primary-second {
  color: #1DB0E0;
}

.joyn_color-secondary {
  color: #FF5A5F;
}

.joyn_color-secondary-darker {
  color: #F04E42;
}

.joyn_color-text {
  color: #252525;
}

.joyn_color-text-lighter {
  color: #444444;
}

.joyn_color-dark-grey {
  color: #333536;
}

.joyn_color-medium-grey {
  color: #b2b7b9;
}

.joyn_color-border-grey {
  color: #CFD2D5;
}

.joyn_color-background-grey {
  color: #EFEFEF;
}

.joyn_color-signal-green {
  color: #8DB22D;
}

.joyn_color-signal-green-light {
  color: #A4F3CC;
}

.joyn_color-signal-red {
  color: #AC0000;
}

.joyn_color-signal-yellow {
  color: #FFCC00;
}

.joyn_backgroundColor-primary {
  background-color: #13516D;
}

.joyn_backgroundColor-primary--darker {
  background-color: #0E2850;
}

.joyn_backgroundColor-primary--second {
  background-color: #1DB0E0;
}

.joyn_backgroundColor-secondary {
  background-color: #FF5A5F;
}

.joyn_backgroundColor-secondary--darker {
  background-color: #F04E42;
}

.joyn_backgroundColor-text {
  background-color: #252525;
}

.joyn_backgroundColor-text--lighter {
  background-color: #444444;
}

.joyn_backgroundColor-grey--dark {
  background-color: #333536;
}

.joyn_backgroundColor-grey--medium {
  background-color: #b2b7b9;
}

.joyn_backgroundColor-grey--border {
  background-color: #CFD2D5;
}

.joyn_backgroundColor-grey--background {
  background-color: #EFEFEF;
}

.joyn_backgroundColor-signal-green {
  background-color: #8DB22D;
}

.joyn_backgroundColor-signal-green--light {
  background-color: #A4F3CC;
}

.joyn_backgroundColor-signal-red {
  background-color: #AC0000;
}

.joyn_btn {
  text-transform: uppercase;
  transition: background-color 0.2s ease,
 color 0.2s ease,
 border-color 0.2s ease;
  font-family: "open sans";
  font-weight: 600;
  border-radius: 4px;
  font-size: 14px;
  display: inline-block;
  padding: 10px 15px;
  margin-bottom: 0;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}

.joyn_btn.ng-animate {
  transition: none;
}

.joyn_btn.joyn_btn-fixedWidth {
  width: 175px;
}

.joyn_btn.joyn_btn-fullWidth {
  width: 100%;
}

.joyn_btn.joyn_btn-primary {
  color: #FFFFFF;
  background-color: #13516D;
}

.joyn_btn.joyn_btn-primary:hover {
  background-color: #0E2850;
}

.joyn_btn.joyn_btn-secondary {
  border-color: #FF5A5F;
  color: #FF5A5F;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-secondary:hover {
  border-color: #FF5A5F;
  color: #FFFFFF;
  background-color: #FF5A5F;
}

.joyn_btn.joyn_btn-clear {
  border-color: transparent;
  color: black;
  background-color: transparent;
  padding: 5px 8px;
}

.joyn_btn.joyn_btn-clear:hover {
  border-color: #CFD2D5;
  color: black;
  background-color: transparent;
}

.joyn_btn.joyn_btn-secondary-alternative {
  border-color: #FF5A5F;
  color: #FFFFFF;
  background-color: #FF5A5F;
}

.joyn_btn.joyn_btn-secondary-alternative:hover {
  border-color: #FF5A5F;
  color: #FF5A5F;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-third {
  border-color: #b2b7b9;
  color: #444444;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-third:hover {
  border-color: #13516D;
  color: #FFFFFF;
  background-color: #13516D;
}

.joyn_btn.joyn_btn-third-alternative {
  border-color: #13516D;
  color: #13516D;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-third-alternative:hover {
  border-color: #13516D;
  color: #FFFFFF;
  background-color: #13516D;
}

.joyn_btn.joyn_btn-fourth {
  color: #444444;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-fourth:hover {
  color: #FFFFFF;
  background: #13516D;
  background: rgba(19, 81, 109, 0.5);
}

.joyn_btn.joyn_btn-fifth {
  color: #1DB0E0;
  background-color: #FFFFFF;
}

.joyn_btn.joyn_btn-fifth:hover {
  border-color: #1DB0E0;
  color: #FFFFFF;
  background-color: #1DB0E0;
}

.joyn_btn.joyn_btn-card {
  width: 110px;
  font-weight: bold;
}

.joyn_btn.joyn_btn-tile {
  text-transform: none;
  text-align: left;
  display: flex;
  flex-direction: row;
  padding: 15px;
  padding-bottom: 0;
  border-radius: 4px;
  border: 1px solid #CFD2D5;
  margin-bottom: 15px;
  color: #444444;
  font-family: "open sans";
  font-size: 14px;
  font-weight: 500;
}

.joyn_btn.joyn_btn-tile .joyn_btn-tile_leftColumn {
  min-width: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  padding-top: 20px;
  flex-direction: column;
}

.joyn_btn.joyn_btn-tile .joyn_btn-tile_rightColumn {
  min-width: 50%;
  flex: 2;
}

.joyn_btn.joyn_btn-tile .joyn_btn-tile_rightColumn .joyn_btn-tile_title {
  font-weight: 600;
  border: 0;
  margin-bottom: 5px;
}

.joyn_btn.joyn_btn-tile .joyn_btn-tile_rightColumn .joyn_btn-tile_text {
  word-break: break-word;
  margin-bottom: 20px;
  overflow-wrap: break-word;
  white-space: normal;
}

.joyn_btn.joyn_btn-tile:hover {
  border-color: #13516D;
  color: #FFFFFF;
  background-color: #13516D;
}

.joyn_btn.joyn_btn-plain {
  text-transform: none;
  font-size: 14px;
  color: #252525;
  font-family: "open sans";
  font-weight: 100;
  padding: 0px;
  padding-right: 20px;
  background-color: transparent;
  outline: none;
}

.joyn_btn.joyn_btn-plain.joyn_btn-expand {
  background-image: url("../../img/joyn/down-arrow.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 12px 12px;
}

.joyn_btn.joyn_btn-plain.joyn_btn-collapse {
  background-image: url("../../img/joyn/up-arrow.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 12px 12px;
}

.joyn_btn.joyn_btn-plain:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-link {
  text-transform: uppercase;
  color: #13516D;
  background-color: transparent;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-link.joyn_btn-link--inline {
  padding: 0;
  margin-top: -3px;
}

.joyn_btn.joyn_btn-link.joyn_btn-link--danger {
  color: #AC0000;
}

.joyn_btn.joyn_btn-link:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-link--light {
  text-transform: none;
  color: #1DB0E0;
  background-color: transparent;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-link--light:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-link--secondary-darker {
  text-transform: none;
  color: #F04E42;
  background-color: transparent;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-link--secondary-darker:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-link--text {
  text-transform: none;
  color: #252525;
  background-color: transparent;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-link--text:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-file {
  color: #1DB0E0;
  background-color: transparent;
  text-decoration: underline;
  min-height: 100px;
  width: 100%;
  border-color: #CFD2D5;
}

.joyn_btn.joyn_btn-file:hover {
  text-decoration: none;
}

.joyn_btn.joyn_btn-table {
  color: #13516D;
  background-color: transparent;
}

.joyn_btn.joyn_btn-edit-action {
  padding: 0px;
  text-transform: none;
  color: #1DB0E0;
  background-color: transparent;
}

.joyn_btn.joyn_btn-edit-action .joyn_btn-edit-action-text {
  padding-left: 5px;
  text-decoration: underline;
}

.joyn_btn.joyn_btn-edit-action:hover > span {
  text-decoration: none;
}

.joyn_btn.joyn_btn-alert.confirm {
  background-color: #e64d35 !important;
}

.joyn_btn.joyn_btn-alert.cancel {
  background-color: #aaa !important;
}

label.joyn_btn.joyn_btn-file {
  padding-top: 35px;
}

.joyn_h1, .joyn_h2, .joyn_h3 {
  margin-bottom: 20px;
}

.joyn_h1 {
  font-size: 24px;
  color: #444444;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_h2 {
  font-size: 18px;
  color: #444444;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_h3 {
  font-size: 14px;
  color: #252525;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_p {
  font-size: 14px;
  color: #444444;
  font-family: "open sans";
  font-weight: 500;
  margin-bottom: 20px;
  overflow-wrap: break-word;
}

.joyn_p-title {
  font-size: 14px;
  color: #444444;
  font-family: "open sans";
  font-weight: 600;
  border: 0;
  margin-bottom: 5px;
}

.joyn_fieldset {
  margin-bottom: 20px;
}

.joyn_helptext {
  font-size: 14px;
  color: #252525;
  font-family: "open sans";
  font-weight: 100;
  margin-bottom: 5px;
}

.joyn_ul-bullet {
  font-size: 14px;
  color: #444444;
  font-family: "open sans";
  font-weight: 500;
  list-style-type: disc;
}

.joyn_ul-bullet li {
  padding-bottom: 5px;
}

.joyn_text_preWrap {
  white-space: pre-wrap;
}

.modal .joyn_box {
  box-shadow: none;
  padding: 40px;
  padding-top: 30px;
}

.joyn_box {
  background-color: #FFFFFF;
  border-radius: 4px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 30px;
  padding-left: 30px;
  box-shadow: 0 2px 9px 1px #CFD2D5;
}

.joyn_box.joyn_box-noPad {
  overflow: hidden;
  padding: 0;
}

.joyn_box.joyn_box--success {
  background-color: #A4F3CC;
}

.joyn_box.joyn_box--info {
  background-color: #1DB0E0;
  color: #FFFFFF;
}

.joyn_box.joyn_box--info .joyn_p-title {
  color: #FFFFFF;
}

.joyn_box.joyn_box--error {
  background-color: #AC0000;
  color: #FFFFFF;
}

.joyn_box.joyn_box--error .joyn_p-title {
  color: #FFFFFF;
}

.joyn_box.joyn_box--loading {
  position: relative;
}

.joyn_box.joyn_box--loading:before {
  content: "";
  background-image: url("../../img/joyn/loading-spinner.svg");
  background-size: 100px 100px;
  position: absolute;
  z-index: 11;
  top: 20%;
  left: 0;
  right: 0;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center;
}

.joyn_box.joyn_box--loading:after {
  content: "";
  background: #FFFFFF;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.joyn_box .joyn_box-seperator {
  border-top: 1px solid #CFD2D5;
  right: 0;
  left: 0;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: 20px;
  margin-top: 0;
}

.joyn_box .joyn_box-seperator.joyn_box-seperator--light {
  border-color: #EFEFEF;
}

.joyn_box .joyn_box-nav {
  padding-top: 20px;
}

.joyn_box .joyn_box-nav .joyn_btn-fixedWidth {
  width: 150px;
}

.joyn_box .joyn_phoneControl {
  display: flex;
  width: 100%;
}

.joyn_box .joyn_phoneControl .joyn_phoneControl-countryCode {
  margin-right: 3px;
  width: 50px;
}

.joyn_box .joyn_phoneControl .joyn_phoneControl-phoneNo {
  flex: 2;
}

.joyn_box .form-control,
.joyn_box .md-editor {
  border-radius: 4px;
  border-color: #CFD2D5;
  min-height: 42px;
}

.joyn_box .md-editor > textarea {
  border: 0;
}

.joyn_box textarea.joyn_disableHorizontalResize {
  resize: vertical;
}

.joyn_box .control-label {
  font-size: 14px;
  color: #444444;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_box .has-error .form-control {
  border-color: #AC0000;
}

.joyn_box .has-error .help-block {
  color: #AC0000;
}

.joyn_box .has-error .control-label {
  color: #444444;
}

.joyn_box .joyn_box--light {
  background: #1DB0E0;
  background: rgba(29, 176, 224, 0.2);
}

.joyn_box.joyn_box-smallStats {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 147px;
  padding-top: 25px;
}

.joyn_box.joyn_box-smallStats .joyn_box-smallStats_primaryText {
  font-size: 42px;
  line-height: 30px;
  color: #1ba7d7;
  margin-bottom: 20px;
  font-weight: bolder;
}

.joyn_box.joyn_box-smallStats .joyn_box-smallStats_secondaryText {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bolder;
}

.joyn_box.joyn_box-smallStats .joyn_box-smallStats_infoText {
  font-size: 12px;
}

.joyn_box.joyn_box-largeStats {
  min-height: 500px;
}

.joyn_form-control, .joyn_datepicker > input {
  border-radius: 4px;
  border-color: #CFD2D5;
  min-height: 42px;
}

label ~ .joyn_datepicker {
  margin-top: 0;
}

.joyn_colorpicker .joyn_colorpicker_preview {
  float: left;
  width: 42px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  height: 42px;
  border: 1px solid #CFD2D5;
  border-right: 0;
}

.joyn_colorpicker .form-control {
  width: 90px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.joyn_roundImage {
  border-radius: 50%;
  border: 1px solid #CFD2D5;
}

.joyn_infoSection {
  display: flex;
  align-items: center;
  margin-bottom: 30;
  margin-top: 30;
}

.joyn_infoSection .fa, .joyn_infoSection svg {
  color: #13516D;
}

.joyn_datepicker {
  width: 175px;
  margin-top: 5px;
}

.joyn_datepicker input {
  padding-right: 0;
  border-right: 0;
  transition: border-color 0.2s ease;
}

.joyn_datepicker input:focus {
  border-color: #1DB0E1;
}

.joyn_datepicker input:focus + .input-group-btn .datepickerbutton {
  border-color: #1DB0E1;
}

.joyn_datepicker .datepickerbutton {
  height: 42px;
  border-left: 0;
  transition: border-color 0.2s ease;
}

.joyn_datepicker .datepickerbutton span {
  border-left: 0;
}

.has-error .joyn_datepicker .datepickerbutton {
  border-color: #AC0000;
}

.joyn_datepicker-seperator {
  height: 40px;
  width: 30px;
  display: inline-block;
  position: relative;
}

.joyn_datepicker-seperator:after {
  content: "";
  position: absolute;
  margin-left: 5px;
  margin-right: 5px;
  left: 0;
  right: 0;
  top: 20px;
  border-top: 1px solid #CFD2D5;
}

.joyn_radio {
  font-family: "open sans";
  font-weight: 500;
  padding-left: 8px;
  position: relative;
  margin-right: 10px;
  margin-top: 5px;
  cursor: pointer;
  display: block;
}

.joyn_radio.joyn_radio-inline {
  display: inline-block;
}

.joyn_radio input {
  width: 1px;
  height: 1px;
  opacity: .1;
  margin-right: 10px;
}

.joyn_radio input:checked ~ .joyn_radio_indicator {
  background: #1DB0E0;
  border-color: #1DB0E0;
}

.joyn_radio input:focus ~ .joyn_radio_indicator {
  box-shadow: 0 0px 7px #1DB0E0, 0 0px 7px #1DB0E0;
}

.joyn_radio .joyn_radio_indicator {
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border: 1px solid #CFD2D5;
  border-radius: 10px;
}

.joyn_radio .joyn_radio_indicator::after {
  position: absolute;
  top: 4px;
  left: 4px;
  border: solid #FFFFFF;
  border-radius: 10px;
  content: " ";
  border-width: 3px;
}

.joyn_checkbox {
  position: relative;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  display: block;
}

.joyn_checkbox input {
  opacity: 0;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  margin-left: 5px;
}

.joyn_checkbox input:checked + label::before {
  border-color: #1DB0E0;
  background-color: #1DB0E0;
  background-position: center;
  background-image: url("../../img/joyn/ic_check.svg");
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.joyn_checkbox input:focus ~ label::before {
  box-shadow: 0 0px 7px #1DB0E0, 0 0px 7px #1DB0E0;
}

.joyn_checkbox label {
  padding-left: 23px;
  font-family: "open sans";
  font-weight: 500;
  cursor: pointer;
  margin: 0;
}

.joyn_checkbox label::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 2px;
  border-radius: 4px;
  border: 1px solid #CFD2D5;
  background-color: #FFFFFF;
}

.joyn_checkbox input[disabled] ~ label {
  opacity: .5;
}

.joyn_subForm {
  border-left: 2px solid #1DB0E0;
  margin-left: 22px;
  padding-top: 15px;
  padding-left: 25px;
  margin-top: -20px;
}

.joyn_subForm_sending {
  border-left: 2px solid #1DB0E0;
  margin-left: 7px;
  padding-top: 15px;
  padding-left: 25px;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 15px;
}

.joyn_input-sm {
  width: 155px;
}

.joyn_input-sm.joyn_datepicker {
  width: 130px;
}

.joyn_insertableElement.ng-enter {
  background-color: #FFFFFF;
  animation: joyn-element-inserted 5s;
}

@keyframes joyn-element-inserted {
  0% {
    background-color: #FFFFFF;
  }
  4% {
    background-color: #FFFFFF;
  }
  17% {
    background-color: #A4F3CC;
  }
  60% {
    background-color: #A4F3CC;
  }
  100% {
    background-color: #FFFFFF;
  }
}

.joyn_d-block {
  display: block;
}

.joyn-benefit-window .modal-dialog {
  width: 1200px;
}

.zindex {
  z-index: 99000 !important;
}

ul.joyn_wizard-steps {
  padding: 0;
  padding-top: 5px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
}

ul.joyn_wizard-steps li.joyn_wizard-step {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
}

ul.joyn_wizard-steps li.joyn_wizard-step .joyn_wizard-step_divider {
  display: flex;
  flex: 1;
  border-top: 1px solid #CFD2D5;
  margin-bottom: 30px;
}

ul.joyn_wizard-steps li.joyn_wizard-step:first-child, ul.joyn_wizard-steps li.joyn_wizard-step:last-child {
  max-width: 80px;
}

ul.joyn_wizard-steps li.joyn_wizard-step:first-child .joyn_wizard-step_divider, ul.joyn_wizard-steps li.joyn_wizard-step:last-child .joyn_wizard-step_divider {
  display: none;
}

ul.joyn_wizard-steps li.joyn_wizard-step:last-child {
  margin-right: 10px;
}

ul.joyn_wizard-steps li.joyn_wizard-step:first-child {
  margin-left: 10px;
}

ul.joyn_wizard-steps li.joyn_wizard-step .joyn_wizard-step_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100;
  width: 80px;
  white-space: nowrap;
}

ul.joyn_wizard-steps li.joyn_wizard-step .joyn_wizard-step_content .joyn_wizard-step_badge {
  font-weight: 700;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #FFFFFF;
  background-color: #CFD2D5;
  padding-top: 4px;
  margin-bottom: 10px;
  text-align: center;
}

ul.joyn_wizard-steps li.joyn_wizard-step.complete .joyn_wizard-step_content .joyn_wizard-step_badge {
  background-color: #8DB22D;
  font-size: 12px;
  padding-top: 5px;
}

ul.joyn_wizard-steps li.joyn_wizard-step.active .joyn_wizard-step_content {
  font-weight: 700;
}

ul.joyn_wizard-steps li.joyn_wizard-step.active .joyn_wizard-step_content .joyn_wizard-step_badge {
  background-color: #1DB0E0;
  color: #FFFFFF;
}

.joyn_messagePreview {
  min-width: 400px;
}

.joyn_messagePreview .joyn_messagePreview-list {
  display: flex;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-img {
  margin-right: 15px;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-img img {
  height: 60px;
  width: 60px;
  border: 1px #333536;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details {
  flex: 2;
  flex-grow: 1;
  min-width: 0;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details .joyn_messagePreview-list-type {
  font-weight: 700;
  font-size: 14px;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details .joyn_messagePreview-list-date {
  font-weight: 100;
  font-size: 14px;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details .joyn_messagePreview-list-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.joyn_messagePreview .joyn_messagePreview-list .joyn_messagePreview-list-details .joyn_messagePreview-list-ingress {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 14px;
}

.joyn_messagePreview .joyn_messagePreview-url {
  width: 100%;
  min-height: 500px;
  overflow: hidden;
  margin-bottom: -5px;
}

.joyn_cardListPreview {
  background-color: whitesmoke;
}

.joyn_cardListPreview .joyn_cardListPreview_otherCard {
  height: 83px;
  border-radius: 8px;
  background-color: lightGrey;
  padding: 18px;
  display: flex;
  align-items: center;
  box-shadow: none;
  margin-bottom: 8px;
}

.joyn_cardListPreview .joyn_cardListPreview_providerCard {
  height: 83px;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  align-items: center;
  box-shadow: none;
  margin-bottom: 8px;
}

.joyn_cardListPreview .joyn_cardListPreview_providerCard img {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background-color: lightGrey;
}

.joyn_cardListPreview .joyn_cardListPreview_providerCard div {
  text-transform: uppercase;
  padding-left: 18px;
  font-family: 'open sans';
  font-weight: 600;
  color: white;
}

.joyn_testMessage-container {
  margin-left: -30px;
  margin-right: -30px;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: -20px;
  clear: both;
}

.joyn_testMessage-container .joyn_testMessage-confirmationLeft {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 15px;
}

.joyn_testMessage-container .joyn_testMessage-confirmationLeft img {
  margin-right: 35px;
  height: 70px;
  width: 70px;
}

.joyn_testMessage-container .joyn_testMessage-confirmationRight {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  flex-direction: row;
}

.joyn_messageSummary-img {
  width: 100%;
}

.joyn_messageImgEdit-preview {
  max-width: 175px;
  margin-bottom: 20px;
}

.joyn_messageSendConfirmation-img {
  height: 100px;
}

.joyn_setupStepHeader {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  min-height: 70px;
  display: flex;
}

.joyn_setupStepHeader .joyn_setupStepHeader-title {
  flex: 2;
  display: flex;
  align-items: center;
}

.joyn_setupStepHeader .joyn_setupStepHeader-title .joyn_h2 {
  margin: 0;
}

.joyn_setupStepHeader .joyn_setupStepHeader-status {
  flex: 3;
  display: flex;
  align-items: center;
}

.joyn_setupStepHeader .joyn_setupStepHeader-action {
  flex: 1;
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
}

.joyn_setupCardHeader {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  min-height: 30px;
  display: flex;
}

.joyn_setupCardHeader .joyn_setupCardHeader-icon {
  max-height: 40px;
  max-width: 40px;
  flex: 1;
  display: flex;
  align-items: center;
}

.joyn_setupCardHeader .joyn_setupCardHeader-title {
  max-height: 40px;
  flex: 4;
  display: flex;
  align-items: center;
}

.joyn_setupCardHeader .joyn_setupCardHeader-action {
  max-height: 30px;
  flex: 2;
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
}

.joyn_promotionPreview {
  background-color: whitesmoke;
  padding-bottom: 10px;
}

.joyn_promotionPreview > img {
  width: 100%;
}

.joyn_promotionPreview .joyn_promotionPreview-img {
  position: relative;
}

.joyn_promotionPreview .joyn_promotionPreview-img img {
  width: 100%;
  height: auto;
}

.joyn_promotionPreview .joyn_promotionPreview-img .joyn_promotionPreview-img-logo {
  position: absolute;
  top: 19%;
  left: 33.33%;
  height: auto;
  width: 33.33%;
  border-radius: 50%;
  overflow: hidden;
}

.joyn_promotionPreview .joyn_promotionPreview-img .joyn_promotionPreview-img-logo img {
  width: 100%;
  height: auto;
}

.joyn_promotionPreview .joyn_promotionPreview-img .joyn_promotionPreview-img-logo.initial {
  top: 20px;
  position: relative;
}

.joyn_promotionPreview .joyn_promotionPreview-body {
  position: relative;
  max-height: 55px;
  overflow: hidden;
  margin-bottom: 0;
  padding-left: 10px;
  padding-right: 10px;
}

.joyn_promotionPreview .joyn_promotionPreview-body > div {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 30px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, whitesmoke 100%);
}

.joyn_promotionPreview .joyn_promotionPreview-readMoreBtn {
  background-color: #FFFFFF;
  position: relative;
  left: 50%;
  top: -10px;
  margin-left: -45px;
  border: 1px solid #c2c2c2;
  height: 30px;
  width: 90px;
  text-transform: none;
  font-size: 13px;
  padding-top: 5px;
  padding-left: 10px;
  font-weight: 400;
}

.joyn_promotionPreview .joyn_promotionPreview-benefitInfo {
  background-color: #efefef;
  height: 120px;
  border-radius: 4px;
  text-align: center;
  padding-top: 40px;
}

.joyn_promotionPreview .joyn_promotionPreview-benefit {
  background-color: #fff;
  border-radius: 4px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 15px;
  padding-right: 35px;
  margin-bottom: 5px;
  position: relative;
}

.joyn_promotionPreview .joyn_promotionPreview-benefit img {
  position: absolute;
  right: 13px;
  top: 50%;
  height: 13px;
  margin-top: -6px;
}

.joyn_promotionPreview .joyn_promotionPreview-benefit .joyn_promotionPreview-benefit-title {
  font-size: 14px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.joyn_promotionPreview .joyn_promotionPreview-benefit .joyn_promotionPreview-benefit-body {
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.joyn_promotionPreview .joyn_promotionPreview-signupBtn {
  border-radius: 5px;
  border: 1px solid #ff4c3c;
  color: #ff4c3c;
  background-color: #FFFFFF;
  height: 45px;
  padding-top: 10px;
  font-size: 16px;
}

.joyn_promotionPreview .joyn_promotionPreview-existingBtn {
  border-radius: 5px;
  background-color: #ff4c3c;
  color: #FFFFFF;
  height: 45px;
  margin-bottom: 10px;
  padding-top: 10px;
  font-size: 16px;
}

.joyn_fieldPreview_profileHeader {
  font-size: 18px;
  font-weight: bold;
}

.joyn_fieldPreview_addPicture {
  width: 49%;
  display: inline-block;
  padding: 5px;
}

.joyn_fieldPreview_addPicture .joyn_fieldPreview_addPicture_box {
  background-color: #c1c1c1;
  height: 90px;
  border-radius: 4px;
  text-align: center;
  padding-top: 20px;
  color: #444444;
  font-weight: bold;
}

.joyn_fieldPreview_addPicture .joyn_fieldPreview_addPicture_box .joyn_fieldPreview_addPicture_icon {
  color: #fff;
  font-size: 30px;
}

.joyn_fieldPreview_label {
  margin-bottom: 5px;
  font-size: 13px;
  color: #444444;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
}

.joyn_fieldPreview_textInput {
  width: 100%;
  height: 45px;
  border: 1px solid #c1c1c1;
  background-color: white;
  border-radius: 3px;
  margin-bottom: 15px;
  position: relative;
}

.joyn_fieldPreview_optionsLabel {
  text-align: center;
  text-transform: uppercase;
  padding-top: 20px;
  padding-bottom: 15px;
}

.joyn_fieldPreview_option_checkbox {
  position: absolute;
  right: 0;
  top: 5px;
  border: 2px solid #c1c1c1;
  width: 16px;
  height: 16px;
}

.joyn_fieldPreview_caret {
  border-width: 4px;
  border-style: solid;
  border-right: 4px solid transparent;
  border-color: black transparent transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  right: 10px;
}

.joyn_fieldPreview_termsAndConsents {
  height: 100px;
  background-color: lightgray;
  padding-top: 30px;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 40px;
  margin-bottom: 10px;
}

.joyn_fieldPreview_option_radio {
  position: absolute;
  right: 0;
  top: 5px;
  border: 2px solid #c1c1c1;
  width: 16px;
  height: 16px;
  border-radius: 8px;
}

.joyn_fieldPreview_option {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
}

.joyn_table-header {
  font-size: 18px;
  color: #252525;
  font-family: "open sans";
  font-weight: 600;
  margin-top: 25px;
}

.joyn_box-noPad .joyn_table-clean tbody tr:last-child {
  border-bottom: 0;
}

.joyn_box-noPad .joyn_table-clean tbody tr:first-child {
  border-top: 0;
}

.joyn_table-clean {
  width: 100%;
  overflow: hidden;
  table-layout: fixed;
}

.joyn_table-clean.joyn_table-darkHeader thead tr {
  height: 50px;
  background-color: gray;
  border-radius: 5px 5px 0 0;
  color: #ffff;
  margin-right: 0px;
}

.joyn_table-clean.joyn_table-darkHeader tbody tr {
  min-height: 40px;
}

.joyn_table-clean.joyn_table-clean--largeRows tr {
  min-height: 55px;
}

.joyn_table-clean tr {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.joyn_table-clean tr td, .joyn_table-clean tr th {
  flex: 2;
  display: flex;
  align-items: center;
  min-width: 0;
}

.joyn_table-clean tr .joyn_ellipsisText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 50px;
}

.joyn_table-clean .joyn_p,
.joyn_table-clean .joyn_p-title {
  margin-bottom: 0;
}

.joyn_table-clean .joyn_table-img {
  max-height: 30px;
  max-width: 30px;
  margin: 10px;
  margin-left: 15px;
  margin-right: 15px;
}

.joyn_table-clean .joyn_table-img img {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  overflow: hidden;
}

.joyn_table-clean .joyn_table-checkbox {
  max-height: 30px;
  max-width: 30px;
  margin-top: 10px;
  margin-left: 15px;
}

.joyn_table-clean .joyn_table-benefit-icon {
  max-height: 30px;
  max-width: 30px;
  margin-top: 10px;
}

.joyn_table-clean .joyn_table-benefit-text {
  max-height: 30px;
  max-width: 230px;
  margin-top: 10px;
  font-size: 14px;
  color: #252525;
  font-family: "open sans";
  font-weight: 600;
}

.joyn_table-clean .joyn_table-benefit-type {
  max-height: 30px;
  max-width: 110px;
  margin-top: 10px;
}

.joyn_table-clean .joyn_table-multiLine {
  flex-direction: row;
  align-items: center;
}

.joyn_table-clean .joyn_table-multiLine > div {
  width: 100%;
}

.joyn_table-clean .joyn_table-imgLarge {
  flex: 2;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  max-width: 70px;
  overflow: hidden;
  border-radius: 5px;
}

.joyn_table-clean .joyn_table-imgLarge img {
  margin-left: -50%;
  height: 70px;
}

.joyn_table-clean .joyn_table-icon {
  max-height: 30px;
  max-width: 30px;
  margin: 10px;
  margin-left: 20px;
  font-size: 16px;
  margin-right: 0;
}

.joyn_table-clean .joyn_table-clickableIndicator {
  color: #CFD2D5;
  max-width: 20px;
}

.joyn_table-clean tbody tr {
  border-bottom: 2px solid #EFEFEF;
  border-left: 2px solid #EFEFEF;
  border-right: 2px solid #EFEFEF;
}

.joyn_box-noPad .joyn_table-clean tbody tr {
  border-left: none;
  border-right: none;
}

.joyn_table-clean tbody tr:first-child {
  border-top: 2px solid #EFEFEF;
}

.joyn_table-clean.joyn_table-clickable tbody tr:hover {
  background-color: #F1F9F9;
  cursor: pointer;
}

.joyn_table-clean .joyn_table-statistics {
  max-width: 260px;
}

.joyn_table-clean .joyn_table-status {
  max-width: 150px;
}

.joyn_table-clean .joyn_table-shortInfo {
  max-width: 120px;
}

.joyn_table-clean .joyn_table-info {
  max-width: 180px;
}

.joyn_table-clean .joyn_table-info .joyn_table-infoIcon {
  height: 28px;
  width: 28px;
  margin-right: 10px;
}

.joyn_table-clean .joyn_table-info .joyn_table-infoIcon img {
  max-height: 28px;
  max-width: 28px;
}

.joyn_table-clean .joyn_table-info .joyn_table-infoText {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: start;
  font-size: 12px;
}

.joyn_table-clean .joyn_table-tile-info {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38;
  align-items: right;
}

.joyn_table-clean .joyn_table-tile-status {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38;
  max-width: 100px;
  color: #b2b7b9;
}

.joyn_table-clean .joyn_table-import-error-row {
  min-height: 40px;
}

.joyn_table-clean .joyn_table-import-error-row-column {
  max-width: 75px;
}

.joyn_table-clean .joyn_table-email {
  max-width: 220px;
}

.joyn_table-benefits .ui-sortable-placeholder {
  height: 92px;
  background-color: #EFEFEF;
}

.joyn_table-benefits tr {
  background-color: #FFFFFF;
}

.joyn_table-benefits .joyn_table-clickablecol:hover {
  background-color: #F1F9F9;
  cursor: pointer;
}

.joyn_table-benefits .joyn_table-dragColumn {
  max-width: 64px;
  border-left: 1px solid #EFEFEF;
  padding-left: 28px;
  font-size: 14px;
  cursor: grab;
  background-color: #FAFAFA;
}

.expandable-content.ng-hide {
  max-height: 0;
  transition: max-height 0.45s ease;
  overflow: hidden;
  position: relative;
}

.expandable-content {
  max-height: 141px;
  transition: max-height 0.45s ease;
  overflow: hidden;
  position: relative;
}

.expandable-content.ng-hide-remove,
.expandable-content.ng-hide-add {
  /* remember, the .hg-hide class is added to element
    when the active class is added causing it to appear
    as hidden. Therefore set the styling to display=block
    so that the hide animation is visible */
  display: block !important;
}

.expandable-content.ng-hide-add {
  animation-name: hide;
  -webkit-animation-name: hide;
  animation-duration: .5s;
  -webkit-animation-duration: .5s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
}

.expandable-content.ng-hide-remove {
  animation-name: show;
  -webkit-animation-name: show;
  animation-duration: .5s;
  -webkit-animation-duration: .5s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
}

fieldset.payment-type-disabled, fieldset.pincode-disabled {
  color: #999999;
}

.file-drop-area {
  border: dashed 2px #28A6DE;
  padding: 20px;
  text-align: center;
}

.file-drop-area .nv-file-over {
  border: dashed 10px #28A6DE;
}

.payment-table > tbody > tr:nth-of-type(odd) {
  background-color: #f4f4f4;
}

.texts-table th.textId {
  width: 2%;
}

.texts-table th.key {
  width: 10%;
}

.texts-table th.lang {
  width: 5%;
}

.texts-table th.text {
  width: 53%;
}

.texts-table th.edit {
  width: 20%;
}

.texts-table tr.editMode {
  background-color: #f4f4f4;
  color: #999;
}

.texts-table tr.editMode input {
  background-color: #f4f4f4;
}

.texts-table th.nopad, .texts-table td.nopad {
  padding: 0px;
}

.texts-table th.p4, .texts-table td.p4 {
  padding: 4px;
}

.texts-table span.glyphicon {
  font-size: 16px;
}

.texts-table span.failuresave {
  color: #E64D35;
}

.texts-table span.successfulsave {
  color: #7ECE39;
}

.texts-table span.warning {
  color: #FF9200;
}

.company-filter {
  min-width: 200px;
}

.min-search-filter {
  min-width: 200px;
}

.content-tab-payment {
  border: 1px solid #d6d6d6;
  background: #FFFFFF;
  border-top: none !important;
  padding-top: 20px;
}

.nav-panel-payment {
  background: #FFFFFF;
  padding: 10px 0 0 10px;
  text-align: right;
}

.short-button-payment {
  padding-right: 20px;
  padding-left: 20px;
}

.upload-images {
  max-height: 500px;
  overflow-x: auto;
}

/* Dialog service advanced settings animation */
#advanced-settings.advanced-show-hide {
  opacity: 1;
}

#advanced-settings.advanced-show-hide.ng-hide-add,
#advanced-settings.advanced-show-hide.ng-hide-remove {
  transition: all linear 0.4s;
}

#advanced-settings.advanced-show-hide.ng-hide {
  line-height: 0;
  opacity: 0;
}

h2.advancedsettingsswitch {
  font-size: 16px;
}

.search-title {
  color: #28A6DE;
  font-size: 18px;
  padding: 12px;
  text-align: center;
}

.transaction-details {
  border-bottom: 1px solid #D6D6D6;
  padding: 8px 15px;
}

.all-details .transaction-details:first-child {
  border-top: 1px solid #D6D6D6;
}

.all-details .transaction-details:nth-of-type(even) {
  background: #FFFFFF;
}

.all-details .transaction-details:nth-of-type(odd) {
  background: #F9F9F9;
}

.transaction-status {
  color: #28A6DE;
}

.sendings-checkbox {
  padding-top: 30px;
}

.label-sendings-checkbox, .label-template-checkbox {
  padding-top: 14px;
  padding-left: 4px;
}

.sendings-drop-area {
  height: 160px;
  padding-top: 55px;
}

.button-content {
  padding-left: 5px;
  font-size: 14px;
  font-family: "ApexNew-Book", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.inputs-inline-align {
  display: inline-block;
  background: #f3f4f4 !important;
}

.pre-transaction {
  font-size: 16px;
}

.total-sent-period {
  font-size: 18px;
  line-height: 1.8;
  color: #28A6DE;
  padding-right: 30px;
}

.link-url {
  text-decoration: underline;
  color: #28A6DE;
}

.custom-properties {
  background: #f3f4f4 !important;
  padding: 15px;
}

.chart-legend-header {
  font-size: x-small;
}

.chart-legend-row {
  font-size: x-small;
}

.icon-color-green {
  color: green;
}

.icon-color-red {
  color: darkred;
}

.icon-color-gray {
  color: gray;
}

.table-overflow {
  overflow-x: auto;
}

.h3-config-setup {
  border: 1px #EFEFEF solid;
  background-color: #EFEFEF;
  margin-top: 15px;
}

@media (min-width: 680px) {
  .config-td-max60 {
    max-width: 100%;
  }
  .config-span-overflow-handled {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

a[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #FFFFFF;
  position: absolute;
  left: 10px;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #28A6DE;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
}

.pin-font *, .template-label-font {
  font-size: 14px;
}

.payment-status {
  max-width: 65px;
}

.btn-custom {
  min-width: 150px;
}

.payment-choice__selection--border-top {
  border-top: 1px solid #D6D6D6;
}

.payment-choice__selection--border-bottom {
  border-bottom: 1px solid #D6D6D6;
}

.payment-choice .payment-choice__selection {
  width: 100%;
  margin: 0;
}

.payment-choice .payment-choice__selection .payment-choice__select-icon {
  padding: 13px 15px;
  display: block;
  color: #337AB7;
  cursor: pointer;
  background: url("../../../img/arrow-rightGrey.svg") no-repeat;
  background-position: right 15px center;
}

.payment-choice .payment-choice__selection input {
  position: absolute;
  display: none;
}

.payment-choice input + .payment-choice__select {
  background: #FFFFFF;
}

.payment-choice input:checked + .payment-choice__select-icon {
  background-color: #F5F5F5;
  color: #555555;
  background-image: url("../../../img/arrow-rightDarkGrey.svg");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.payment-choice input:hover + .payment-choice__select {
  color: #555555;
  background-image: url("../../../img/arrow-rightDarkGrey.svg");
}

.payment-right-arrow {
  background: url("../../../img/arrow-rightGrey.svg") no-repeat;
  background-position: right 15px center;
}

.payment-accordion-label {
  background: #F5F5F5;
  margin: -10px -15px;
  padding: 13px 15px;
}

.payment-sub-account {
  font-size: 16px;
  padding-top: 2px;
}

.invalid-control {
  background-color: #e64d35;
  color: #fff;
}

.templateIframe {
  height: 95%;
  width: 100%;
}

.templateIframeSpinner {
  height: 420px;
  border: 1px solid #e5e6e7;
  padding: 10px;
}

span.selectedLang > span, span.lang-icon:hover {
  -webkit-box-shadow: inset 2px 3px 11px #cfcfcf;
  -moz-box-shadow: inset 2px 3px 11px #cfcfcf;
  -ms-box-shadow: inset 2px 3px 11px #cfcfcf;
  box-shadow: inset 2px 3px 11px #cfcfcf;
}

span.selectedLang > span, span.lang-icon:hover {
  background-color: #EFEFEF !important;
}

.inline-buttons {
  display: inline-block;
}

.single-sending-preview {
  height: 768px;
  padding: 0;
  overflow: hidden;
}

.single-sending-preview .templateIframe {
  -ms-zoom: 0.6;
  -ms-transform-origin: 0 0;
  -moz-transform: scale(0.6);
  -moz-transform-origin: 0px 50px;
  -o-transform: scale(0.6);
  -o-transform-origin: 0px 50px;
  -webkit-transform: scale(0.6);
  -webkit-transform-origin: 0 0;
  width: 720px;
  height: 1280px;
  overflow: hidden;
}

.template-text-preview {
  height: 420px;
}

.speech-bubble {
  position: relative;
  background: #00aabb;
  color: white;
  border-radius: .4em;
  padding: 15px;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 47px solid transparent;
  border-top-color: #00aabb;
  border-bottom: 0;
  border-left: 0;
  margin-left: -23.5px;
  margin-bottom: -47px;
}

.fa-icon-button {
  border: none;
  padding: 0;
  background: none;
}

.fa-icon-button:enabled {
  cursor: pointer;
}

.fa-icon-button:disabled {
  cursor: not-allowed;
}

.font-large {
  font-size: larger;
}

i[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #FFFFFF;
  position: absolute;
  left: 10px;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #28A6DE;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
}

.multilevelpushmenu_wrapper {
  position: relative;
  padding: 0;
  margin: 0;
}

.multilevelpushmenu_wrapper .levelHolderClass {
  position: absolute;
  top: 0;
  width: auto;
  min-height: 100%;
  /*overflow: hidden;*/
  font-family: 'Open Sans Regular', sans-serif;
  font-style: normal;
  font-size: 1em;
  background: transparent;
  zoom: 1;
}

.multilevelpushmenu_wrapper .multilevelpushmenu_inactive {
  background: transparent;
}

.multilevelpushmenu_wrapper h2 {
  padding: 0 .4em 8px .8em;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.3em;
  color: #fff;
  background-color: #43434a;
}

.multilevelpushmenu_wrapper ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.multilevelpushmenu_wrapper ul li {
  cursor: pointer;
  border-top: 1px solid #464543;
}

.multilevelpushmenu_wrapper ul li a {
  padding: .9em .5em .5em .5em;
}

.multilevelpushmenu_wrapper ul li a .active {
  background-color: #1DB0E1;
}

.submenu-active {
  background-color: #1DB0E1;
}

.multilevelpushmenu_wrapper ul li:last-child {
  border-bottom: 1px solid #464543;
}

.multilevelpushmenu_wrapper ul li a:hover {
  background-color: #222121;
}

.multilevelpushmenu_wrapper a {
  display: block;
  padding: .2em .2em;
  overflow: hidden;
  font-size: 1.13em;
  line-height: 1.4em;
  color: #efefef;
  text-decoration: none;
  outline: none;
  font-weight: 300;
}

.multilevelpushmenu_wrapper a:hover {
  color: #ffe;
}

.multilevelpushmenu_wrapper .backItemClass {
  display: block;
  padding: .7em .3em .3em .3em;
  border-top: 1px solid #464543;
}

.multilevelpushmenu_wrapper .backItemClass .blue {
  color: #32dbff;
}

.multilevelpushmenu_wrapper .invisible {
  visibility: hidden;
}

.multilevelpushmenu_wrapper .visible {
  visibility: visible;
}

.multilevelpushmenu_wrapper .cursorPointer {
  cursor: pointer;
}

.multilevelpushmenu_wrapper.ltr .levelHolderClass {
  left: 0;
  margin-left: 0;
}

.multilevelpushmenu_wrapper.ltr .iconSpacing {
  padding: 0 .5em 0 0;
}

.multilevelpushmenu_wrapper.ltr .itemIcon {
  float: right;
}

.multilevelpushmenu_wrapper.ltr .floatRight {
  float: right;
  opacity: 0.5;
  margin-right: 10px;
}

.multilevelpushmenu_wrapper.ltr .floatLeft {
  float: left;
  opacity: 0.35;
  font-size: 18px;
}

.multilevelpushmenu_wrapper.rtl {
  right: 0;
  text-align: right;
}

.multilevelpushmenu_wrapper.rtl .levelHolderClass {
  right: 0;
  margin-right: 0;
}

.multilevelpushmenu_wrapper.rtl .multilevelpushmenu_collapse {
  margin-right: -225px;
}

.multilevelpushmenu_wrapper.rtl .iconSpacing {
  padding: 0 0 0 .4em;
}

.multilevelpushmenu_wrapper.rtl .floatRight {
  float: left;
}

.multilevelpushmenu_wrapper.rtl .floatLeft {
  float: right;
}

.multilevelpushmenu_wrapper .item-active {
  background-color: #1DB0E1;
}

.multilevelpushmenu_wrapper .item-active a {
  color: #ffffff;
  opacity: 0.97;
}

.multilevelpushmenu_wrapper .icon-width {
  width: 22px;
}

@charset "UTF-8";
.header-text {
  font-weight: 300;
  font-size: 35px;
  margin-bottom: 30px;
}

.user-profile-img {
  width: 100px;
  height: 100px;
  border: 2px solid white;
  border-radius: 50%;
  text-transform: uppercase;
  text-align: center;
  font-size: 148%;
  position: relative;
  overflow: hidden;
  margin: 10px auto;
}

.msg-positions {
  display: contents;
}

.user-profile-img img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

.user-profile-img .img-circle {
  border-radius: 0;
}

.msg-block {
  margin-top: 5px;
}

.msg-error {
  color: #F00;
  font-size: 14px;
}

.heading {
  margin-top: 35px;
  font-weight: 600;
  font-size: 17px;
}

.not-primary-account-warning {
  position: absolute;
}

hr {
  margin-top: 5px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #bdbdbd;
}

.resetPass {
  background-color: #F5F5F5;
  padding: 1px 5px;
  margin-top: 15px;
}

.checkbox {
  margin-left: 10px;
}

.form-button-text {
  text-align: center;
}

.form-button-text.link {
  color: #EE1212;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

span.currentLang, span.currentLang:hover {
  -webkit-box-shadow: inset 2px 3px 11px #cfcfcf;
     -moz-box-shadow: inset 2px 3px 11px #cfcfcf;
      -ms-box-shadow:  inset 2px 3px 11px #cfcfcf;
}

span.currentLang {
  background-color: #eeeeee !important;
}

span.lang-icon {
  display: inline-block;
  height: 35px;
  width: 80px;
  margin-top: 1px;
  margin-bottom: 4px;
  margin-left: 5px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-top: 5px;
  font-size: 17px;
  padding-left: 40px;
  text-transform: uppercase;
}

span.lang-icon:hover {
  border-color: #0e9aef;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

span.lang-fr {
  background-image: url("/img/flags/fr.svg");
  background-color: #FFFFFF;
  background-size: 27%;
  background-repeat: no-repeat;
  background-position: 14px center;
}

span.lang-bg {
  background-image: url("/img/flags/bg.svg");
  background-color: #FFFFFF;
  background-size: 27%;
  background-repeat: no-repeat;
  background-position: 14px center;
}

span.lang-no {
  background: url("/img/flags/no.svg");
  background-color: #FFFFFF;
  background-size: 27%;
  background-repeat: no-repeat;
  background-position: 14px center;
}

span.lang-dk {
  background: url("/img/flags/dk.svg");
  background-color: #FFFFFF;
  background-size: 27%;
  background-repeat: no-repeat;
  background-position: 14px center;
}

span.lang-en {
  background-image: url("/img/flags/gb.svg");
  background-color: #FFFFFF;
  background-size: 27%;
  background-repeat: no-repeat;
  background-position: 14px center;
}

span.lang-se {
  background-image: url("/img/flags/se.svg");
  background-color: #FFFFFF;
  background-size: 27%;
  background-repeat: no-repeat;
  background-position: 14px center;
}

span.lang-de {
  background-image: url("/img/flags/de.svg");
  background-color: #FFFFFF;
  background-size: 27%;
  background-repeat: no-repeat;
  background-position: 14px center;
}

span.lang-fi {
  background-image: url("/img/flags/fi.svg");
  background-color: #FFFFFF;
  background-size: 28%;
  background-repeat: no-repeat;
  background-position: 14px center;
}

span.lang-es {
  background-image: url("/img/flags/es.svg");
  background-color: #FFFFFF;
  background-size: 28%;
  background-repeat: no-repeat;
  background-position: 14px center;
}

.disabled-reset-link {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

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