﻿@font-face {
  font-family: "HN";
  src: url("/Fonts/HelveticaNeue.woff2") format("woff2");
}
@font-face {
  font-family: "HN-Bold";
  src: url("/Fonts/HelveticaNeue-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "HN-Light";
  src: url("/Fonts/HelveticaNeue-Light.woff2") format("woff2");
}
html, body {
  width: 100%;
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  background-color: #29303e;
  color: #fff;
  font-family: HN, Arial, Helvetica, sans-serif;
  position: relative;
}

.debug-running .debug-wrapper {
  background-color: #ff9f00;
  color: #29303e;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.debug-running .debug-wrapper .debug-icon {
  font-size: 42px;
  color: red;
  margin-right: 20px;
}
.debug-running .debug-wrapper .debug-info h1 {
  font-family: HN-Bold, Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 0;
  margin: 0;
}
.debug-running .debug-wrapper .debug-info p {
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: bold;
}
.debug-running .debug-wrapper .debug-info p:last-of-type {
  font-size: 10px;
}

h1 {
  font-family: HN-Bold, Arial, Helvetica, sans-serif;
  font-size: 32px;
}

.apc-amp {
  color: #00d6a3;
}

.page-wrapper {
  margin-top: 30px;
}
.page-wrapper .heading {
  display: flex;
  align-items: center;
  font-family: HN-Bold, Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: bold;
  background-color: #00d6a3;
  color: #fff;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 10px;
  margin-bottom: 30px;
}
.page-wrapper .heading i {
  margin-right: 10px;
}
.page-wrapper .heading .heading-buttons {
  font-size: 12px;
  font-weight: normal;
  margin-left: auto;
}
.page-wrapper .heading .heading-buttons a, .page-wrapper .heading .heading-buttons button {
  display: inline-block;
  transition: 0.1s;
  font-family: HN, Arial, Helvetica, sans-serif;
  text-decoration: none;
  border: 2px #29303e solid;
  background-color: #29303e;
  color: #fff;
  padding: 4px 20px;
  border-radius: 5px;
  margin-right: 5px;
}
.page-wrapper .heading .heading-buttons a i, .page-wrapper .heading .heading-buttons button i {
  margin-right: 4px;
  color: #00d6a3;
}
.page-wrapper .heading .heading-buttons a a:last-of-type, .page-wrapper .heading .heading-buttons button a:last-of-type {
  margin-right: 0;
}
.page-wrapper .heading .heading-buttons a:hover, .page-wrapper .heading .heading-buttons button:hover {
  background-color: #fff;
  color: #29303e;
}
.page-wrapper .heading .heading-buttons a:hover i, .page-wrapper .heading .heading-buttons button:hover i {
  color: #29303e;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "HN-Bold", Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #fff;
  box-sizing: border-box;
  padding: 6px 0px;
  margin-bottom: 20px;
  border-bottom: 2px #00d6a3 solid;
}
.section-heading h1 {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
}
.section-heading h1 i {
  font-size: 24px;
  margin-right: 12px;
}
.section-heading p {
  font-family: HN-Bold, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.section-heading .section-heading-button-block button {
  border-color: #00d6a3;
  background-color: #00d6a3;
  color: #fff;
  padding: 0px 20px 0px 12px;
  font-family: "HN", Arial, Helvetica, sans-serif;
  font-size: 14px;
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  display: inline-block;
  text-decoration: none;
}
.section-heading .section-heading-button-block button i {
  margin-right: 5px;
}
.section-heading .section-heading-button-block button:hover {
  background-color: #fff;
  color: #00d6a3;
}

.minor-heading {
  font-size: 12px;
  font-family: HN-Bold, Arial, Helvetica, sans-serif;
  margin: 20px 0 10px 0;
  border-bottom: 2px #00d6a3 solid;
  padding-bottom: 4px;
}

.list-section-container h5 {
  font-family: HN-Bold, Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.list-section-container .add-item-section {
  display: flex;
  justify-content: space-between;
}
.list-section-container .add-item-section .form-item {
  width: 32%;
}
.list-section-container .add-item-section .form-item input, .list-section-container .add-item-section .form-item select, .list-section-container .add-item-section .form-item button {
  flex-basis: 30%;
  flex-shrink: 0;
  height: 30px;
  font-size: 12px;
  width: 100%;
}

.telephone-number-wrapper {
  width: 100%;
}
.telephone-number-wrapper .form-item {
  margin-bottom: 0;
}
.telephone-number-wrapper .telephone-number-item {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
.telephone-number-wrapper .telephone-number-item .drag-handle {
  cursor: move;
  box-sizing: border-box;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.telephone-number-wrapper .telephone-number-item .drag-handle i {
  font-size: 22px;
}
.telephone-number-wrapper .telephone-number-item .telephone-number {
  flex-basis: 49%;
  flex-shrink: 0;
  flex-grow: 1;
  margin-right: 10px;
  background-color: #94979e;
  padding: 5px 8px;
  border-radius: 4px;
}
.telephone-number-wrapper .telephone-number-item .telephone-number.edit {
  flex-basis: 40%;
}
.telephone-number-wrapper .telephone-number-item .telephone-number-type {
  flex-basis: 49%;
  flex-shrink: 0;
  flex-grow: 1;
  background-color: #94979e;
  padding: 5px 8px;
  border-radius: 4px;
}
.telephone-number-wrapper .telephone-number-item .telephone-number-type.edit {
  flex-basis: 40%;
}
.telephone-number-wrapper .telephone-number-item .list-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-basis: 80px;
}

.email-address-wrapper {
  width: 100%;
}
.email-address-wrapper .form-item {
  margin-bottom: 0;
}
.email-address-wrapper .email-address-item {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
.email-address-wrapper .email-address-item .drag-handle {
  cursor: move;
  box-sizing: border-box;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.email-address-wrapper .email-address-item .drag-handle i {
  font-size: 22px;
}
.email-address-wrapper .email-address-item .email-address {
  flex-basis: 49%;
  flex-shrink: 0;
  flex-grow: 1;
  margin-right: 10px;
  background-color: #94979e;
  padding: 5px 8px;
  border-radius: 4px;
}
.email-address-wrapper .email-address-item .email-address.edit {
  flex-basis: 40%;
}
.email-address-wrapper .email-address-item .email-address a {
  color: #fff;
  text-decoration: none;
}
.email-address-wrapper .email-address-item .email-address a:hover {
  color: #bfc0c5;
}
.email-address-wrapper .email-address-item .email-address-type {
  flex-basis: 49%;
  flex-shrink: 0;
  flex-grow: 1;
  background-color: #94979e;
  padding: 5px 8px;
  border-radius: 4px;
}
.email-address-wrapper .email-address-item .email-address-type.edit {
  flex-basis: 40%;
}
.email-address-wrapper .email-address-item .list-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-basis: 80px;
}

.social-media-wrapper {
  width: 100%;
}
.social-media-wrapper .form-item {
  margin-bottom: 0;
}
.social-media-wrapper .social-media-item {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
.social-media-wrapper .social-media-item .drag-handle {
  cursor: move;
  box-sizing: border-box;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.social-media-wrapper .social-media-item .drag-handle i {
  font-size: 22px;
}
.social-media-wrapper .social-media-item a {
  color: white;
}
.social-media-wrapper .social-media-item .social-type {
  flex-basis: 49%;
  flex-shrink: 0;
  flex-grow: 1;
}
.social-media-wrapper .social-media-item .social-type a {
  display: block;
  text-decoration: none;
  background-color: #94979e;
  padding: 5px 8px;
  border-radius: 4px;
}
.social-media-wrapper .social-media-item .social-type i {
  margin-right: 6px;
}
.social-media-wrapper .social-media-item .social-type.edit {
  flex-basis: 40%;
}
.social-media-wrapper .social-media-item .list-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-basis: 80px;
}

.address-wrapper {
  width: 100%;
}
.address-wrapper .form-item {
  margin-bottom: 0;
}
.address-wrapper .address-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 10px;
}
.address-wrapper .address-item .drag-handle {
  cursor: move;
  box-sizing: border-box;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.address-wrapper .address-item .drag-handle i {
  font-size: 22px;
}
.address-wrapper .address-item .address {
  flex-basis: 100%;
  flex-shrink: 0;
  flex-grow: 1;
  margin-right: 10px;
  background-color: #94979e;
  padding: 5px 8px;
  border-radius: 4px;
}
.address-wrapper .address-item .address span {
  display: block;
  font-size: 14px;
}
.address-wrapper .address-item .address span.label {
  font-size: 16px;
  font-weight: bold;
}
.address-wrapper .address-item .address.edit {
  flex-basis: 40%;
}
.address-wrapper .address-item .list-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-basis: 80px;
}

.contacts-wrapper {
  width: 100%;
}
.contacts-wrapper .form-item {
  margin-bottom: 0;
}
.contacts-wrapper .contact-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 10px;
}
.contacts-wrapper .contact-item .drag-handle {
  cursor: move;
  box-sizing: border-box;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.contacts-wrapper .contact-item .drag-handle i {
  font-size: 22px;
}
.contacts-wrapper .contact-item .contact-detail {
  flex-basis: 100%;
  flex-shrink: 0;
  flex-grow: 1;
  margin-right: 10px;
  background-color: #94979e;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.contacts-wrapper .contact-item .contact-detail a {
  color: #fff;
  text-decoration: none;
}
.contacts-wrapper .contact-item .contact-detail a:hover {
  color: #bfc0c5;
}
.contacts-wrapper .contact-item .contact-detail span {
  display: block;
  font-size: 12px;
}
.contacts-wrapper .contact-item .contact-detail span.label {
  font-size: 16px;
  font-weight: bold;
}
.contacts-wrapper .contact-item .contact-detail.edit {
  flex-basis: 40%;
}
.contacts-wrapper .contact-item .list-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-basis: 80px;
}

.list-buttons {
  font-size: 16px;
  font-weight: normal;
  margin-left: auto;
}
.list-buttons a, .list-buttons button {
  display: inline-block;
  transition: 0.1s;
  font-family: HN, Arial, Helvetica, sans-serif;
  text-decoration: none;
  border: 2px #29303e solid;
  background-color: #696e78;
  color: #fff;
  padding: 4px 8px;
  border-radius: 5px;
  margin-right: 0px;
}
.list-buttons a i, .list-buttons button i {
  margin-right: 0;
  color: #00d6a3;
}
.list-buttons a a:last-of-type, .list-buttons button a:last-of-type {
  margin-right: 0;
}
.list-buttons a:hover, .list-buttons button:hover {
  background-color: #fff;
  color: #29303e;
}
.list-buttons a:hover i, .list-buttons button:hover i {
  color: #29303e;
}

.ajax-container {
  color: #fff;
  font-weight: normal;
  display: none;
  position: fixed;
  bottom: 0px;
  left: 0px;
  border: 2px #444 solid;
  background-color: #00d6a3;
  padding: 20px 20px 10px 20px;
  border-top-right-radius: 20px;
}
.ajax-container #ajaxMessage {
  font-size: 20px;
  font-weight: bold;
}
.ajax-container #ajaxMessageLongRunning {
  display: none;
  font-weight: bold;
  font-size: 18px;
}

.spinner {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 9px solid #fff;
  animation: spinner-bulqg1 0.8s infinite linear alternate, spinner-oaa3wk 1.6s infinite linear;
}

@keyframes spinner-bulqg1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
}
@keyframes spinner-oaa3wk {
  0% {
    transform: scaleY(1) rotate(0deg);
  }
  49.99% {
    transform: scaleY(1) rotate(135deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg);
  }
  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}
@media screen and (min-width: 1950px) {
  p {
    font-size: 22px;
  }
  .section-heading {
    font-size: 28px;
  }
  .section-heading .section-heading-button-block button {
    font-size: 22px;
  }
  .page-wrapper .heading {
    font-size: 34px;
  }
  .page-wrapper .heading .heading-buttons {
    font-size: 20px;
  }
  .list-section-container h5 {
    font-size: 24px;
  }
  .contacts-wrapper, .telephone-number-wrapper {
    font-size: 24px;
  }
  .address-wrapper .address-item .drag-handle i {
    font-size: 24px;
  }
  .address-wrapper .address-item .address span {
    font-size: 22px;
  }
  .address-wrapper .address-item .address span.label {
    font-size: 22px;
  }
  .list-buttons {
    font-size: 24px;
  }
  .ajax-container {
    padding: 40px 40px 40px 40px;
  }
  .ajax-container #ajaxMessage {
    font-size: 34px;
  }
  .ajax-container #ajaxMessageLongRunning {
    font-size: 32px;
  }
}
