/* CSS Document 2.0*/
:root {
  --main-dark: #151922;
  --secondary-dark-text: #62656B;
  --primary-pink: #E93A5E;
  --primary-pink-hover: #ed5373;
  --lightpink: #F9C1CD;
  --dark-grey: #212B36;
  --dark-blue: #0A2C3D;
  --blueish-grey: #7B8290;
  --blueish-dark-grey: #546b77;
  --info-blue: #2D74FF;
  --info-blue-hover: #4986ff;
  --lightblue: #B3CDFF;
  --grey: #959BA6;
  --light-grey: #C4CDD5;
  --very-light-grey: #F4F5F8;
  --darkgrey: #21252F;
  --success-green: #41D37F;
  --green: #43A5A1;
  --lightgreen: #BBDFDD;
  --turquoise: #36D3B5;
  --purple: #7F7AEE;
  --lightpurple: #D1CFF9;
  --orange: #FF7245;
  --red: #FF5E5E;
  --yellow: #FECB6D;
  --lightyellow: #FEE2AD;
  --secondary-blue: #01A3EF;
  --white: #FFFFFF;
  --black: #000000;
}

:root {
  --font-light: "Gordita Light", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  --font-regular: "Gordita", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  --font-medium: "Gordita Medium", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  --font-bold: "Gordita Bold", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
}

@font-face {
  font-family: "Gordita";
  src: url("/2/fonts/Gordita-Regular.eot");
  /* IE9 Compat Modes */
  src: url("/2/fonts/Gordita-Regular.eot?#iefix") format("embedded-opentype"), url("/2/fonts/Gordita-Regular.woff2") format("woff2"), url("/2/fonts/Gordita-Regular.woff") format("woff"), url("/2/fonts/Gordita-Regular.ttf") format("truetype");
  /* Safari, Android, iOS */
}

@font-face {
  font-family: "Gordita Bold";
  src: url("/2/fonts/Gordita-Bold.eot");
  /* IE9 Compat Modes */
  src: url("/2/fonts/Gordita-Bold.eot?#iefix") format("embedded-opentype"), url("/2/fonts/Gordita-Bold.woff2") format("woff2"), url("/2/fonts/Gordita-Bold.woff") format("woff"), url("/2/fonts/Gordita-Bold.ttf") format("truetype");
  /* Safari, Android, iOS */
}

@font-face {
  font-family: "Gordita Medium";
  src: url("/2/fonts/Gordita-Medium.eot");
  /* IE9 Compat Modes */
  src: url("/2/fonts/Gordita-Medium.eot?#iefix") format("embedded-opentype"), url("/2/fonts/Gordita-Medium.woff2") format("woff2"), url("/2/fonts/Gordita-Medium.woff") format("woff"), url("/2/fonts/Gordita-Medium.ttf") format("truetype");
  /* Safari, Android, iOS */
}

@font-face {
  font-family: "Gordita Light";
  src: url("/2/fonts/Gordita-Light.eot");
  /* IE9 Compat Modes */
  src: url("/2/fonts/Gordita-Light.eot?#iefix") format("embedded-opentype"), url("/2/fonts/Gordita-Light.woff2") format("woff2"), url("/2/fonts/Gordita-Light.woff") format("woff"), url("/2/fonts/Gordita-Light.ttf") format("truetype");
  /* Safari, Android, iOS */
}

.font-regular {
  font-family: var(--font-regular);
}

.font-medium {
  font-family: var(--font-medium);
}

.font-bold {
  font-family: var(--font-bold);
}

/**
 * Firefox specific rule
 */
@-moz-document url-prefix() {
  .font-bold, h1, h1 strong, strong {
    font-weight: lighter !important;
  }
}

button {
  border: none;
  outline: none;
}

.btn {
  font-family: var(--font-medium);
  display: block;
  text-align: center;
  background-color: #ed5373;
  border: 1px solid transparent;
  color: #fff;
  width: 100%;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 10px 20px 10px 20px;
  letter-spacing: -0.1px;
  transition: all 250ms ease-in-out;
  text-decoration: none;
}

.btn:hover {
  color: white;
  background-color: #f56b87;
}

.btn.btn-large {
  padding: 1rem;
}

.btn.btn-wide {
  padding: 0.875rem 2.5rem;
}

.btn.btn-turquoise {
  background-color: var(--turquoise);
  color: white;
}

.btn.btn-turquoise:hover {
  background-color: #37D3B5;
}

.btn.btn-info {
  background-color: var(--info-blue);
  color: white;
}

.btn.btn-info:hover {
  background-color: #4685ff;
}

.btn.btn-success {
  background-color: var(--success-green);
  color: white;
}

.btn.btn-success:hover {
  background-color: rgba(65, 211, 127, 0.85);
}

.btn.btn-white {
  background-color: #F7F7F7;
  color: #5A5C64;
  border: 1px solid rgba(10, 44, 61, 0.1);
}

.btn.btn-pink-outline {
  background: #FFFFFF;
  color: var(--primary-pink);
  border: 1px solid var(--primary-pink);
}

.btn.btn-pink-outline:hover {
  background: var(--primary-pink);
  color: white;
}

.btn.btn-grey-outline {
  background-color: #ffffff;
  color: var(--blueish-grey);
  border: 1px solid rgba(33, 37, 47, 0.2);
}

.btn.btn-grey-outline:hover {
  background-color: #ffffff;
  color: var(--blueish-dark-grey);
  border: 1px solid var(--blueish-grey);
}

.btn.btn-blue-outline {
  background-color: #ffffff;
  color: var(--info-blue);
  border: 1px solid var(--info-blue);
}

.btn.btn-blue-outline:hover {
  background: var(--info-blue);
  color: white;
}

.btn-circle-icon {
  font-family: var(--font-medium);
  width: 35px;
  height: 35px;
  background-color: white;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 1px solid rgba(10, 44, 61, 0.1);
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.btn-circle-icon a {
  font-family: var(--font-medium);
}

.btn-circle-icon .tooltip--triangle::after {
  font-family: var(--font-medium);
}

.btn-circle-icon.disabled:hover, .btn-circle-icon button[disabled]:hover, .btn-circle-icon input[disabled]:hover {
  color: #87959e;
  border: 1px solid #87959e;
}

.btn-circle-icon i {
  display: flex;
}

.btn-circle-icon.btn-lg {
  width: 42px;
  height: 42px;
}

.btn-circle-icon.btn-lg i.ico-mail {
  font-size: 1.7rem;
}

.btn-circle-icon.btn-lg i.ico-fast-forward {
  font-size: 1.3rem;
  margin-left: 0.3px;
}

.btn-circle-icon.btn-lg i.ico-show {
  font-size: 1.5rem;
}

.btn-circle-icon.btn-lg i.ico-edit {
  font-size: 1.25rem;
}

.btn-circle-icon.btn-lg i.ico-trash {
  font-size: 1.25rem;
}

.btn-circle-icon.btn-lg.btn-opacity,
.btn-circle-icon.btn-lg.btn-disabled i,
.btn-circle-icon.btn-lg.btn-disabled {
  opacity: 0.5;
}

.btn-circle-icon.btn-circle-pink {
  background-color: #ED5373;
  border: none;
  color: white;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
}

.btn-circle-icon.btn-circle-pink .ico-plus {
  line-height: 0;
  margin: auto;
}

.btn-circle-icon.btn-circle-pink:hover {
  background-color: #f56b87;
}

.btn-circle-icon.border-blue-hover:hover {
  color: #2D74FF;
  border: 1px solid #2D74FF;
  opacity: 1;
}

.btn-circle-icon.border-red-hover:hover {
  color: #FF5E5E;
  border: 1px solid #FF5E5E;
  opacity: 1;
}

.btn-circle-icon.success {
  border: 1px solid #41D37F;
  color: #41D37F;
}

.btn-circle-icon.success:hover {
  background-color: #41D37F;
  color: white;
}

.btn-circle-icon.cancel {
  border: 1px solid #FF5E5E;
  color: #FF5E5E;
}

.btn-circle-icon.cancel:hover {
  background-color: #FF5E5E;
  color: white;
}

.btn-circle-icon i {
  line-height: 1;
}

.btn-circle-icon i.ico-cross {
  margin-top: 2px;
  font-size: 0.75rem;
}

a.btn-circle-icon {
  font-family: "Gordita Medium", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  color: inherit;
  text-decoration: none;
}

.btn-outline {
  font-family: "Gordita Medium", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  font-size: 0.875rem;
  padding: 0.5rem;
  text-decoration: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  transition: all 200ms ease-in-out;
}

.btn-outline i {
  display: flex;
  margin-right: 0.25rem;
  transition: none;
}

.btn-outline.btn-skip {
  border: 1px solid rgba(10, 44, 61, 0.6);
  color: rgba(10, 44, 61, 0.6);
}

.btn-outline.btn-skip:hover {
  background: rgba(10, 44, 61, 0.6);
  color: white;
}

.btn-outline.btn-send-mail {
  border: 1px solid #2D74FF;
  color: #2D74FF;
}

.btn-outline.btn-send-mail:hover {
  background: #2D74FF;
  color: white;
}

.tooltip {
  font-family: "Gordita Medium", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 0.25rem;
  margin-top: -0.7rem;
  z-index: 2;
}

.tooltip svg {
  transform: scale(0.8);
}

@media (min-width: 768px) {
  .tooltip {
    margin-right: 0.25rem;
    margin-top: 0.25rem;
  }

  .tooltip svg {
    transform: scale(1);
  }
}

.tooltip .tooltiptext {
  font-family: "Gordita Medium", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  visibility: hidden;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  width: 150px;
  padding: 7px;
  background-color: var(--main-dark);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: -5px;
  margin-left: -60px;
}

@media (max-width: 640px) {
  .tooltip .tooltiptext {
    margin-left: 0;
  }
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--main-dark) transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*tooltip style */
.tooltip--triangle {
  position: relative;
}

.tooltip--triangle[data-tooltip] {
  cursor: pointer;
}

.tooltip--triangle::after {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  content: attr(data-tooltip);
  padding: 0.5rem;
  top: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-100%);
  transform: translateX(-50%) translateY(-100%);
  background: #21252f;
  color: #fff;
  white-space: pre-wrap;
  z-index: 2;
  border-radius: 4px;
  -webkit-transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  font-size: 0.75rem;
}

.tooltip--triangle.left-tooltip::after {
  left: 0;
  margin-left: -3rem;
}

.tooltip--triangle.right-tooltip::after {
  left: 100%;
}

.tooltip--triangle:hover::after {
  display: block;
  text-align: center;
  opacity: 1;
  visibility: visible;
  min-width: auto;
  width: max-content;
  max-width: 200px;
}

* {
  box-sizing: border-box;
}

.tooltip--left:after {
  top: -7px;
  left: 0;
  -webkit-transform: translateX(-112%) translateY(0);
  transform: translateX(-112%) translateY(0);
}

.tooltip--left:hover:after {
  -webkit-transform: translateX(-110%) translateY(0);
  transform: translateX(-110%) translateY(0);
}

.tooltip--right:after {
  top: -4px;
  left: 100%;
  -webkit-transform: translateX(12%) translateY(0);
  transform: translateX(12%) translateY(0);
}

.tooltip--right:hover:after {
  -webkit-transform: translateX(10%) translateY(0);
  transform: translateX(10%) translateY(0);
}

.tooltip--triangle:before {
  content: "";
  width: 0;
  height: 0;
  border-left: solid 8px transparent;
  border-right: solid 8px transparent;
  border-top: solid 8px #21252f;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  -webkit-transform: translateX(-50%) translateY(-70%);
  transform: translateX(-50%) translateY(-70%);
  top: -7px;
  left: 50%;
  -webkit-transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  z-index: 999;
}

.tooltip--triangle:hover:before {
  display: block;
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1024px) {
  [class^=tooltip]:after {
    -webkit-transform: translateX(-80%) translateY(-100%);
    transform: translateX(-80%) translateY(-100%);
  }
}

@font-face {
  font-family: "better-proposals";
  src: url("/2/fonts/fontastic/better-proposals.eot?v=2");
  src: url("/2/fonts/fontastic/better-proposals.eot?v=2#iefix") format("embedded-opentype"), url("/2/fonts/fontastic/better-proposals.woff?v=2") format("woff"), url("/2/fonts/fontastic/better-proposals.ttf?v=2") format("truetype"), url("/2/fonts/fontastic/better-proposals.svg?v=2#better-proposals") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-ico]:before {
  font-family: "better-proposals" !important;
  content: attr(data-ico);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^=ico-]:before,
[class*=" ico-"]:before {
  font-family: "better-proposals" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico-back-time:before {
  content: "a";
}

.ico-exit:before {
  content: "Q";
}

.ico-external-link:before {
  content: "R";
}

.ico-facebook:before {
  content: "S";
}

.ico-users:before {
  content: "T";
}

.ico-heart-outline:before {
  content: "V";
}

.ico-info-circle-outline:before {
  content: "W";
}

.ico-youtube:before {
  content: "b";
}

.ico-twitter:before {
  content: "c";
}

.ico-locker:before {
  content: "d";
}

.ico-trash:before {
  content: "e";
}

.ico-file-blank:before {
  content: "f";
}

.ico-file-new:before {
  content: "g";
}

.ico-share-outline:before {
  content: "h";
}

.ico-link:before {
  content: "i";
}

.ico-log-out:before {
  content: "l";
}

.ico-user:before {
  content: "m";
}

.ico-add-note:before {
  content: "n";
}

.ico-analytics:before {
  content: "o";
}

.ico-apps:before {
  content: "p";
}

.ico-arrow-left:before {
  content: "q";
}

.ico-attached-file:before {
  content: "r";
}

.ico-attachment:before {
  content: "s";
}

.ico-balance:before {
  content: "t";
}

.ico-bank:before {
  content: "u";
}

.ico-billing-dollar:before {
  content: "v";
}

.ico-billing-eur:before {
  content: "w";
}

.ico-billing-pounds:before {
  content: "x";
}

.ico-blockquote:before {
  content: "y";
}

.ico-blog:before {
  content: "z";
}

.ico-book:before {
  content: "A";
}

.ico-browser-plus:before {
  content: "B";
}

.ico-calendar:before {
  content: "C";
}

.ico-calendar-tick:before {
  content: "D";
}

.ico-camera:before {
  content: "E";
}

.ico-card-reader:before {
  content: "F";
}

.ico-cash-dollar:before {
  content: "G";
}

.ico-cash-eur:before {
  content: "H";
}

.ico-cash-pounds:before {
  content: "I";
}

.ico-categories:before {
  content: "J";
}

.ico-chat:before {
  content: "K";
}

.ico-check:before {
  content: "L";
}

.ico-checklist:before {
  content: "N";
}

.ico-chevron-left:before {
  content: "O";
}

.ico-circle-alert:before {
  content: "P";
}

.ico-circle-check:before {
  content: "X";
}

.ico-circle-disabled:before {
  content: "Y";
}

.ico-circle-info:before {
  content: "Z";
}

.ico-circle-left:before {
  content: "0";
}

.ico-circle-plus:before {
  content: "1";
}

.ico-click:before {
  content: "2";
}

.ico-clock:before {
  content: "3";
}

.ico-code:before {
  content: "4";
}

.ico-confetti:before {
  content: "5";
}

.ico-cross:before {
  content: "6";
}

.ico-customer-plus:before {
  content: "7";
}

.ico-customers:before {
  content: "8";
}

.ico-data-visualization:before {
  content: "9";
}

.ico-delete:before {
  content: "!";
}

.ico-design-tools:before {
  content: '"';
}

.ico-desktop:before {
  content: "#";
}

.ico-dns:before {
  content: "$";
}

.ico-domains:before {
  content: "%";
}

.ico-draft-order:before {
  content: "&";
}

.ico-edit:before {
  content: "'";
}

.ico-email:before {
  content: "(";
}

.ico-exchange:before {
  content: ")";
}

.ico-glasses:before {
  content: "+";
}

.ico-globe:before {
  content: ",";
}

.ico-grammar:before {
  content: "-";
}

.ico-hashtag:before {
  content: ".";
}

.ico-question-circle:before {
  content: "/";
}

.ico-idea:before {
  content: ":";
}

.ico-illustration:before {
  content: ";";
}

.ico-image:before {
  content: "<";
}

.ico-images:before {
  content: "=";
}

.ico-jobs:before {
  content: ">";
}

.ico-key:before {
  content: "?";
}

.ico-label:before {
  content: "@";
}

.ico-landing-page:before {
  content: "[";
}

.ico-legal:before {
  content: "]";
}

.ico-location:before {
  content: "^";
}

.ico-managed-store:before {
  content: "`";
}

.ico-marketing:before {
  content: "{";
}

.ico-mic:before {
  content: "|";
}

.ico-mobile-hamburger:before {
  content: "}";
}

.ico-monotone:before {
  content: "~";
}

.ico-navigation:before {
  content: "\\";
}

.ico-newsletter:before {
  content: "\e000";
}

.ico-note:before {
  content: "\e001";
}

.ico-notification:before {
  content: "\e002";
}

.ico-page-attached:before {
  content: "\e003";
}

.ico-play:before {
  content: "\e004";
}

.ico-play-button:before {
  content: "\e005";
}

.ico-plus:before {
  content: "\e006";
}

.ico-printer:before {
  content: "\e007";
}

.ico-profile-circle:before {
  content: "\e008";
}

.ico-question-mark:before {
  content: "\e009";
}

.ico-recipe:before {
  content: "\e00a";
}

.ico-refresh:before {
  content: "\e00b";
}

.ico-refund:before {
  content: "\e00c";
}

.ico-reports:before {
  content: "\e00d";
}

.ico-risk:before {
  content: "\e00e";
}

.ico-search:before {
  content: "\e00f";
}

.ico-send-email:before {
  content: "\e010";
}

.ico-settings:before {
  content: "\e012";
}

.ico-smile-sad:before {
  content: "\e013";
}

.ico-smiley-happy:before {
  content: "\e014";
}

.ico-smiley-joy:before {
  content: "\e015";
}

.ico-smiley-neutral:before {
  content: "\e016";
}

.ico-social-ad:before {
  content: "\e017";
}

.ico-social-post:before {
  content: "\e018";
}

.ico-star:before {
  content: "\e019";
}

.ico-store:before {
  content: "\e01a";
}

.ico-thumbs-down:before {
  content: "\e01b";
}

.ico-tips:before {
  content: "\e01c";
}

.ico-tools:before {
  content: "\e01d";
}

.ico-undo:before {
  content: "\e01e";
}

.ico-wand:before {
  content: "\e01f";
}

.ico-hide:before {
  content: "\e020";
}

.ico-arrow:before {
  content: "\e021";
}

.ico-copy:before {
  content: "\e022";
}

.ico-move:before {
  content: "\e023";
}

.ico-filter:before {
  content: "\e024";
}

.ico-send:before {
  content: "\e025";
}

.ico-add-image:before {
  content: "\e026";
}

.ico-gift:before {
  content: "\e027";
}

.ico-moon:before {
  content: "\e028";
}

.ico-multiple-tags:before {
  content: "M";
}

.ico-tag-empty:before {
  content: "_";
}

.ico-flag:before {
  content: "*";
}

.ico-file-text:before {
  content: "\e011";
}

.ico-file-minus:before {
  content: "\e02c";
}

.ico-file-sum:before {
  content: "\e029";
}

.ico-file-search-find:before {
  content: "\e02a";
}

.ico-dashboard:before {
  content: "\e02b";
}

.ico-mail-open:before {
  content: "\e02d";
}

.ico-download:before {
  content: "\e02f";
}

.ico-pie-chart-outline:before {
  content: "\e030";
}

.ico-chevron:before {
  content: "j";
}

.ico-tag:before {
  content: "k";
}

.ico-error:before {
  content: "\e031";
}

.ico-show:before {
  content: "\e033";
}

.ico-mail:before {
  content: "\e034";
}

.ico-contract-tag:before {
  content: "\e035";
}

.ico-brochure-tag:before {
  content: "\e036";
}

.ico-statement-of-work-tag:before {
  content: "\e037";
}

.ico-quotes-tag:before {
  content: "\e038";
}

.ico-proposal-tag:before {
  content: "\e039";
}

.ico-sign-off-tag:before {
  content: "\e03a";
}

.ico-simple-file:before {
  content: "\e03b";
}

.ico-info-circle:before {
  content: "U";
}

.ico-credit-card-alt:before {
  content: "\e03c";
}

.ico-folder-download:before {
  content: "\e03d";
}

.ico-folder:before {
  content: "\e03e";
}

.ico-folder-minus:before {
  content: "\e03f";
}

.ico-folder-plus:before {
  content: "\e040";
}

.ico-more-vertiico-cal:before {
  content: "\e041";
}

.ico-more-horizontal:before {
  content: "\e042";
}

.ico-first-order:before {
  content: "\e02e";
}

.ico-chart-up-doc:before {
  content: "\e043";
}

.ico-linkedin:before {
  content: "\e044";
}

.ico-envelope:before {
  content: "\e046";
}

.ico-line-chart-up:before {
  content: "\e045";
}

.ico-fast-forward:before {
  content: "\e032";
}

.ico-loader:before {
  content: "\e047";
}

@font-face {
  font-family: "document-types";
  src: url("../doctypes/new-icons/fonts/icomoon.eot?8ga1f");
  src: url("../doctypes/new-icons/fonts/icomoon.eot?8ga1f#iefix") format("embedded-opentype"), url("../doctypes/new-icons/fonts/icomoon.ttf?8ga1f") format("truetype"), url("../doctypes/new-icons/fonts/icomoon.woff?8ga1f") format("woff"), url("../doctypes/new-icons/fonts/icomoon.svg?8ga1f#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^=docicon-], [class*=" docicon-"] {
  font-family: "document-types" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #526773;
}

.docicon-brochures .path1:before {
  content: "\e900";
}

.docicon-brochures .path2:before {
  content: "\e901";
  margin-left: -1.0537109375em;
}

.docicon-brochures .path3:before {
  content: "\e902";
  margin-left: -1.0537109375em;
}

.docicon-brochures .path4:before {
  content: "\e903";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-brochures, .docicon-brochures [class^=path] {
  color: #199BFA;
}

.docicon-cash-flow .path1:before {
  content: "\e904";
}

.docicon-cash-flow .path2:before {
  content: "\e905";
  margin-left: -1.0537109375em;
}

.docicon-cash-flow .path3:before {
  content: "\e906";
  margin-left: -1.0537109375em;
}

.docicon-cash-flow .path4:before {
  content: "\e907";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-cash-flow, .docicon-cash-flow [class^=path] {
  color: #6779E7;
}

.docicon-contracts .path1:before {
  content: "\e908";
}

.docicon-contracts .path2:before {
  content: "\e909";
  margin-left: -1.072265625em;
}

.docicon-contracts .path3:before {
  content: "\e90a";
  margin-left: -1.072265625em;
}

.docicon-contracts .path4:before {
  content: "\e90b";
  margin-left: -1.072265625em;
}

.docicon-contracts .path5:before {
  content: "\e90c";
  margin-left: -1.072265625em;
  opacity: 0.3;
}

.docicon-contracts, .docicon-contracts [class^=path] {
  color: #AA74E3;
}

.docicon-invoices .path1:before {
  content: "\e90d";
}

.docicon-invoices .path2:before {
  content: "\e90e";
  margin-left: -1.0537109375em;
}

.docicon-invoices .path3:before {
  content: "\e90f";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-invoices, .docicon-invoices [class^=path] {
  color: #1CBBCA;
}

.docicon-job-offer .path1:before {
  content: "\e910";
}

.docicon-job-offer .path2:before {
  content: "\e911";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-job-offer, .docicon-job-offer [class^=path] {
  color: #FE7245;
}

.docicon-letter .path1:before {
  content: "\e912";
}

.docicon-letter .path2:before {
  content: "\e913";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-letter, .docicon-letter [class^=path] {
  color: #199BFA;
}

.docicon-meeting-minutes .path1:before, .docicon-default .path1:before {
  content: "\e914";
}

.docicon-meeting-minutes .path2:before, .docicon-default .path2:before {
  content: "\e915";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-meeting-minutes, .docicon-meeting-minutes [class^=path]{
  color: #21B271;
}
 
.docicon-default, .docicon-default [class^=path]{
  color: #999999;
}

.docicon-proposals .path1:before {
  content: "\e916";
}

.docicon-proposals .path2:before {
  content: "\e917";
  margin-left: -1.0712890625em;
  opacity: 0.3;
}

.docicon-proposals, .docicon-proposals [class^=path] {
  color: #E93A5E;
}

.docicon-quotes .path1:before {
  content: "\e918";
  opacity: 0.3;
}

.docicon-quotes .path2:before {
  content: "\e919";
  margin-left: -1.0537109375em;
}

.docicon-quotes, .docicon-quotes [class^=path] {
  color: #21B271;
}

.docicon-signoff .path1:before {
  content: "\e91a";
}

.docicon-signoff .path2:before {
  content: "\e91b";
  margin-left: -1.0908203125em;
}

.docicon-signoff .path3:before {
  content: "\e91c";
  margin-left: -1.0908203125em;
}

.docicon-signoff .path4:before {
  content: "\e91d";
  margin-left: -1.0908203125em;
  opacity: 0.3;
}

.docicon-signoff, .docicon-signoff [class^=path] {
  color: #1CBBCA;
}

.docicon-statements-of-work .path1:before {
  content: "\e91e";
}

.docicon-statements-of-work .path2:before {
  content: "\e91f";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path3:before {
  content: "\e920";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path4:before {
  content: "\e921";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path5:before {
  content: "\e922";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path6:before {
  content: "\e923";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path7:before {
  content: "\e924";
  margin-left: -1.0908203125em;
  opacity: 0.3;
}

.docicon-statements-of-work, .docicon-statements-of-work [class^=path] {
  color: #6779E7;
}

:root {
  --main-dark: #151922;
  --secondary-dark-text: #62656B;
  --primary-pink: #E93A5E;
  --primary-pink-hover: #ed5373;
  --lightpink: #F9C1CD;
  --dark-grey: #212B36;
  --dark-blue: #0A2C3D;
  --blueish-grey: #7B8290;
  --blueish-dark-grey: #546b77;
  --info-blue: #2D74FF;
  --info-blue-hover: #4986ff;
  --lightblue: #B3CDFF;
  --grey: #959BA6;
  --light-grey: #C4CDD5;
  --very-light-grey: #F4F5F8;
  --darkgrey: #21252F;
  --success-green: #41D37F;
  --green: #43A5A1;
  --lightgreen: #BBDFDD;
  --turquoise: #36D3B5;
  --purple: #7F7AEE;
  --lightpurple: #D1CFF9;
  --orange: #FF7245;
  --red: #FF5E5E;
  --yellow: #FECB6D;
  --lightyellow: #FEE2AD;
  --secondary-blue: #01A3EF;
  --white: #FFFFFF;
  --black: #000000;
}

.header-notification-bell {
  width: 30px;
  height: 30px;
  margin: 20px 0;
  transition: all 0.2s ease;
  z-index: 1;
  cursor: pointer;
  border-radius: 50%;
  background-color: #fff;
  order: 2;
  display: flex;
  position: relative;
}

.header-notification-list {
  /*display: none;*/
  position: absolute;
  height: 0;
  width: 270px;
  opacity: 0;
  visibility: hidden;
  margin-top: 40px;
  margin-left: -220px;
  background-color: #FFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  z-index: -1;
  border: 1px solid #E3E6ED;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  transition: all 0.2s ease-in;
  display: flex;
  flex-direction: column;
}

.header-notification-bell:hover .header-notification-list {
  visibility: visible;
  opacity: 1;
  z-index: 1111;
  height: auto;
}

.header-notification-list:after {
  content: "";
  display: block;
  position: absolute;
  left: 223px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #E3E6ED;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

#header-notification-wrapper {
  order: 2;
  margin-left: 10px;
}

.notifications-wrapper {
  font-family: var(--font-regular);
  font-style: normal;
  font-weight: 200;
  font-size: 12px;
  line-height: 18px;
}

.notifications-wrapper div:last-child {
  border-bottom: 0 !important;
}

.notification-dropdown-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff6cd;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px 1rem;
}

/*.notification-dropdown-text {
	width: 153px;
}*/
.notification-dropdown-text>a {
  width: 100%;
  display: flex;
  font-family: var(--font-medium);
  color: var(--blueish-dark-grey);
  font-size: 0.9rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  transition: all 300ms ease-in-out;
}

.notification-dropdown-read {
  display: flex;
  justify-content: center;
  align-items: start;
  padding-top: 6px;
  cursor: pointer;
}

.notification-dropdown-read .ico-check {
  line-height: 0;
  margin-top: -4px;
  color: #7B8290;
}

.notification-time-prompt {
  display: inline-block;
  color: var(--blueish-dark-grey);
  font-family: var(--font-regular);
  letter-spacing: -0.05px;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.notification-dropdown-new {
  width: 10px;
  height: 10px;
  background-color: var(--info-blue);
  border-radius: 50%;
  border: 2px solid #c8d9ff;
  transition: all 300ms ease-in-out;
}

.notification-dropdown-new.read {
  width: 8px;
  height: 8px;
  background-color: #c8d9ff;
  border: 2px solid transparent;
}

.notification-dropdown-new:hover {
  width: 10px;
  height: 10px;
  border: 2px solid #c8d9ff;
}

.notification-blank {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 4rem;
  font-size: large;
  color: var(--blueish-dark-grey);
}

.notification-blank .clean-icon {
  width: 44px;
  margin-bottom: 1rem;
}

.notification-blank p {
  font-family: var(--font-regular);
  letter-spacing: -0.1px;
}

.notification-count {
  position: absolute;
  background-color: #ED5373;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  left: 1.8rem;
  top: 0.65rem;
  width: auto;
  display: block;
  padding: 0 3px;
  border-radius: 4px;
  line-height: 16px;
  text-align: center;
}

/*.tooltip--triangle::after {
    left: -29px !important;
    min-width: max-content !important;
}*/
.notification-badge {
  font-family: var(--font-medium);
  display: inline-block;
  background: rgba(236, 83, 115, 0.1);
  color: var(--primary-pink);
  padding: 0.15rem 0.4rem;
  margin-right: 0.25rem;
  border-radius: 4px;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: -0.1px;
}

.notification-badge.opened {
  background: rgba(236, 83, 115, 0.1);
  color: var(--primary-pink);
}

.notification-badge.signed {
  background: rgba(45, 116, 255, 0.1);
  color: var(--info-blue);
}

.notification-badge.paid {
  background: rgba(65, 211, 127, 0.12);
  color: #37c172;
}

.notification-badge.forward {
  background: rgba(129, 65, 211, 0.1);
  color: var(--purple);
}

.notification-end-wrapper {
  text-align: center;
  padding: 0 1rem;
}

.notification-end-wrapper img {
  width: 32px;
  margin-top: 1rem;
}

.notification-end-wrapper p {
  width: 100%;
  display: flex;
  font-family: var(--font-medium);
  color: #546B77;
  font-size: 0.9rem;
  transition: all 300ms ease-in-out;
  line-height: 1.5;
  margin-top: 0.5rem;
  letter-spacing: -0.05px;
}

.notification-item {
  border-bottom: 1px solid rgba(227, 230, 237, 0.5);
  padding: 1rem;
}

.notification-item.read .notification-dropdown-text,
.notification-item.read .notification-time-prompt {
  opacity: 0.6;
}

.notification-item.read .notification-badge {
  opacity: 0.5;
}

.notification-item.read .notification-dropdown-new {
  width: 8px;
  height: 8px;
  background-color: #c8d9ff;
  border: 2px solid #c8d9ff;
  transition: all 250ms ease-in-out;
}

.notification-item.read .notification-dropdown-new:hover {
  border: 1px solid var(--info-blue);
}

.notification-item .tooltip--triangle::after {
  left: 0;
  margin-left: -32px;
  letter-spacing: 0;
}

.red-blob {
  position: absolute;
  background-color: #ED5373;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  left: 1.8rem;
  top: 0.65rem;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.7);
  }
}

.menu,
#js-notifications-menu-wrapper {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.menu::-webkit-scrollbar,
#js-notifications-menu-wrapper::-webkit-scrollbar {
  display: none;
}

.transition-second-sidebar {
  /* Rounded sliders */
}

.transition-second-sidebar .toggle-show-unread {
  font-family: var(--font-regular);
  color: var(--main-dark);
  font-size: 0.9rem;
  letter-spacing: 0.05px;
  display: inline-flex;
  align-items: center;
  padding-left: 1rem;
}

.transition-second-sidebar .toggle-show-unread span {
  margin-right: -8px;
}

.transition-second-sidebar .switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 34px;
  transform: scale(0.5);
}

.transition-second-sidebar .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

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

.transition-second-sidebar .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.transition-second-sidebar input:checked+.slider {
  background-color: var(--green);
}

.transition-second-sidebar input:focus+.slider {
  box-shadow: 0 0 1px var(--green);
}

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

.transition-second-sidebar .slider.round {
  border-radius: 34px;
}

.transition-second-sidebar .slider.round:before {
  border-radius: 50%;
}

.notifications-container p.mark-all-read {
  font-family: var(--font-medium);
  padding-left: 1rem;
  font-size: 0.82rem;
  margin-top: 0.25rem;
  text-align: left;
  padding-right: 1rem;
  letter-spacing: -0.05px;
  color: #546b77;
  text-decoration: underline;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(83, 93, 125, 0.1);
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.notifications-container p.mark-all-read:hover {
  color: var(--info-blue);
}

.sidebar {
  background: #21252F;
  color: #FFF;
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
}

.sidebar .subnav-link {
  opacity: 0.6;
  border-left: 6px solid #FFF;
  padding: 5px 10px;
  margin-bottom: 10px;
  color: #FFF;
  font-size: 1.1em;
  transition: all 0.2s ease;
}

.sidebar .subnav-link:hover {
  opacity: 0.8;
}

.sidebar .subnav-link:active {
  opacity: 0.3;
}

.sidebar .subnav-link.active {
  opacity: 1;
}

.sidebar .subnav-link.small {
  font-size: 0.9em;
  margin-left: 20px;
  border-left: 2px solid #FFF;
}

.sidebar .subnav-link.plain {
  border-left: none;
  font-size: 0.9em;
  margin-left: 30px;
}

.sidebar.normal {
  background: #21252F;
}

.sidebar.cards {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  /* future proofing */
  -khtml-border-radius: 3px;
  /* for old Konqueror browsers */
}

.sidebar-label {
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 0.7em;
  text-transform: uppercase;
  opacity: 0.7;
}

.sidebar-time {
  opacity: 1;
  font-weight: 500;
  font-size: 0.9em;
  float: right;
}

.sidebar-currency {
  font-size: 1.5em;
  margin: 15px 5px 0 0;
  float: left;
}

.sidebar-price {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 2em;
  line-height: 1;
  font-family: var(--font-medium);
  font-weight: 500;
  max-width: max-content;
}

.sidebar-price-small {
  font-size: 2.7em;
}

.sidebar-close {
  width: 68px;
  margin-bottom: 10px;
  padding: 10px 30px 10px 30px;
  background-color: #7B8290;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  /* future proofing */
  -khtml-border-radius: 3px;
  opacity: 0.7;
  transition: all 0.2s ease-in-out;
}

.sidebar-close:hover {
  opacity: 1;
}

.sidebar-close:active {
  opacity: 0.3;
}

@media (max-width: 991px) {
  .sidebar-price span {
    font-size: 1.65rem;
  }
}

:root {
  --main-dark: #151922;
  --secondary-dark-text: #62656B;
  --primary-pink: #E93A5E;
  --primary-pink-hover: #ed5373;
  --lightpink: #F9C1CD;
  --dark-grey: #212B36;
  --dark-blue: #0A2C3D;
  --blueish-grey: #7B8290;
  --blueish-dark-grey: #546b77;
  --info-blue: #2D74FF;
  --info-blue-hover: #4986ff;
  --lightblue: #B3CDFF;
  --grey: #959BA6;
  --light-grey: #C4CDD5;
  --very-light-grey: #F4F5F8;
  --darkgrey: #21252F;
  --success-green: #41D37F;
  --green: #43A5A1;
  --lightgreen: #BBDFDD;
  --turquoise: #36D3B5;
  --purple: #7F7AEE;
  --lightpurple: #D1CFF9;
  --orange: #FF7245;
  --red: #FF5E5E;
  --yellow: #FECB6D;
  --lightyellow: #FEE2AD;
  --secondary-blue: #01A3EF;
  --white: #FFFFFF;
  --black: #000000;
}

:root {
  --font-light: "Gordita Light", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  --font-regular: "Gordita", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  --font-medium: "Gordita Medium", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
  --font-bold: "Gordita Bold", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
}

@font-face {
  font-family: "Gordita";
  src: url("/2/fonts/Gordita-Regular.eot");
  /* IE9 Compat Modes */
  src: url("/2/fonts/Gordita-Regular.eot?#iefix") format("embedded-opentype"), url("/2/fonts/Gordita-Regular.woff2") format("woff2"), url("/2/fonts/Gordita-Regular.woff") format("woff"), url("/2/fonts/Gordita-Regular.ttf") format("truetype");
  /* Safari, Android, iOS */
}

@font-face {
  font-family: "Gordita Bold";
  src: url("/2/fonts/Gordita-Bold.eot");
  /* IE9 Compat Modes */
  src: url("/2/fonts/Gordita-Bold.eot?#iefix") format("embedded-opentype"), url("/2/fonts/Gordita-Bold.woff2") format("woff2"), url("/2/fonts/Gordita-Bold.woff") format("woff"), url("/2/fonts/Gordita-Bold.ttf") format("truetype");
  /* Safari, Android, iOS */
}

@font-face {
  font-family: "Gordita Medium";
  src: url("/2/fonts/Gordita-Medium.eot");
  /* IE9 Compat Modes */
  src: url("/2/fonts/Gordita-Medium.eot?#iefix") format("embedded-opentype"), url("/2/fonts/Gordita-Medium.woff2") format("woff2"), url("/2/fonts/Gordita-Medium.woff") format("woff"), url("/2/fonts/Gordita-Medium.ttf") format("truetype");
  /* Safari, Android, iOS */
}

@font-face {
  font-family: "Gordita Light";
  src: url("/2/fonts/Gordita-Light.eot");
  /* IE9 Compat Modes */
  src: url("/2/fonts/Gordita-Light.eot?#iefix") format("embedded-opentype"), url("/2/fonts/Gordita-Light.woff2") format("woff2"), url("/2/fonts/Gordita-Light.woff") format("woff"), url("/2/fonts/Gordita-Light.ttf") format("truetype");
  /* Safari, Android, iOS */
}

.font-regular {
  font-family: var(--font-regular);
}

.font-medium {
  font-family: var(--font-medium);
}

.font-bold {
  font-family: var(--font-bold);
}

/**
 * Firefox specific rule
 */
@-moz-document url-prefix() {
  .font-bold, h1, h1 strong, strong {
    font-weight: lighter !important;
  }
}

.header {
  height: 69px;
  border-bottom: 1px solid rgba(83, 93, 125, 0.1);
}

.header-trial {
  position: fixed;
  top: 0;
  z-index: 13;
  letter-spacing: 0.08px;
}

.sidebar-bp-menu {
  font-family: var(--font-regular);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 280px;
  color: #b3b8d4;
  height: 100vh;
  z-index: 14;
  transition: all 400ms ease-in-out;
}

.sidebar-bp-menu .brand {
  width: 143px;
  height: 37px;
  margin-top: -0.15rem;
  margin-left: 3px;
}

@media (max-width: 990px) {
  .sidebar-bp-menu {
    left: -100%;
  }

  .sidebar-bp-menu.active {
    left: 0;
  }
}

@media (max-width: 413px) {
  .sidebar-bp-menu {
    max-width: 80%;
  }
}

.sidebar-bp-menu .menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  z-index: -1;
}

.sidebar-bp-menu .menu-icon i {
  line-height: 1;
}

.sidebar-bp-menu .sidebar-bp-menu-layout {
  height: 100%;
  width: 280px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
  transition: all 400ms ease-in-out;
}

.sidebar-bp-menu .sidebar-bp-menu-layout.collapsed {
  width: 56px;
  overflow: hidden;
}

.sidebar-bp-menu .sidebar-bp-menu-layout .sidebar-bp-menu-content {
  flex-grow: 1;
  background-color: white;
  width: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(215, 217, 226, 0.64);
  transition: all 400ms ease-in-out;
}

.sidebar-bp-menu .sidebar-bp-menu-layout .sidebar-bp-menu-content.collapsed {
  width: 56px;
}

.sidebar-bp-menu .sidebar-bp-menu-layout .sidebar-bp-menu-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.75rem 0.75rem 0.85rem;
  overflow: visible;
  transition: all 400ms ease-in-out;
  border-bottom: 1px solid rgba(83, 93, 125, 0.1);
}

.sidebar-bp-menu .sidebar-bp-menu-layout .sidebar-bp-menu-header picture {
  padding: 0.75rem 0 0.75rem;
}

.sidebar-bp-menu .menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-bp-menu .menu li.menu-item {
  z-index: 3;
  position: relative;
}

.sidebar-bp-menu .menu li.menu-item a {
  display: flex;
  align-items: center;
  font-family: var(--font-medium);
  font-size: 1rem;
  letter-spacing: -0.1px;
  line-height: 1.2;
  color: var(--blueish-dark-grey);
  text-decoration: none;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  z-index: 4;
}

.sidebar-bp-menu .menu li.menu-item a label {
  font-size: 1rem;
  opacity: 1;
  cursor: pointer;
  width: 100%;
}

.sidebar-bp-menu .menu li.menu-item a label .ico-external-link {
  line-height: 0;
  margin-left: 7px;
  opacity: 0.5;
  font-size: 0.9rem;
}

.sidebar-bp-menu .menu li.menu-item a>span {
  z-index: -1;
  display: flex;
  align-items: center;
}

.sidebar-bp-menu .menu li.menu-item a.active {
  color: var(--info-blue);
}

.sidebar-bp-menu .menu li.menu-item a .menu-title {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  transition: color 0.3s;
}

.sidebar-bp-menu .menu li.menu-item a .menu-icon i {
  font-size: 23px;
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-bp-menu .menu li.menu-item a .menu-icon i.ico-note {
  font-size: 27.5px;
  margin-left: -1px;
}

.sidebar-bp-menu .menu li.menu-item.sub-menu {
  position: relative;
  height: 56px;
  overflow: hidden;
  transition: all 400ms ease-in-out;
}

.sidebar-bp-menu .menu li.menu-item.sub-menu>.sub-menu-list {
  opacity: 0;
  z-index: 13;
  transition: all 400ms ease-in-out;
}

.sidebar-bp-menu .menu li.menu-item.sub-menu>.sub-menu-list a {
  font-family: var(--font-regular);
  padding: 0.65rem;
  margin-left: 1rem;
  cursor: pointer;
  z-index: 1;
  width: calc(100% - 32px);
}

.sidebar-bp-menu .menu li.menu-item.sub-menu>.sub-menu-list a.active {
  background-color: #EAF1FF;
  color: var(--info-blue);
  border-radius: 4px;
}

.sidebar-bp-menu .menu li.menu-item.sub-menu.open .sub-menu-list {
  opacity: 1;
}

.sidebar-bp-menu .menu li.menu-item.sub-menu a {
  justify-content: space-between;
}

.sidebar-bp-menu .menu li.menu-item.sub-menu>a::after {
  content: "";
  right: 0;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  width: 8px;
  height: 8px;
  transform: rotate(-45deg);
  margin-top: -4px;
  margin-right: 16px;
  opacity: 1;
  transition: all 400ms ease-in-out;
}

.sidebar-bp-menu ul.sub-menu {
  padding: 6px 6px 14px 80px;
  margin-top: -10px;
  background: white;
  display: none;
}

.sidebar-bp-menu ul.sub-menu.blank {
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}

.sidebar-bp-menu.collapsed {
  /*.menu .menu-item.sub-menu.open > a {
    color: $blueish-dark-grey !important;
  }*/
}

.sidebar-bp-menu.collapsed .sub-menu-list {
  overflow: hidden !important;
}

.sidebar-bp-menu-content.collapsed .menu .sidebar-bp-menu-header {
  width: 48px;
  overflow: hidden;
}

.sidebar-bp-menu .menu .menu-item.sub-menu.open>a::after {
  transform: rotate(45deg);
}

.sidebar-bp-menu .sidebar-bp-menu-layout.collapsed .menu .menu-item.sub-menu.open.active>a,
.sidebar-bp-menu .menu .menu-item.sub-menu.open>a {
  color: var(--info-blue);
}

.sidebar-bp-menu .sidebar-bp-menu-layout.collapsed .menu .menu-item.sub-menu.open:not(.active)>a {
  color: var(--blueish-dark-grey);
}

.sidebar-bp-menu .sidebar-bp-menu-layout.collapsed .menu-item.sub-menu.active.open {
  background-color: #EAF1FF;
  height: 56px;
  overflow: hidden;
}

.toggle-nav {
  padding: 0 0.5rem;
  margin-top: 2.2rem;
  margin-left: 0.6rem;
  height: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
  border: none;
  outline: none;
  z-index: 9;
  transition: transform 150ms ease-in-out;
}

@media (min-width: 991px) {
  .toggle-nav {
    position: fixed;
  }
}

.toggle-nav .icon-bar {
  display: block;
  width: 24px;
  height: 3px;
  opacity: 1;
  margin-right: 0;
  background-color: var(--main-dark);
  transition: transform 250ms ease-in-out;
}

.toggle-nav .icon-bar.middle-bar {
  margin: 5px 0;
}

.toggle-nav.active .top-bar {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: -6% 10%;
  transform-origin: -6% 10%;
}

.toggle-nav.active .middle-bar {
  opacity: 0;
}

.toggle-nav.active .bottom-bar {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 7% 90%;
  transform-origin: 7% 90%;
}

.header.desktop-hide-small {
  height: 62px;
}

@media (min-width: 991px) {
  .header.desktop-hide-small {
    display: none;
  }
}

.header.desktop-hide-small .container {
  display: flex;
  align-items: center;
}

.sidebar-bp-menu.collapsed {
  width: 56px;
}

.sidebar-bp-menu.collapsed .sidebar-bp-menu-layout .sidebar-bp-menu-header {
  width: 48px;
  overflow: hidden;
}

.sidebar-bp-menu.collapsed .menu:not(.sidebar-menu--second-nav-menu) .menu-item.on-hover ul.sub-menu {
  top: 4px;
  margin-top: 6px;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid rgba(215, 217, 226, 0.64);
  border-top: 0;
  transition: all 0.4s ease;
}

.sidebar-bp-menu.collapsed .menu:not(.sidebar-menu--second-nav-menu) .menu-item.on-hover ul.sub-menu .blank {
  top: 50%;
  transform: translateY(-50%);
}

.sidebar-bp-menu.collapsed .menu:not(.sidebar-menu--second-nav-menu) .menu-item.on-hover ul.sub-menu .link_name {
  font-family: var(--font-medium);
  white-space: nowrap;
  color: var(--main-dark);
  font-size: 0.875rem;
}

.sidebar-bp-menu.collapsed .menu:not(.sidebar-menu--second-nav-menu) li.menu-item a label {
  width: 0;
  opacity: 0;
  z-index: -1;
}

.sidebar-bp-menu.collapsed .menu:not(.sidebar-menu--second-nav-menu) li.menu-item.sub-menu>a::after {
  opacity: 0;
  width: 0;
  border: 0;
}

.sidebar-bp-menu.collapsed .menu:not(.sidebar-menu--second-nav-menu) .menu-item ul.sub-menu {
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  margin-left: 10px;
  padding: 8px 16px;
  border-radius: 6px;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}

.sidebar-bp-menu .toggle-nav .icon-bar {
  background-color: #494C54;
}

.header {
  padding-left: 280px;
  margin-left: 0;
}

@media (min-width: 991px) {
  .header>.container {
    margin-left: 280px;
    width: calc(100% - 280px);
    padding-left: 10px;
  }

  .header>.container.collapsed {
    margin-left: 56px;
    width: calc(100% - 56px);
  }
}

.sidebar-menu--second-nav {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  z-index: 2;
  height: 100%;
  background-color: white;
  overflow: hidden;
  border: 1px solid rgba(215, 217, 226, 0.64);
  border-top: 0;
  border-left: 0;
  transition: all 400ms ease;
}

.sidebar-menu--second-nav.opened {
  left: 56px;
  width: 275px;
  overflow: visible;
}

.sidebar-menu--second-nav .second-nav-title {
  font-family: var(--font-medium);
  padding-left: 1rem;
  font-size: 1.25rem;
  color: var(--main-dark);
  letter-spacing: -0.15px;
  height: 87px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.sidebar-menu--second-nav .second-nav-title i {
  display: flex;
  margin-right: 1rem;
  cursor: pointer;
}

.sidebar-menu--second-nav .second-nav-title i:hover {
  color: var(--info-blue);
}

.sidebar-bp-menu .sidebar-bp-menu-content.collapsed .menu li.menu-item a label {
  width: 0;
  opacity: 0;
  z-index: -1;
}

.sidebar-bp-menu .sidebar-bp-menu-content.collapsed .menu li.menu-item.sub-menu>a::after {
  display: none;
}

.main-content-wrapper {
  display: flex;
  width: 100%;
  padding-bottom: 3rem;
}

.main-content-wrapper .content-wrapper {
  width: 100%;
}

@media (min-width: 991px) {
  .main-content-wrapper .content-wrapper {
    padding-right: calc(1rem + 40px);
    padding-left: calc(40px + 1.25rem);
  }
}

.main-content-wrapper.trial-account {
  padding-top: 50px;
}

@media (min-width: 991px) {
  .main-content-wrapper {
    margin-left: 280px;
    transition: all 400ms ease-in-out;
  }

  .main-content-wrapper.collapsed {
    margin-left: 56px;
  }
}

@media (min-width: 991px) {
  .main-content-wrapper.sidebar-bp-menu-menu--open.collapsed, .main-content-wrapper.sidebar-bp-menu-menu--open {
    margin-left: 330px;
  }
}

/*.sidebar-menu--second-nav .menu li.menu-item.sub-menu > a::after,
.sidebar-menu--second-nav .menu li.menu-item a {
    transition: all 150ms ease-in-out;
}*/
.sidebar-bp-menu .menu li.menu-item>a {
  transition: all 150ms ease-in-out;
}

.sidebar-bp-menu .menu li.sub-menu:not(.open)>a:hover,
.sidebar-bp-menu .menu li.menu-item:not(.active)>a:hover,
.sidebar-bp-menu .menu li.menu-item a:not(.active):hover {
  color: var(--main-dark);
}

.sidebar-bp-menu .menu li.active:not(.open),
.sidebar-bp-menu .menu li.menu-item a.active {
  color: var(--info-blue);
}

.sidebar-bp-menu .menu li.sub-menu.open>a:hover,
.sidebar-bp-menu .menu li.menu-item.active>a:hover,
.sidebar-bp-menu .menu li.menu-item a.active:hover {
  color: var(--info-blue) !important;
}

.sidebar-bp-menu .active-simple {
  background-color: rgba(85, 106, 119, 0.1);
}

.sidebar-bp-menu .menu li.menu-item a.active>span,
.sidebar-bp-menu .menu li.menu-item a.setting-active>span {
  z-index: 1;
}

.sidebar-bp-menu .menu li.menu-item.sub-menu>.sub-menu-list a .settings-item {
  font-family: var(--font-regular);
  color: var(--blueish-dark-grey);
  font-size: 1rem;
  padding: 0;
}

.sidebar-bp-menu.collapsed>.sidebar-bp-menu-layout.collapsed,
.sidebar-bp-menu.collapsed>.sidebar-bp-menu-layout.collapsed>.sidebar-bp-menu-content {
  overflow: visible;
}

.sidebar-bp-menu-layout nav.menu {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar-bp-menu-layout nav.menu.trial-account {
  padding-top: 40px;
}

.sidebar-bp-menu-layout:not(.collapsed) nav.menu {
  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-height: 615px) {
  .sidebar-bp-menu-layout.collapsed nav.menu {
    overflow: auto;
  }
}

.user-profile-wrapper {
  position: relative;
  justify-content: left;
  display: flex;
  margin-bottom: 0.5rem;
  z-index: 3;
}

.user-profile-wrapper img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 100px;
}

/*.sidebar-bp-menu-layout:not(.collapsed) .sidebar-bp-menu .menu li.menu-item.sub-menu > .sub-menu-list {
  height: 100%;
}*/
.sidebar-bp-menu.reveal-sidebar {
  left: 0;
}

@media (max-width: 991px) {
  .hide-lg-mobile {
    display: none;
  }
}

.user-profile-label {
  display: flex;
  align-items: center;
  font-family: var(--font-medium);
  color: var(--blueish-dark-grey);
  font-size: 1rem;
}

.transition-second-sidebar {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: all 400ms ease-in-out;
}

.transition-second-sidebar.open {
  opacity: 1;
  padding: 0;
  height: 100vh;
  overflow: auto;
  transform: translateY(0);
}

.sidebar-bp-menu .sidebar-menu--second-nav-menu .menu-icon i {
  font-size: 18px !important;
}

.sidebar-bp-menu .sidebar-menu--second-nav-menu .menu-icon i.ico-idea {
  margin-top: -6px;
  font-size: 20.5px !important;
}

.sidebar-bp-menu .sidebar-menu--second-nav-menu .menu-icon i.ico-user {
  font-size: 20px !important;
}

.sidebar-bp-menu .sidebar-menu--second-nav-menu .menu-icon {
  padding-left: 10px;
}

.user-profile-wrapper .open-second-link img {
  border: 1.5px solid transparent;
  transition: all 150ms ease-in-out;
}

.user-profile-wrapper .open-second-link.active img {
  border: 1.5px solid var(--info-blue);
}

.sidebar-bp-menu-content.collapsed .menu-item.sub-menu.open {
  height: 56px;
  overflow: hidden;
}

.onboarding-yellowbar .toggle-nav {
  margin-top: 4px;
}

.onboarding-yellowbar .toggle-nav .icon-bar {
  background-color: white;
  margin-right: 0;
}

.sidebar-bp-menu.collapsed .menu li.menu-item.sub-menu {
  overflow: visible;
}

li.menu-item.sub-menu.current-page.open {
  height: 100%;
}

li.menu-item.sub-menu.active.current-page>a {
  color: var(--info-blue);
}

@media (max-width: 990px) {

  /*.settings-frame.sidebar-frame {
    margin-top: 4rem;
  }*/
  .header.desktop-hide-small {
    height: 69.5px;
  }

  .header.desktop-hide-small>.container {
    max-width: 100%;
    padding: 0 1rem;
  }

  .header.desktop-hide-small.mobile-top-banner>.container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .toggle-nav {
    margin-top: 0 !important;
  }
}

.sidebar-old-wrapper {
  width: 23.5%;
  margin-top: 89px;
  margin-right: 2%;
}

.sidebar-old-wrapper a>label,
.sidebar-old-wrapper label {
  color: #7B8290;
  text-decoration: none;
  font-size: 0.9em;
  padding: 5px 10px 5px 40px;
  margin-bottom: 5px;
  transition: all 0.2s ease;
  display: block;
  cursor: pointer;
}

.sidebar-old-wrapper a>label:hover,
.sidebar-old-wrapper label:hover {
  color: #181c25;
}

a.simple-link svg #doc-icon-frame {
  fill: #637381;
  transition: all 200ms ease-in-out;
}

a.simple-link:hover svg #doc-icon-frame {
  fill: var(--primary-pink);
}

a.simple-link.new-doc-link svg path#frame {
  transition: all 200ms ease-in-out;
}

a.simple-link.new-doc-link:hover svg path#frame {
  fill: var(--main-dark);
}


.tabs-wrapper {
  border-radius: 0;
  padding: 0;
  position: relative;
  margin-top: 2.5rem;
  position: relative;
}

.tabs-wrapper::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: var(--info-blue);
}

.tabs-links-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: fit-content;
}

.tabs-wrapper .tab-link {
  font-family: var(--font-medium);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.25px;
  padding: 1rem 1rem 0.85rem 1.1rem;
  transition: all 200ms ease-in-out;
  cursor: pointer;
  background-color: white;
  min-width: 140px;
  flex-basis: fit-content;
  flex-grow: 1;
  min-height: 54px;
  display: inline-block;
  text-align: center;
  color: #74848d;
  border: 1px solid rgba(33, 37, 47, 0.2);
  border-bottom: 1px solid transparent;
  border-radius: 4px;
  margin-top: 0.25rem;
  margin-right: 0.25rem;
  margin-bottom: 0;
}

@media (max-width: 1319px) {
  .tabs-wrapper .tab-link {
    border-bottom: 1px solid rgba(33, 37, 47, 0.2);
  }
}

@media (max-width: 991px) {
  .tabs-wrapper .tab-link {
    border-bottom: 1px solid rgba(33, 37, 47, 0.2);
  }
}

.tabs-wrapper .tab-link:hover {
  background: #fafafa;
}

.tabs-wrapper a.tab-link {
  text-decoration: none !important;
}

@media (min-width: 768px) {
  .tabs-wrapper .tab-link {
    border-radius: 4px 4px 0 0;
    margin-right: 0.25rem;
    margin-top: 0.25rem;
  }
}

.tabs-wrapper .tab-link.active .todo-numb {
  background: #EAF1FF;
  color: var(--info-blue);
}

.tabs-wrapper .tab-link .todo-numb {
  margin-left: 0.25rem;
  display: inline-block;
  border-radius: 100px;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  width: min-content;
  min-width: 24px;
  padding: 0 0.35rem;
  background-color: #E6EAEC;
}

@media (max-width: 640px) {
  .tabs-wrapper .tab-link {
    display: block;
  }
}

.tabs-wrapper .tab-link.active {
  background: var(--info-blue);
  color: white;
  z-index: 2;
  border: 1px solid var(--info-blue);
  border-radius: 4px;
}

@media (min-width: 641px) {
  .tabs-wrapper .tab-link.active {
    border-radius: 4px 4px 0 0;
  }
}

.tab-item {
  display: none;
  padding: 0;
}

.tab-item.active {
  display: block;
}

#mobile-tab-menu{
  display: none;
  background-color: white;
  border-bottom: 1px solid transparent;
  border-radius: 4px;
  border: 1px solid rgba(33, 37, 47, 0.2);
  color: #74848d;
  cursor: pointer;
  flex-basis: fit-content;
  flex-grow: 1;
  font-family: var(--font-medium);
  font-size: 1rem;
  justify-content: space-between;
  letter-spacing: 0;
  line-height: 1.5;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 0.25rem;
  min-height: 54px;
  min-width: 140px;
  padding: 1rem 1rem 0.85rem 1.1rem;
  text-align: center;
  text-transform: capitalize;
  transition: all 200ms ease-in-out;
  width: 100%;
}

#mobile-tab-menu.mobile-open + .tabs-wrapper .tabs-links-wrapper{
  display: flex;
}

#mobile-tab-menu .ico-chevron{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

#mobile-tab-menu.mobile-open .ico-chevron{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  margin-right: -3px;
}

#mobile-tab-menu .toggle-nav{
  display: inline;
  margin: 0;
  position: unset;
}
/* widest left sidebar menu */
@media (max-width: 1140px) {
  .main-content-wrapper.sidebar-bp-menu-menu--open .tabs-wrapper .tabs-links-wrapper {
    flex-direction: column;
    max-width: initial;
    display: none;
  }

  .main-content-wrapper.sidebar-bp-menu-menu--open #mobile-tab-menu {
    display: flex;
  }

  .main-content-wrapper.sidebar-bp-menu-menu--open .tabs-wrapper .tabs-links-wrapper .tab-link {
    margin-right: 0;
  }

  .main-content-wrapper:not(.collapsed) #documents-tabs.tabs-wrapper .tab-link,
  .tabs-wrapper .tab-link{
    padding: 0.5rem 0.5rem 0.45rem 0.6rem;
    min-width: 100px;
    min-height: 44px;
  }
}

@media (max-width: 1362px) {
  .main-content-wrapper:not(.collapsed) #documents-tabs.tabs-wrapper .tab-link{
    padding: 0.5rem 0.5rem 0.45rem 0.6rem;
    min-width: 100px;
    min-height: 44px;
  }
}

/* normal left sidebar menu */
@media (max-width: 748px) {
  .main-content-wrapper:not(.collapsed) .tabs-wrapper .tabs-links-wrapper {
    flex-direction: column;
    max-width: initial;
    display: none;
  }

  .main-content-wrapper:not(.collapsed) #mobile-tab-menu {
    display: flex;
  }

  .main-content-wrapper:not(.collapsed) .tabs-wrapper .tabs-links-wrapper .tab-link {
    margin-right: 0;
  }
}

/* collapsed left sidebar menu */
@media (max-width: 800px) {
  .main-content-wrapper.collapsed .tabs-wrapper .tabs-links-wrapper {
    flex-direction: column;
    max-width: initial;
    display: none;
  }

  .main-content-wrapper.collapsed #mobile-tab-menu {
    display: flex;
  }

  .main-content-wrapper.collapsed .tabs-wrapper .tabs-links-wrapper .tab-link {
    margin-right: 0;
  }
}


@font-face {
  font-family: "document-types";
  src: url("../doctypes/new-icons/fonts/icomoon.eot?8ga1f");
  src: url("../doctypes/new-icons/fonts/icomoon.eot?8ga1f#iefix") format("embedded-opentype"), url("../doctypes/new-icons/fonts/icomoon.ttf?8ga1f") format("truetype"), url("../doctypes/new-icons/fonts/icomoon.woff?8ga1f") format("woff"), url("../doctypes/new-icons/fonts/icomoon.svg?8ga1f#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^=docicon-], [class*=" docicon-"] {
  font-family: "document-types" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #526773;
}

.docicon-brochures .path1:before {
  content: "\e900";
}

.docicon-brochures .path2:before {
  content: "\e901";
  margin-left: -1.0537109375em;
}

.docicon-brochures .path3:before {
  content: "\e902";
  margin-left: -1.0537109375em;
}

.docicon-brochures .path4:before {
  content: "\e903";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-brochures, .docicon-brochures [class^=path] {
  color: #199BFA;
}

.docicon-cash-flow .path1:before {
  content: "\e904";
}

.docicon-cash-flow .path2:before {
  content: "\e905";
  margin-left: -1.0537109375em;
}

.docicon-cash-flow .path3:before {
  content: "\e906";
  margin-left: -1.0537109375em;
}

.docicon-cash-flow .path4:before {
  content: "\e907";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-cash-flow, .docicon-cash-flow [class^=path] {
  color: #6779E7;
}

.docicon-contracts .path1:before {
  content: "\e908";
}

.docicon-contracts .path2:before {
  content: "\e909";
  margin-left: -1.072265625em;
}

.docicon-contracts .path3:before {
  content: "\e90a";
  margin-left: -1.072265625em;
}

.docicon-contracts .path4:before {
  content: "\e90b";
  margin-left: -1.072265625em;
}

.docicon-contracts .path5:before {
  content: "\e90c";
  margin-left: -1.072265625em;
  opacity: 0.3;
}

.docicon-contracts, .docicon-contracts [class^=path] {
  color: #AA74E3;
}

.docicon-invoices .path1:before {
  content: "\e90d";
}

.docicon-invoices .path2:before {
  content: "\e90e";
  margin-left: -1.0537109375em;
}

.docicon-invoices .path3:before {
  content: "\e90f";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-invoices, .docicon-invoices [class^=path] {
  color: #1CBBCA;
}

.docicon-job-offer .path1:before {
  content: "\e910";
}

.docicon-job-offer .path2:before {
  content: "\e911";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-job-offer, .docicon-job-offer [class^=path] {
  color: #FE7245;
}

.docicon-letter .path1:before {
  content: "\e912";
}

.docicon-letter .path2:before {
  content: "\e913";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-letter, .docicon-letter [class^=path] {
  color: #199BFA;
}

.docicon-meeting-minutes .path1:before {
  content: "\e914";
}

.docicon-meeting-minutes .path2:before {
  content: "\e915";
  margin-left: -1.0537109375em;
  opacity: 0.3;
}

.docicon-meeting-minutes, .docicon-meeting-minutes [class^=path] {
  color: #21B271;
}

.docicon-proposals .path1:before {
  content: "\e916";
}

.docicon-proposals .path2:before {
  content: "\e917";
  margin-left: -1.0712890625em;
  opacity: 0.3;
}

.docicon-proposals, .docicon-proposals [class^=path] {
  color: #E93A5E;
}

.docicon-quotes .path1:before {
  content: "\e918";
  opacity: 0.3;
}

.docicon-quotes .path2:before {
  content: "\e919";
  margin-left: -1.0537109375em;
}

.docicon-quotes, .docicon-quotes [class^=path] {
  color: #21B271;
}

.docicon-signoff .path1:before {
  content: "\e91a";
}

.docicon-signoff .path2:before {
  content: "\e91b";
  margin-left: -1.0908203125em;
}

.docicon-signoff .path3:before {
  content: "\e91c";
  margin-left: -1.0908203125em;
}

.docicon-signoff .path4:before {
  content: "\e91d";
  margin-left: -1.0908203125em;
  opacity: 0.3;
}

.docicon-signoff, .docicon-signoff [class^=path] {
  color: #1CBBCA;
}

.docicon-statements-of-work .path1:before {
  content: "\e91e";
}

.docicon-statements-of-work .path2:before {
  content: "\e91f";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path3:before {
  content: "\e920";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path4:before {
  content: "\e921";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path5:before {
  content: "\e922";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path6:before {
  content: "\e923";
  margin-left: -1.0908203125em;
}

.docicon-statements-of-work .path7:before {
  content: "\e924";
  margin-left: -1.0908203125em;
  opacity: 0.3;
}

.docicon-statements-of-work, .docicon-statements-of-work [class^=path] {
  color: #6779E7;
}

body {
  background-color: #f3f6fc;
  font-family: var(--font-regular);
  font-weight: 300;
  color: #494C54;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.card_top_space {
  margin-top: 0;
}

.container {
  width: 100%;
  max-width: 1400px;
}

.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* HEADER */
.header {
  padding: 0;
  background: white;
  width: 100%;
  z-index: 10;
  position: sticky;
  top: 0;
  height: 62px;
}

.header-logo {
  width: 30px;
  height: 30px;
  background-image: url(../img/layout/logo-icon-header.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 30px;
  float: left;
}

.header-link {
  text-align: left;
  padding: 0 20px 0 20px;
  height: 60px;
  float: left;
  background-color: transparent;
  color: #7B8290;
  display: table;
  font-size: 0.95em;
  font-family: var(--font-regular);
  font-weight: 400;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.header-link:hover {
  opacity: 1;
}

.header-link.active {
  color: #181C25;
  opacity: 1;
  font-family: var(--font-medium);
  font-weight: 500;
}

.header-link.active-dashboard {
  opacity: 1;
  font-weight: 500;
}

.header-text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.header-hotlink {
  width: 30px;
  height: 30px;
  float: right;
  margin: 15px 0px 10px 0px;
  transition: all 0.2s ease;
  z-index: 1;
  cursor: pointer;
}

.header-hotlink.right {
  margin-left: 10px;
}

.header-hotlink-image {
  opacity: 0.8;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  /* future proofing */
  -khtml-border-radius: 25px;
  /* for old Konqueror browsers */
  background-size: cover;
  background-position: center;
}

.header-hotlink-image:hover {
  opacity: 1;
}

.header-hotlink-icon {
  width: 30px;
  font-size: 1em;
  background: #ED5373;
  color: #FFF;
  font-weight: 400;
  padding: 8px;
  transition: all 0.2s ease;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  /* future proofing */
  -khtml-border-radius: 25px;
  /* for old Konqueror browsers */
}

.header-hotlink-icon:hover {
  opacity: 1;
  background-color: #494C54;
  color: #FFF;
}

.header-hotlink-icon:active {
  opacity: 1 !important;
  color: #ED5373;
}

.dropdown-settings {
  float: right;
  position: relative;
}

.dropdown-settings li {
  list-style: none;
}

/* Dropdown content (hidden by default) */
.dropdown-content-settings {
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  margin-top: 60px;
  margin-left: -305px;
  background-color: #FFF;
  padding: 20px;
  min-width: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  z-index: 1111;
  border: 1px solid #E3E6ED;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  transition: all 0.2s ease-in;
}

.dropdown-content-settings .profile {
  padding: 0 0 10px 16px;
  border-bottom: 1px solid #E3E6ED;
  font-family: var(--font-medium);
  font-weight: 500;
}

.profile-image {
  width: 50px;
  height: 50px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  /* future proofing */
  -khtml-border-radius: 25px;
  /* for old Konqueror browsers */
  background-size: cover;
  background-position: center;
  margin-right: 10px;
  float: left;
}

/* Links inside the dropdown */
.dropdown-content-settings a {
  float: none;
  color: #494C54;
  font-weight: 300;
  border: 1px solid #FFF;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 13px;
  transition: all 0.2s ease-in;
}

/* Add a grey line to dropdown links on hover */
.dropdown-content-settings a:hover {
  border: 1px solid #E3E6ED;
  color: #181C25;
  text-decoration: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
}

.dropdown-content-settings a:active {
  border: 1px solid #494C54;
}

/* Show the industries dropdown menu on hover */
.dropdown-settings:hover .dropdown-content-settings {
  visibility: visible;
  height: 275px;
  opacity: 1;
  z-index: 1111;
}

.dropdown-content-settings:after {
  content: "";
  display: block;
  position: absolute;
  left: 308px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #E3E6ED;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

/*.header-hotlink.newproposal { margin-right: 15px; background: #4DCF84 }
.header-hotlink.newproposal:hover { background: #46BD78 }
.header-hotlink.newproposal:active { background: #6DD79A }

.header-hotlink.settings { background: #E3E6ED }
.header-hotlink.settings:hover { background: #FFF }
.header-hotlink.settings:active { opacity: 0.3 }

.header-hotlink.help { margin-right: 15px; background: #E3E6ED }
.header-hotlink.help:hover { background: #FFF }
.header-hotlink.help:active { opacity: 0.3 }*/
.header-trial {
  background-color: #FFEFD1;
  border-bottom: 1px solid #D7D9E2;
  padding: 10px 0;
  text-align: center;
  font-size: 0.9em;
  font-weight: 500 !important;
}

.dropdown-proposals {
  float: right;
  position: relative;
}

.dropdown-proposals li {
  list-style: none;
}

/* Dropdown content (hidden by default) */
.dropdown-content-proposals {
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  margin-top: 60px;
  margin-left: -135px;
  background-color: #FFF;
  padding: 20px;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  z-index: 1111;
  border: 1px solid #E3E6ED;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  transition: all 0.2s ease-in;
}

/* Links inside the dropdown */
.dropdown-content-proposals a {
  float: none;
  color: #494C54;
  border: 1px solid #FFF;
  padding: 10px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 15px;
  transition: all 0.2s ease-in;
  font-family: var(--font-medium);
  font-weight: 500;
}

.dropdown-content-proposals a img {
  width: 20px;
}

.dropdown-content-proposals a div.doctype-color {
  float: none;
  display: inline;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content-proposals a:hover {
  border: 1px solid #E3E6ED;
  color: #181C25;
  text-decoration: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
}

.dropdown-content-proposals a:active {
  border: 1px solid #494C54;
}

/* Show the blog dropdown menu on hover */
.dropdown-proposals:hover .dropdown-content-proposals {
  visibility: visible;
  height: auto;
  opacity: 1;
  z-index: 1111;
}

.dropdown-content-proposals:after {
  content: "";
  display: block;
  position: absolute;
  left: 139px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #E3E6ED;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

/* Hover card for proposal listing */
.proposal-card {
  position: relative;
}

.proposal-card.small{
  font-size: 0.8rem;
}

.proposal-card.small .proposal-card-content.left-arrow:after {
  top: 10px;
}

.proposal-card.small .proposal-card-content {
  padding: 10px;
  margin-top: -55px;
  min-width: auto;
}

.proposal-card li {
  list-style: none;
}

/* Dropdown content (hidden by default) */
.proposal-card-content {
  height: 0;
  opacity: 0;
  visibility: hidden;
  color: #494C54;
  position: absolute;
  margin-top: -50px;
  margin-left: 200px;
  background-color: #FFF;
  padding: 20px;
  min-width: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #E3E6ED;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  transition: all 0.2s ease-in;
}

/* Show the industries dropdown menu on hover */
.proposal-card.always-show .proposal-card-content,
.proposal-card:hover .proposal-card-content{
  visibility: visible;
  height: auto;
  opacity: 1;
  z-index: 1111;
}

.proposal-card.mobile-touch .proposal-card-content {
  visibility: visible;
  height: auto;
  opacity: 1;
  z-index: 1111;
  margin-right: 0rem;
  right: 0;
  min-width: max-content;
  text-align: left;
  top: 250%;
}

.proposal-card-content:after {
  content: "";
  display: block;
  position: absolute;
  left: 235px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #E3E6ED;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.proposal-card-content.left-arrow:after {
  right: 100%;
  left: unset;
  bottom: unset;
  top: 30px;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid #FFF;
}

.proposal-card-content.right-arrow:after {
  right: unset;
  left: 100%;
  bottom: 50%;
  top: unset;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left: 10px solid #E3E6ED;
  border-right: 10px solid transparent;
}

.proposal-card-content.down-arrow:after {
  right: unset;
  left: 50%;
  bottom: unset;
  top: 100%;
  border-bottom: 10px solid transparent;
  border-top: 10px solid #E3E6ED;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

/* LAYOUT BASICS */
.main-frame {
  overflow: auto;
  font-family: var(--font-regular);
  font-weight: 400;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
}

.main-frame.cards {
  background-color: transparent;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.block {
  background-color: #FFFFFF;
  margin-bottom: 30px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
  border: 1px solid rgba(10, 44, 61, 0.1);
  padding: 1rem;
}

.footer {
  color: #494C54;
  text-align: center;
  padding: 50px 50px 0 50px;
  font-size: 0.8em;
  opacity: 0.8;
  font-family: "proxima-nova", sans-serif;
  overflow: auto;
}

.padding20 {
  padding: 20px;
}

.padding30 {
  padding: 30px;
}

.padding40 {
  padding: 40px;
}

.padding60 {
  padding: 60px;
}

/* make blocks with padding 30/40 smaller on mobile */
@media (max-width: 768px) {
  div.padding30,
  div.padding40{
    padding: 20px;
  }
}

.overflow {
  overflow: auto;
}

.right {
  float: right !important;
}

.left {
  float: left !important;
}

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

.card-table-padding{
  padding: 20px 40px 40px 40px;
}

@media (max-width: 1024px) {

  .card-table-padding{
    padding: 10px 20px 20px 20px;
  }
}

.rounded4 {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
}

.rounded8 {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
}

hr {
  margin: 20px 0 20px 0;
  width: 10%;
  background: #E3E6ED;
  height: 1px;
  border: none;
}

.onboarding-icon {
  width: 35px;
  margin: 0 auto;
  margin-bottom: 20px;
}

a.dismiss-me {
  opacity: 1;
  font-size: 1em;
  color: #7B8290;
  display: inline-block;
}

.hidden {
  display: none;
}

.desktop-hide {
  display: none !important;
}

.hidden-proposal {
  opacity: 0.3 !important;
}

.sidepanel {
  position: fixed;
  float: left;
  padding: 20px 10px 20px 10px;
  transition: all 0.2s ease;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

a.sidepanel {
  color: #494C54;
}

.sidepanel:hover {
  padding: 20px 10px 20px 30px;
}

.sidepanel.help {
  background-color: #7B8290;
  margin-top: 97px;
}

.sidepanel.help:hover {
  background-color: #494C54;
}

.sidepanel.ask {
  background-color: #7B8290;
  margin-top: 180px;
}

.sidepanel.ask:hover {
  background-color: #494C54;
}

.sidepanel-img {
  width: 15px;
}

.conversion-block {
  color: #FFF;
  text-align: center;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
}

.conversion-block.green {
  background-color: #24DDAF;
  color: #1E7C6A !important;
}

.conversion-block.plum {
  background-color: #B988C5;
  color: #685275 !important;
}

.conversion-block.red {
  background-color: #D5728B;
  color: #764758 !important;
}

.conversion-block.purple {
  background-color: #FFF161;
  color: #8B8643 !important;
}

.sweet-alert.sweet-alert-preview {
  padding: 10px!important;
}
.sweet-alert.sweet-alert-preview fieldset,
.sweet-alert.sweet-alert-preview h2{
  display: none!important;
}

@media (min-width: 820px) {
  .sweet-alert-preview {
    width: 800px !important;
    margin-left: -400px !important;
    top: 450px !important;
  }
}  

/* BUTTONS */
@font-face {
  font-family: "icomoon";
  src: url("/2/fonts/icomoon/fonts/icomoon.eot?pnmyfb");
  src: url("/2/fonts/icomoon/fonts/icomoon.eot?pnmyfb#iefix") format("embedded-opentype"), url("/2/fonts/icomoon/fonts/icomoon.ttf?pnmyfb") format("truetype"), url("/2/fonts/icomoon/fonts/icomoon.woff?pnmyfb") format("woff"), url("/2/fonts/icomoon/fonts/icomoon.svg?pnmyfb#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-size: 0.9em;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-right: 10px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

span[class^=docicon-], [class*=" docicon-"] {
  font-size: 1.75rem;
  margin-right: 10px;
}

table span[class^=docicon-], [class*=" docicon-"] {
  margin-right: 12px;
}

.icon-edit:before {
  content: "A";
}

.icon-duplicate:before {
  content: "B";
}

.icon-archive:before {
  content: "C";
}

.icon-subscription:before {
  content: "D";
}

.icon-save:before {
  content: "E";
}

.icon-preview:before {
  content: "F";
}

.icon-settings:before {
  content: "G";
}

.icon-report:before {
  content: "H";
}

.icon-upgrade:before {
  content: "I";
}

.icon-trash:before {
  content: "J";
}

.icon-connect1:before {
  content: "K";
}

.icon-connect2:before {
  content: "L";
}

.icon-connect3:before {
  content: "M";
}

.icon-domain:before {
  content: "N";
}

.icon-star:before {
  content: "O";
}

.icon-new:before {
  content: "P";
}

.icon-cancel:before {
  content: "Q";
}

.icon-delete:before {
  content: "R";
}

.icon-tick:before {
  content: "S";
}

.icon-sync:before {
  content: "T";
}

.icon-rightsolid:before {
  content: "W";
}

.icon-leftsolid:before {
  content: "X";
}

.icon-rightthin:before {
  content: "Y";
}

.icon-leftthin:before {
  content: "Z";
}

.icon-rightcircle:before {
  content: "a";
}

.icon-leftcircle:before {
  content: "b";
}

.icon-rename:before {
  content: "c";
}

.icon-right {
  margin-right: 0px;
  margin-left: 10px;
}

.icon-left {
  margin-left: 10px;
}

.icon-check {
  background-image: url("/2/img/icons/icon-check.svg");
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  margin-right: 4px;
}

.icon-chevron {
  background-image: url(/2/img/icons/icon-chevron.svg);
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px;
  margin-right: 4px;
  margin-top: 1px;
  transform: rotate(180deg);
}

.file-upload-container {
  display: inline-block;
}

.button, .uploadifive-button.button {
  width: auto;
  padding: 10px 20px 10px 20px;
  margin: 25px 0 0 0;
  background: transparent;
  text-align: center;
  color: #FFF;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.08px;
  font-size: 0.9em;
  float: left;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
  transition: all 0.2s ease;
  outline: none;
  cursor: pointer;
  line-height: 1.3em;
}

.uploadifive-button.button {
  text-shadow: none;
  line-height: normal !important;
  height: auto !important;
  width: auto !important;
}

.uploadifive-queue-item.custom-progress-bar {
  width: 90%;
  left: 2%;
  margin-top: 35px;
  padding: 0;
  border: none;
  text-align: center;
}

.uploadifive-queue-item.custom-progress-bar .progress {
  height: 5px;
}

.uploadifive-queue-item.custom-progress-bar .progress-bar {
  background-color: #4DCF84;
}

.button.small {
  width: auto;
  margin: 0 10px 0 0;
  font-size: 0.8em;
  padding: 8px 8px 10px 8px;
}

.button.medium {
  width: 140px;
  margin: 0 10px 0 0;
}

.button.big {
  width: 100%;
  max-width: 400px;
  font-size: 1.1em;
  padding: 15px 30px;
  margin: 15px 0 5px 0;
}

.button-big-frame {
  width: 100%;
  text-align: center;
}

.button.save {
  margin: 0 0 0 0;
  min-width: 150px;
}

.button.crmsearch {
  width: 100%;
  margin-top: 0px;
  font-size: 14px;
  padding: 19px 15px;
}

/* CIRCLE BUTTONS */
.button.btn-circle-icon {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  padding: 0;
}

.button.btn-circle-icon i {
  margin: 0;
}

/* COLOURED BUTTONS */
.button.green {
  background: #4DCF84;
  border: 1px solid #4DCF84;
  transition: all 250ms ease-in-out;
}

.button.green:hover {
  background: #46BD78;
  border: 1px solid #46BD78;
  color: white;
}

.button.green:active {
  background: #6DD79A;
  border: 1px solid #6DD79A;
}

.button.white {
  background: #FFF;
  color: #494C54;
  border: 1px solid #E3E6ED;
  margin: 0 10px 0 0;
  transition: all 250ms ease-in-out 0s;
}

.button.white:hover {
  background-color: #FFF;
  color: var(--main-dark);
  border: 1px solid var(--main-dark);
}

.button.white:active {
  opacity: 0.3;
}

.button.cancel {
  background: #f7f7f7;
  color: #5a5c64;
  border: 1px solid #e4e4e4;
  margin: 0 10px 0 0;
  transition: all 250ms ease-in-out;
}

.button.cancel:hover {
  background-color: #e8e8e8;
  border: 1px solid #e8e8e8;
}

.button.blue {
  background: #01A3EF;
  border: 1px solid #01A3EF;
  transition: all 250ms ease-in-out;
}

.button.blue:hover {
  background: #0195DA;
  border: 1px solid #0195DA;
}

.button.blue:active {
  background: #2FB3F1;
  border: 1px solid #2FB3F1;
}

.button.red {
  background: #E92D54;
  border: 1px solid #E92D54;
  margin: 0 0 0 10px;
  transition: all 250ms ease-in-out;
}

.button.red:hover {
  background: #D4294D;
  border: 1px solid #D4294D;
}

.button.red:active {
  background: #ED5373;
  border: 1px solid #ED5373;
}

.button.pink {
  background: #ED5373;
  border: 1px solid #ED5373;
  transition: all 250ms ease-in-out;
}

.button.pink:hover {
  background: #F1758F;
  border: 1px solid #F1758F;
}

.button.pink:active {
  background: #BE425C;
  border: 1px solid #BE425C;
}

.button.border-blue-hover:hover {
  color: #2D74FF;
  border: 1px solid #2D74FF;
}

.button.border-red-hover:hover {
  color: #FF5E5E;
  border: 1px solid #FF5E5E;
}

.button.back {
  padding: 30px 10px 30px 0;
  border: none;
  text-align: left;
  color: #485059;
  font-size: 1em;
  font-weight: 400;
  text-transform: none;
}

.button-spinner {
  background-image: url("/2/img/layout/spinner.gif");
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  padding: 30px;
  position: absolute;
  width: 100%;
  background-color: white;
  z-index: 10;
}

.button.nomargin {
  margin: 0 0 0 0;
}

.button.settings-spacer {
  margin-top: 0;
}

.button.disabled-light-grey,
.button.disabled-light-grey:hover,
.button.disabled-light-grey:active,
.btn.disabled-light-grey,
.btn.disabled-light-grey:hover,
.btn.disabled-light-grey:active {
  cursor: not-allowed;
  background: #fff !important;
  color: #b0b0b0 !important;
  border-color: #e3e3e3 !important;
}

.button.disabled,
.button.disabled:hover,
.button.disabled:active {
  cursor: not-allowed;
  background: #ddd !important;
  border-color: #bbb !important;
  opacity:0.6;
}

.click-to-tweet {
  padding: 40px;
  border: 1px solid #E6E7EB;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  font-family: var(--font-regular);
  font-style: italic;
  font-size: 1.3em;
  color: #676B73;
  background-color: #F5F7F8;
}

.click-to-tweet:hover {
  color: #333;
  border: 1px solid #B4B6BF;
}

.tab {
  padding: 15px;
  background: #D9DADD;
  color: #485059;
  text-align: center;
  font-size: 0.8em;
  float: left;
  margin-left: 10px;
  opacity: 0.5;
  display: inline-block;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  cursor: pointer;
  font-weight: 400;
}

.tab.active {
  opacity: 1;
  font-weight: 500;
}

.CodeMirror {
  border: 2px solid #D9DADD;
  width: 100%;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
}

.divhide {
  display: none !important;
}

.badge-toggle, .free-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.badge-toggle+label, .free-toggle+label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.badge-toggle-round-flat+label, input.free-toggle-round-flat+label {
  padding: 2px;
  width: 60px;
  height: 30px;
  background-color: #E3E6ED;
  border-radius: 60px;
  transition: background 0.4s;
}

input.badge-toggle-round-flat+label:before,
input.badge-toggle-round-flat+label:after,
input.free-toggle-round-flat+label:before,
input.free-toggle-round-flat+label:after {
  display: block;
  position: absolute;
  content: "";
}

input.badge-toggle-round-flat+label:before, input.free-toggle-round-flat+label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  border-radius: 60px;
  transition: background 0.4s;
}

input.badge-toggle-round-flat+label:after, input.free-toggle-round-flat+label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 26px;
  background-color: #E3E6ED;
  border-radius: 60px;
  transition: margin 0.4s, background 0.4s;
}

input.badge-toggle-round-flat:checked+label, input.free-toggle-round-flat:checked+label {
  background-color: #4DCF84;
}

input.badge-toggle-round-flat:checked+label:after, input.free-toggle-round-flat:checked+label:after {
  margin-left: 25px;
  background-color: #4DCF84;
}

.pipeline-toggle {
  padding-top: 30px;
}

.pipeline-toggle-active {
  color: #485059 !important;
  border-color: #485059 !important;
}

ul.tabs {
  font-size: 0;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.tabs li {
  font-family: var(--font-medium);
  background: #FFF;
  color: #7B8290;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #E3E6ED;
  display: inline-block;
  padding: 8px 20px 8px 20px;
  letter-spacing: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: -5px !important;
}

ul.tabs li:hover {
  background-color: #F5F6F9;
  color: #494C54;
}

ul.tabs .pipeline-toggle-active li,
ul.tabs li.current {
  background: var(--info-blue);
  color: #FFF;
}

ul.tabs li.tab-left {
  padding: 8px 20px 8px 30px;
  -webkit-border-top-left-radius: 40px;
  -webkit-border-bottom-left-radius: 40px;
  -moz-border-radius-topleft: 40px;
  -moz-border-radius-bottomleft: 40px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}

ul.tabs li.tab-right {
  padding: 8px 30px 8px 20px;
  border-right: 1px solid #E3E6ED;
  -webkit-border-top-right-radius: 40px;
  -webkit-border-bottom-right-radius: 40px;
  -moz-border-radius-topright: 40px;
  -moz-border-radius-bottomright: 40px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

.tab-content {
  display: none;
  padding: 30px 0px;
}

.tab-content-image {
  width: 100%;
  margin-top: 20px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -khtml-border-radius: 4px;
  -moz-box-shadow: 0px 2px 20px 5px #EEE;
  -webkit-box-shadow: 0px 2px 20px 5px #EEE;
  box-shadow: 0px 2px 20px 5px #EEE;
}

.tab-content.current {
  display: inherit;
}

/* TYPOGRAPHY */
body, h1, h2, h3, p, span {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-bold);
  letter-spacing: -1px;
  font-weight: 600;
  font-size: 1.8em;
  color: var(--main-dark);
  line-height: 1.5;
  padding: 0;
}

h1 strong {
  font-family: var(--font-bold);
  font-weight: 600;
}

.title-wrapper {
  min-height: 89px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

h1.bigger {
  font-size: 3em;
  font-weight: 500;
  line-height: 1em;
}

h2 {
  font-family: var(--font-medium);
  letter-spacing: -0.15px;
  font-weight: 500;
  font-size: 1.4em;
  color: var(--main-dark);
  margin: 0 0 30px 0;
}

h3 {
  color: #494C54;
  font-weight: 400;
  font-size: 1.1em;
  margin-top: 40px;
}

#choice-div h3 {
  margin-top: 0;
  margin-bottom: 40px;
}

strong {
  font-family: var(--font-medium);
  font-weight: 500;
}

p {
  line-height: 1.3em;
  font-size: 1em;
}

.no-ul {
  text-decoration: none !important;
}

.settings-link {
  font-size: 1rem;
  color: #494C54;
  opacity: 0.8;
  line-height: 1.7em;
  font-family: var(--font-regular);
  font-weight: 400;
}

.settings-link:hover {
  opacity: 1;
}

.new-tag {
  padding: 5px 10px;
  font-size: 10px;
  background-color: #ED5373;
  color: #FFF;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -khtml-border-radius: 4px;
  display: inline;
  font-weight: bold;
  margin-left: 10px;
}

.opt-tag {
  padding: 5px 10px;
  font-size: 8px;
  background-color: #BEC3C7;
  color: #FFF;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -khtml-border-radius: 4px;
  display: inline;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.opt-tag-active {
  background-color: #63D59B;
}

a {
  color: #485059;
  font-family: var(--font-regular);
  font-weight: 400;
  letter-spacing: -0.15px;
}

.microcopy {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 0.8em;
  opacity: 0.8;
  letter-spacing: -0.1px;
  color: #485059;
}

.microcopy.light {
  color: #fff;
  opacity: 0.8;
}

.bigcopy {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1.3em;
  color: #485059;
}

.mediumcopy {
  font-family: var(--font-regular);
  letter-spacing: -0.15px;
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1.3em;
  color: #485059;
}

.dashboard-number {
  margin-top: 20px;
  font-size: 2em;
  font-weight: 500;
}

.dashboard-label {
  font-size: 0.7em;
  text-transform: uppercase;
  margin-top: -10px;
  font-weight: 400;
  opacity: 0.5;
}

/* CONTENT LIBRARY */
.big-search {
  font-family: var(--font-regular);
  font-weight: 400;
  padding: 15px 15px 15px 60px;
  font-size: 1.4em;
  color: var(--main-dark);
  background-color: #FFF;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -khtml-border-radius: 4px;
  background-image: url(../img/proposal-icons/library-search.gif);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 20px 20px;
  outline: none;
  width: 100%;
  margin-bottom: 10px;
  transition: all 0.2s ease;
  -webkit-box-shadow: 0 6px 18px -6px #EEE;
  -moz-box-shadow: 0 6px 18px -6px #EEE;
  box-shadow: 0 6px 18px -6px #EEE;
  opacity: 0.7;
  border: 1px solid #EEE;
}

.big-search:hover {
  opacity: 0.9;
}

.big-search:focus {
  opacity: 1;
}

.library-result-id {
  padding: 10px;
  width: 40px;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.library-icon {
  width: 28px;
}

.library-cat {
  text-transform: uppercase;
  font-size: 0.8em;
  color: #BEC3C7;
  font-family: var(--font-medium);
  font-weight: 500;
}

.page {
  background-color: #eaf1ff;
}

.text {
  background-color: #ffefdf;
}

.featured {
  background-color: #e0f1fd;
}

.bigimage {
  background-color: #ffeae4;
}

.video {
  background-color: #fee6ea;
}

.quote {
  background-color: #edfaf2;
}

.sign {
  background-color: #f6eefc;
}

.pricing-table {
  background-color: #e5f7f4;
}

/* TABLES */
table {
  background-color: #FFF;
}

th {
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.15px;
  padding: 15px;
  font-size: 1.06rem;
  color: #494C54;
  background-color: #FFF;
  border-bottom: 1px solid #F4F4F4;
  text-align: left;
}

/*tr {
	height: 64px;
}*/
td {
  padding: 0.62rem;
  color: #494C54;
  border-bottom: 1px solid #F4F4F4;
  font-family: var(--font-regular);
  font-weight: 400;
  letter-spacing: -0.15px;
}

td a {
  transition: color 250ms ease-in-out;
}

td a:hover {
  color: var(--info-blue);
}

thead.table-head th {
  font-family: var(--font-medium);
  letter-spacing: -0.15px;
  font-size: 1.06rem;
}

@keyframes fade-in-out {
  0% {
    background-color: rgba(92, 165, 205, 0);
  }

  10% {
    background-color: rgba(92, 165, 205, 0.25);
  }

  80% {
    background-color: rgba(92, 165, 205, 0.25);
  }

  100% {
    background-color: rgba(92, 165, 205, 0);
  }
}

tr.highlight-fade-out {
  animation: fade-in-out 3s linear 0s 1;
}

tr:hover {
  background-color: #fbfbfc;
  color: #494C54;
  cursor: pointer;
}

.signature-table th, .signature-table td {
  padding: inherit;
  border-bottom: none;
}

.paginationBottom {
  clear: both;
  width: 100%;
  overflow: hidden;
  font-size: 0.85em;
  padding: 1.5rem 0;
}

.paginationBottom ul {
  list-style: none;
  position: relative;
  left: 50%;
  margin: 0;
  padding: 0;
  float: left;
}

.paginationBottom li {
  position: relative;
  float: left;
  right: 50%;
}

.paginationBottom a {
  padding: 6px;
  background: #D9DADD;
  color: #485059;
  text-decoration: none;
  margin: 0 4px;
  display: block;
  float: left;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  min-width: 32px;
  text-align: center;
  cursor: pointer;
}

.paginationBottom a:hover {
  background: #DEDEDE;
  color: #222;
}

.paginationBottom li.active a {
  background-color: #485059;
  color: #FFF;
}

/* BLANK SLATES */
.blankslate {
  text-align: center;
  opacity: 0.8;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
}

.blankslate-icon {
  width: 75px;
  opacity: 0.3;
  margin-top: 50px;
}

.blankslate-title {
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.08px;
  font-size: 1.2rem;
  color: #FFF;
  margin: 20px 0 20px 0;
}

.blankslate-copy {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 1rem;
  color: #FFF;
  opacity: 0.7;
  width: 60%;
  margin: 0 auto;
}

.blankslate-title.dark {
  color: #485059;
}

.blankslate-copy.dark {
  color: #485059;
}

/* CARDS */
.cards {
  border: 2px solid #E3E6ED;
  background-color: #FFF;
  transition: all 0.2s ease;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
}

.cards:hover {
  border: 2px solid #7B8290;
}

.cards:active {
  opacity: 0.3;
}

.cards.covers {
  min-height: 420px;
}

.cards.selected {
  border: 2px solid #5ED699;
}

.cards.unselected {
  margin-top: 38px;
}

.cards-selected-plan {
  background-color: #5ED699;
  color: #FFF;
  font-size: 15px;
  padding: 10px;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.cards.appsumo {
  background-color: #152824;
  color: #FFF;
}

.card-plus img {
  width: 100%;
}

.card-image {
  width: 100%;
  height: 200px;
  border: 2px solid #D2D5DF;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 10px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.8;
}

.card-image-hover {
  width: 100px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.card-title {
  font-family: var(--font-medium);
  letter-spacing: -0.08px;
  font-weight: 500;
  color: #485059;
  font-size: 1.2em;
  margin-bottom: 20px;
}

.cards .buttons-wrapper {
  margin: 2rem 0 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cards .buttons-wrapper .button {
  margin: 0 0 0 10px;
}

@media (max-width: 767px) {
  .cards .buttons-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 0.5rem;
  }

  .cards .buttons-wrapper .button {
    width: 100%;
    margin: 0;
  }

  .cards .buttons-wrapper .button.save {
    order: -1;
  }
}

/* FORMS */
.textbox {
  padding: 10px;
  color: #494C54;
  border: 1px solid #d9dce1;
  outline: none;
  font-family: var(--font-regular);
  font-weight: 300;
  font-size: 0.95rem;
  width: 100%;
  margin-bottom: 30px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left 10px top 10px;
  transition: all 0.2s ease;
  background-color: white;
}

select.textbox{
  appearance: none; /* Disable the default arrow */
  -webkit-appearance: none; /* For WebKit-based browsers */
  -moz-appearance: none; /* For Firefox */
  padding: 10px 35px 10px 10px;
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  cursor: pointer;
}

input::placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
  color: #b9babd;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #b9babd;
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #b9babd;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #b9babd;
}

.textbox.date {
  background-image: url(../img/icons/form-date.png);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: left center 10px;
  padding-left: 40px;
}

.label {
  font-size: 1em;
  font-family: var(--font-medium);
  letter-spacing: -0.08px;
  font-weight: 500;
  color: var(--main-dark);
  margin-bottom: 10px;
  width: 100%;
}

.textbox:hover {
  border: 1px solid #7B8290;
}

.textbox:focus {
  border: 1px solid #494C54;
}

.textbox.small {
  width: 100px;
}

.textbox.half {
  width: 49%;
}

input[type=checkbox] {
  transform: scale(1.2);
}

.textbox.code {
  color: #444;
  font-family: var(--font-regular);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.textbox.filter {
  background-image: url(../img/icons/start-existing.png);
  background-repeat: no-repeat;
  background-size: 15px;
  border: 1px solid #7B8290;
  outline: none;
  background-position: 15px;
  text-indent: 30px;
  opacity: 0.8;
}

.textbox.filter:hover {
  opacity: 1;
}

.textbox.filter:focus {
  opacity: 1;
}

.profile-icon {
  width: 120px;
  height: 120px;
  margin-right: 30px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  /* future proofing */
  -khtml-border-radius: 100px;
  /* for old Konqueror browsers */
  background: #ccc;
  background-image: url(../img/layout/hotlink-settings.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 120px;
}

.border-error {
  border: 1px solid #E8553E !important;
}

.textbox.enterprise {
  margin-top: 5px;
  margin-bottom: 15px;
}

.textbox.enterprise:focus {
  border: 2px solid #50C0AE;
}

/* NOTIFICATIONS */
.notification {
  background-color: #333;
  padding: 30px;
  text-align: center;
  color: #FFF !important;
  margin-bottom: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
}

.notification.error {
  background-color: #E92D54;
  overflow: auto;
}

.notification.info {
  background-color: #01A3EF;
  overflow: auto;
}

.notification.warning {
  background-color: #FFEFD1;
  color: #9d8d74 !important;
  overflow: auto;
}

.notification.upgrade {
  background-color: #E92D54;
  overflow: auto;
  padding: 20px;
}

.notification.upsell {
  background-color: #ED5373;
  overflow: auto;
  padding: 0;
}

.notification.upgradeplan {
  background-color: #FFF;
  overflow: auto;
  padding: 0;
}

.alert-count {
  color: #EEE;
  background-color: #ED5373;
  margin: 5px 50px 0 0;
  font-family: var(--font-medium);
  letter-spacing: -0.08px;
  font-weight: 500;
  font-size: 11px;
  text-align: center;
  line-height: 20px;
  height: 20px;
  width: 20px;
  float: right;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  /* future proofing */
  -khtml-border-radius: 50px;
  position: relative;
  z-index: 999;
}

.alert-count-settings {
  color: #EEE;
  padding: 2px;
  background-color: #FD656D;
  margin: 2px 0 0 5px;
  font-family: var(--font-medium);
  letter-spacing: -0.08px;
  font-weight: 500;
  font-size: 11px;
  text-align: center;
  height: 10px;
  width: 10px;
  display: inline-block;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  /* future proofing */
  -khtml-border-radius: 50px;
}

/* START PROPOSAL */
.start-block {
  font-family: var(--font-regular);
  font-weight: 400;
  background-color: #FFF;
  cursor: pointer;
  text-align: center;
  color: #494C54;
  font-size: 1.15em;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  background-position: center 70px;
  background-size: 100px;
  background-repeat: no-repeat;
  padding-top: 165px;
  padding-bottom: 40px;
  opacity: 0.8;
  transform: scale(0.95);
  transition: all 0.2s ease;
}

.start-existing {
  background-image: url(../img/icons/start-existing.png);
}

.start-existing:hover {
  transform: scale(1);
  opacity: 1;
}

.start-existing:active {
  opacity: 0.3;
}

.start-new {
  background-image: url(../img/icons/start-new.png);
}

.start-new:hover {
  transform: scale(1);
  opacity: 1;
}

.start-new:active {
  opacity: 0.3;
}

.start-crm {
  background-image: url(../img/integrations/categories/crm.png);
}

.start-crm:hover {
  transform: scale(1);
  opacity: 1;
}

.start-crm:active {
  opacity: 0.3;
}

.start-livechat {
  background-image: url(../img/integrations/categories/livechat.png);
}

.start-livechat:hover {
  transform: scale(1);
  opacity: 1;
}

.start-livechat:active {
  opacity: 0.3;
}

.start-payments {
  background-image: url(../img/integrations/categories/payments.png);
}

.start-payments:hover {
  transform: scale(1);
  opacity: 1;
}

.start-payments:active {
  opacity: 0.3;
}

.start-remarketing {
  background-image: url(../img/integrations/categories/remarketing.png);
}

.start-remarketing:hover {
  transform: scale(1);
  opacity: 1;
}

.start-remarketing:active {
  opacity: 0.3;
}

.start-zapier {
  background-image: url(../img/integrations/categories/zapier.png);
}

.start-zapier:hover {
  transform: scale(1);
  opacity: 1;
}

.start-zapier:active {
  opacity: 0.3;
}

.start-projects {
  background-image: url(../img/integrations/categories/projects.png);
}

.start-projects:hover {
  transform: scale(1);
  opacity: 1;
}

.start-projects:active {
  opacity: 0.3;
}

.start-fonts {
  background-image: url(../img/integrations/categories/fonts.png);
}

.start-crm-hubspot {
  background-image: url(../../img/integrations/crm/hubspot.png);
}

.start-crm-zoho {
  background-image: url(../../img/integrations/crm/zoho.png);
}

.start-crm-zohoeu {
  background-image: url(../../img/integrations/crm/zohoeu.png);
}

.start-crm-salesforce {
  background-image: url(../../img/integrations/crm/salesforce.png);
}

.start-crm-base {
  background-image: url(../../img/integrations/crm/base.png);
}

.start-crm-capsule {
  background-image: url(../../img/integrations/crm/capsule.png);
}

.start-crm-pipedrive {
  background-image: url(../../img/integrations/crm/pipedrive.png);
}

.start-crm-insightly {
  background-image: url(../../img/integrations/crm/insightly.png);
}

.start-crm-highrise {
  background-image: url(../../img/integrations/crm/highrise.png);
}

.start-crm-salesflare {
  background-image: url(../../img/integrations/crm/salesflare.png);
}

.start-crm-closeio {
  background-image: url(../../img/integrations/crm/close.png);
}

.start-crm-infusionsoft {
  background-image: url(../../img/integrations/crm/infusionsoft.png);
}

.start-crm-prosperworks {
  background-image: url(../../img/integrations/crm/prosperworks.png);
}

.start-crm-activecampaign {
  background-image: url(../../img/integrations/crm/activecampaign.png);
}

.start-crm-nimble {
  background-image: url(../../img/integrations/crm/nimble.png);
}

.start-crm-hats17 {
  background-image: url(../../img/integrations/crm/17hats.png);
}

.start-crm-agile {
  background-image: url(../../img/integrations/crm/agile.png);
}

.start-crm-freshsales {
  background-image: url(../../img/integrations/crm/freshsales.png);
}

.add-product {
  text-decoration: none;
  margin-left: 5px;
  position: absolute;
  width: 24px;
  height: 24px;
  background: url(../img/icons/add.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.delete-product {
  text-decoration: none;
  margin-left: 5px;
  position: absolute;
  width: 24px;
  height: 24px;
  background: url(../img/icons/minus.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

/* SETTINGS > BRANDING */
.settings-frame.sidebar-frame {
  display: flex;
  align-items: flex-start;
}

.settings-sidebar {
  background-color: transparent;
}

.settings-content {
  background-color: #FFF;
}

.settings-cat {
  color: #181C25;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 400;
  padding: 10px 10px 10px 40px;
  margin-bottom: 5px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  background-position: 10px 10px;
  background-size: 20px;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
}

.integrations-cat {
  color: #181C25;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 400;
  padding: 10px 10px 10px 40px;
  margin-bottom: 5px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  background-position: 10px 10px;
  background-size: 20px;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
}

.integrations-cat:hover {
  background-color: #D2D5DF;
}

.integrations-cat:active {
  opacity: 0.3;
}

.integrations-cat.crm {
  background-image: url("../img/integrations/categories/crm.png");
}

.integrations-cat.fonts {
  background-image: url("../img/integrations/categories/fonts.png");
}

.integrations-cat.livechat {
  background-image: url("../img/integrations/categories/livechat.png");
}

.integrations-cat.payments {
  background-image: url("../img/integrations/categories/payments.png");
}

.integrations-cat.projects {
  background-image: url("../img/integrations/categories/projects.png");
}

.integrations-cat.remarketing {
  background-image: url("../img/integrations/categories/retargeting.png");
}

.integrations-cat.zapier {
  background-image: url("../img/integrations/categories/zapier.png");
}

.integrations-cat.api {
  background-image: url("../img/integrations/categories/api.png");
}

.settings-cat.branding {
  background-image: url("../img/icons/settings-branding.png");
}

.settings-cat.proposals {
  background-image: url("../img/icons/settings-proposals.png");
}

.settings-cat.admin {
  background-image: url("../img/icons/settings-admin.png");
}

.settings-cat.people {
  background-image: url("../img/icons/settings-people.png");
}

.settings-cat.profile {
  background-image: url("../img/icons/settings-profile.png");
}

.integrations-title {
  font-family: var(--font-medium);
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 1.8em;
  line-height: 1.2em;
  color: var(--main-dark);
  margin-bottom: 30px;
}

.integrations-subtitle {
  line-height: 1.35;
  letter-spacing: -0.1px;
  font-weight: 400;
  color: #494C54;
  margin-bottom: 60px;
}

.settings-item {
  color: #7B8290;
  text-decoration: none;
  font-size: 0.9em;
  padding: 5px 10px 5px 40px;
  margin-bottom: 5px;
  transition: all 0.2s ease;
}

.settings-item:hover {
  color: #181C25;
}

.settings-item:active {
  opacity: 0.3;
}

.brand-colour {
  margin: 0 0 0 5px;
  padding: 6px;
  width: 12px;
  height: 12px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  /* future proofing */
  -khtml-border-radius: 50px;
  display: inline-block;
  background-color: #FFF;
}

.navcolor {
  width: 45px;
  height: 45px;
  margin: 0 10px 10px 0;
  font-family: var(--font-medium);
  font-weight: 500;
  float: left;
  border: 1px solid #E3E6ED;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.navcolor:not(.navcolor-active):hover {
  border: 1px solid #494C54;
}

.navcolor-active {
  border: 1px solid #181C25;
}

.navcolor.x1 {
  background-color: #F76B5E;
}

/* PROPOSALS */
.navcolor.x2 {
  background-color: #FA894F;
}

/* CONTRACTS */
.navcolor.x3 {
  background-color: #F5685E;
}

/* QUOTES */
.navcolor.x4 {
  background-color: #F4596B;
}

/* SIGN OFF */
.navcolor.x5 {
  background-color: #B988C5;
}

.navcolor.x6 {
  background-color: #989C94;
}

.navcolor.x7 {
  background-color: #D5728B;
}

.navcolor.x8 {
  background-color: #C5C392;
}

.navcolor.x9 {
  background-color: #B7CDFF;
}

.navcolor.x10 {
  background-color: #FFF161;
}

.navcolor.x11 {
  background-color: #FFA08A;
}

.navcolor.x12 {
  background-color: #ABF487;
}

.navcolor.x13 {
  background-color: #24DDAF;
}

.navcolor.x14 {
  background-color: #EF7267;
}

.navcolor.x15 {
  background-color: #52C3BD;
}

.navcolor.x16 {
  background-color: #00A669;
}

.navcolor.x17 {
  background-color: #7AC779;
}

.navcolor.light {
  background-color: #FFFFFF;
  color: #333;
}

.navcolor.dark {
  background-color: #333333;
  color: #fff;
}

.proposal-branding-bar {
  background-color: #FFF;
  text-align: center;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  color: #000;
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 0.9em;
  width: 960px;
  margin-bottom: 0;
  margin: 0 auto;
}

.proposal-branding-icon-block {
  width: 100px;
  float: left;
  opacity: 0.3;
}

.proposal-branding-icon-block:hover {
  opacity: 0.5;
}

.proposal-branding-icon-block.active {
  opacity: 1;
  font-weight: 500;
}

.proposal-branding-icon {
  width: 50px;
  margin-bottom: 15px;
}

.doctype-color {
  width: 40px;
  height: 40px;
  float: left;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
  cursor: pointer;
  padding: 6px;
  margin-right: 5px;
  background-color: transparent !important;
}

.tagcolor {
  width: 40px;
  height: 40px;
  margin: 0 10px 10px 0;
  float: left;
  border: 1px solid #CCC;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  /* future proofing */
  -khtml-border-radius: 100px;
  /* for old Konqueror browsers */
}

.tagcolor-block {
  width: auto;
  padding: 3px 9px;
  font-size: 0.7em;
  font-family: var(--font-medium);
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
}

.tagcolor-small {
  padding: 6px;
  width: 12px;
  height: 12px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  /* future proofing */
  -khtml-border-radius: 2px;
  float: left;
  transform: rotate(45deg);
}

.tagcolor:not(.tagcolor-active):hover {
  border: 2px solid #444;
  cursor: pointer;
}

.tagcolor-active {
  border: 2px solid #000;
}

input[type=radio]:checked+label {
  border: 2px solid #000;
}

.tagcolor.x0, .tagcolor-small.x0 {
  background-color: #EEE;
}

.tagcolor.x1, .tagcolor-small.x1 {
  background-color: #FDCC41;
}

.tagcolor.x2, .tagcolor-small.x2 {
  background-color: #E37F38;
}

.tagcolor.x3, .tagcolor-small.x3 {
  background-color: #E54C40;
}

.tagcolor.x4, .tagcolor-small.x4 {
  background-color: #F181C2;
}

.tagcolor.x5, .tagcolor-small.x5 {
  background-color: #9A5FB3;
}

.tagcolor.x6, .tagcolor-small.x6 {
  background-color: #5C345C;
}

.tagcolor.x7, .tagcolor-small.x7 {
  background-color: #51689E;
}

.tagcolor.x8, .tagcolor-small.x8 {
  background-color: #3E9BD6;
}

.tagcolor.x9, .tagcolor-small.x9 {
  background-color: #40CA78;
}

.tagcolor.x10, .tagcolor-small.x10 {
  background-color: #5C4333;
}

.tagcolor.x11, .tagcolor-small.x11 {
  background-color: #272727;
}

.tagcolor-block.x1 {
  color: #FDCC41;
  border: 2px solid #FDCC41;
}

.tagcolor-block.x2 {
  color: #E37F38;
  border: 2px solid #E37F38;
}

.tagcolor-block.x3 {
  color: #E54C40;
  border: 2px solid #E54C40;
}

.tagcolor-block.x4 {
  color: #F181C2;
  border: 2px solid #F181C2;
}

.tagcolor-block.x5 {
  color: #9A5FB3;
  border: 2px solid #9A5FB3;
}

.tagcolor-block.x6 {
  color: #5C345C;
  border: 2px solid #5C345C;
}

.tagcolor-block.x7 {
  color: #51689E;
  border: 2px solid #51689E;
}

.tagcolor-block.x8 {
  color: #3E9BD6;
  border: 2px solid #3E9BD6;
}

.tagcolor-block.x9 {
  color: #40CA78;
  border: 2px solid #40CA78;
}

.tagcolor-block.x10 {
  color: #5C4333;
  border: 2px solid #5C4333;
}

.tagcolor-block.x11 {
  color: #272727;
  border: 2px solid #272727;
}

.doctype-color.x0 {
  background-color: #B988C5;
}

.doctype-color.x1 {
  background-color: #989C94;
}

.doctype-color.x2 {
  background-color: #D5728B;
}

.doctype-color.x3 {
  background-color: #C5C392;
}

.doctype-color.x4 {
  background-color: #B7CDFF;
}

.doctype-color.x5 {
  background-color: #FFF161;
}

.doctype-color.x6 {
  background-color: #FFA08A;
}

.doctype-color.x7 {
  background-color: #ABF487;
}

.doctype-color.x8 {
  background-color: #24DDAF;
}

.doctype-color.x9 {
  background-color: #EF7267;
}

.doctype-color.proposals {
  background-color: rgba(237, 83, 115, 0.1);
}

.doctype-color.brochures {
  background-color: #fbf0e9;
}

.doctype-color.contracts {
  background-color: rgba(244, 185, 66, 0.1);
}

.doctype-color.quotes {
  background-color: rgba(65, 211, 127, 0.1);
}

.doctype-color.signoff {
  background-color: rgba(129, 65, 211, 0.1);
}

.doctype-color.quotes img {
  width: 21px;
}

.doctype-color img {
  width: 20px;
}

.tagcolor.x0 {
  background-color: #EEE;
}

.tagcolor.x1 {
  background-color: #FDCC41;
}

.tagcolor.x2 {
  background-color: #E37F38;
}

.tagcolor.x3 {
  background-color: #E54C40;
}

.tagcolor.x4 {
  background-color: #F181C2;
}

.tagcolor.x5 {
  background-color: #9A5FB3;
}

.tagcolor.x6 {
  background-color: #5C345C;
}

.tagcolor.x7 {
  background-color: #51689E;
}

.tagcolor.x8 {
  background-color: #3E9BD6;
}

.tagcolor.x9 {
  background-color: #40CA78;
}

.tagcolor.x10 {
  background-color: #5C4333;
}

.tagcolor.x11 {
  background-color: #272727;
}

.domain-status {
  padding: 6px;
  width: 12px;
  height: 12px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  /* future proofing */
  -khtml-border-radius: 50px;
  float: left;
  background-color: #E3E6ED;
}

.domain-status.active {
  background-color: #4DCF84;
}

.logopreview-nav {
  padding: 30px 70px;
  width: 340px;
  background-color: #333;
  margin-bottom: 30px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
  /* for old Konqueror browsers */
  border: 1px solid #E3E6ED;
}

.logopreview-email {
  padding: 30px 80px;
  background-color: #FFF;
  margin-bottom: 30px;
  border: 1px solid #E3E6ED;
}

.font-sample-title {
  font-size: 2.8em;
  color: #000;
}

.font-sample-copy {
  font-size: 1.1em;
  color: #999;
}

.url-info {
  background-color: #fefbed;
  color: #86711c;
  font-size: 0.9rem;
  padding: 0.5rem;
  margin-bottom: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #ead888;
  -khtml-border-radius: 4px;
  margin-bottom: 1.25rem;
  letter-spacing: -0.1px;
}

.url-info.old-version {
  background-color: var(--primary-pink);
  padding: 20px 40px 40px 40px;
  font-size: 1rem;
  border: none;
  color: white;
}

.url-error {
  color: #EB5463;
}

.cover-style {
  width: 200px;
  margin-right: 30px;
  border: 4px solid #CCC;
  cursor: pointer;
}

.cover-style.active {
  border: 4px solid #5ED699;
}

.settings-referral {
  padding: 20px 10px;
  height: 62px;
  margin-bottom: 10px;
  font-size: 16px;
  text-indent: 60px;
  font-weight: bold;
  text-align: left;
  line-height: 20px;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 40px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* future proofing */
  -khtml-border-radius: 4px;
}

.settings-referral.facebook {
  background-image: url(../img/icons/settings-referral-facebook.png);
  border: 2px solid #3B5998;
  color: #3B5998;
}

.settings-referral.twitter {
  background-image: url(../img/icons/settings-referral-twitter.png);
  border: 2px solid #55ACEE;
  color: #55ACEE;
}

/* FEATURED SECTIONS ON PROPOSAL SENT PAGE */
.featured-h1 {
  color: #181C25;
  font-family: var(--font-medium);
  font-weight: 500;
}

.featured-highlight {
  background-color: #f8eba9;
  padding: 0 5px;
  color: #181C25;
}

.upgrade-tag {
  padding: 16px;
  font-size: 0.8em;
  line-height: 1.1em;
  float: left;
  background-color: #f1fbf5;
  border: 1px solid #d3f3e1;
  color: #000;
  border-radius: 3px;
}

/* INTEGRATIONS */
.integrations-wrapper .cards.card-plus {
  overflow: hidden;
}

.integrations-wrapper .cards>div {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 164px;
  overflow: hidden;
}

.padding30.selected {
  border: 1px solid #4DCF84;
}

.integrations-icon {
  width: 100px;
  max-width: 100%;
}

.integrations-cards {
  position: relative;
  overflow: hidden;
  border: 1px solid #E3E6ED;
  background-color: #FFF;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
}

.integrations-icon-success {
  width: 75px;
  max-width: 75px;
  margin: 50px 0 50px 0;
}

.ribbon-integration-advanced {
  font-family: var(--font-medium);
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  padding: 4px 0;
  top: 19px;
  width: 100%;
  background-color: #7b8290;
  color: #fff;
  font-size: 0.7rem;
  min-width: 180px;
  position: absolute;
  right: 0;
  margin-right: -65px;
}

.ribbon-integration-advanced.hubspot-advanced {
  background: #f7761e;
}

.ribbon-integration-advanced.salesforce-advanced {
  background-color: #009dda;
}

.integrations-cards .ribbon-integration-advanced {
  top: 21px;
  margin-right: -59px;
}

.tag-connected {
  background-color: #4DCF84;
  float: left;
  color: #FFF;
  padding: 6px 18px;
  text-align: center;
  width: 180px;
  font-size: 0.7em;
  font-family: var(--font-medium);
  font-weight: 500;
  text-transform: uppercase;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  /* future proofing */
  -khtml-border-radius: 30px;
  margin-top: 10px;
}

.tag-connected.not {
  background-color: #BEC3C7;
}

/* LEARNING CENTRE */
.learning-block {
  font-family: var(--font-regular);
  padding: 30px;
  font-weight: 400;
  background-color: #FFF;
  color: #494C54;
  font-size: 1em;
  line-height: 1.6em;
  border-bottom: 3px solid #D6D9E2;
  margin-bottom: 30px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* future proofing */
  -khtml-border-radius: 8px;
  /* for old Konqueror browsers */
}

.learning-block.complete {
  border: 2px solid #4DCF84;
}

.learning-image {
  width: 100%;
}

.learning-progressbar-bg {
  position: relative;
  width: 100%;
  height: 30px;
  margin-top: 40px;
  background-color: #7B8290;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 60px;
  -khtml-border-radius: 60px;
  margin-bottom: 60px;
}

.learning-progressbar-inner {
  width: 0%;
  height: 30px;
  background-color: #4DCF84;
  color: #FFF;
  line-height: 30px;
  text-align: center;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 60px;
  -khtml-border-radius: 60px;
}

.learning-progressbar-0 {
  width: 100%;
  background-color: #7B8290;
  text-align: left;
  margin-left: 10px;
}

.learning-progressbar-10 {
  width: 10%;
}

.learning-progressbar-20 {
  width: 20%;
}

.learning-progressbar-30 {
  width: 30%;
}

.learning-progressbar-40 {
  width: 40%;
}

.learning-progressbar-50 {
  width: 50%;
}

.learning-progressbar-60 {
  width: 60%;
}

.learning-progressbar-70 {
  width: 70%;
}

.learning-progressbar-80 {
  width: 80%;
}

.learning-progressbar-90 {
  width: 90%;
}

.learning-progressbar-100 {
  width: 100%;
}

/* UPGRADE */
.upgrade-title-frame {
  padding: 30px;
  background: #01A3EF;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.upgrade-title-frame.report {
  background: #181C25;
}

.upgrade-title {
  font-family: var(--font-medium);
  letter-spacing: -0.08px;
  font-weight: 500;
  color: #FFF;
  font-size: 1.8em;
  line-height: 1.2em;
  margin-bottom: 20px;
}

.upgrade-copy {
  font-family: var(--font-regular);
  font-weight: 400;
  color: #E3E6ED;
  font-size: 1.05em;
}

.upgrade-copy.price {
  font-weight: 500;
  opacity: 1;
  font-size: 1.8em;
}

.upgrade-price.pm {
  opacity: 0.4;
  font-weight: 400;
}

.upgrade-ticks {
  padding: 5px 5px 5px 30px;
  font-family: var(--font-regular);
  color: #485059;
  font-weight: 400;
  background-image: url(../img/icons/upgrade-tick.png);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center left;
}

.upgrade-icon {
  width: 75px;
  opacity: 0.9;
  margin: 60px 0 0 0;
}

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

.actions-buttons > * {
  display: inline-block;
  float: none;
  vertical-align: top;
  width: auto;
}

.actions-buttons .button.white {
  margin-bottom:0px!important;;
  margin: 5px 2px;
}


/* Media Queries */
/* iPhone */
@media screen and (max-width: 640px) and (max-width: 1136px) {

  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8,
  .grid_9,
  .grid_10,
  .grid_11,
  .grid_12,
  .grid_sidebar {
    width: 100%;
    overflow: auto;
  }

  .grid_1_dashboard,
  .grid_2_dashboard,
  .grid_3_dashboard,
  .grid_4_dashboard,
  .grid_5_dashboard,
  .grid_6_dashboard,
  .grid_7_dashboard,
  .grid_8_dashboard,
  .grid_9_dashboard,
  .grid_10_dashboard,
  .grid_11_dashboard,
  .grid_12_dashboard,
  .grid_sidebar {
    width: 100%;
  }

  .sidebar {
    -webkit-box-flex: none;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: none;
    /* OLD - Firefox 19- */
    -webkit-flex: none;
    /* Chrome */
    -ms-flex: none;
    /* IE 10 */
    flex: none;
  }

  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .container-small, .container-upgrade, .container-welcome, .container-pricing {
    max-width: 100%;
  }

  .main-frame {
    display: block;
  }

  h1 {
    margin-top: 30px;
    margin-bottom: 20px;
    line-height: 1.3;
  }

  .button {
    width: 100%;
    margin-bottom: 30px;
  }

  .button.save {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .button.red {
    margin-left: 0;
  }

  .button.white {
    margin-bottom: 10px;
  }

  .button.small {
    width: 100%;
  }

  .actions-row {
    display: flex;
    flex-direction: column;
  }

  .actions-row td {
    width: 100%;
    border: none;
    padding: 10px 0;
  }

  .actions-row td:last-child{
    border-bottom:1px solid #F4F4F4;
  }

  .actions-buttons{
    text-align: left;
  }

  
  .actions-buttons .button.small {
    width: auto;
  }

  .padding30{
    padding: 20px;
  }
  
  .header {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .header-trial {
    padding: 10px;
    text-align: center;
    font-size: 0.8em;
    font-weight: 500 !important;
  }

  #clockdiv-small {
    font-size: 16px !important;
  }

  .logopreview-nav {
    width: 100%;
    padding: 30px 0 30px 0;
  }

  .logopreview-email {
    width: 100%;
    padding: 30px 0 30px 0;
    text-align: center;
  }

  .upload-logo-button {
    margin: 0 auto;
  }

  .blankslate-copy {
    width: 100%;
  }

  .textbox.filter {
    width: 100%;
  }

  .proposal-branding-bar {
    font-size: 0.9em;
    width: 90%;
    margin: 0 auto;
  }

  .proposal-branding-icon-block {
    width: 50%;
    float: left;
    margin-bottom: 30px;
  }

  .proposal-branding-icon {
    width: 50px;
    margin-bottom: 15px;
  }

  ul.tabs li {
    width: 100%;
  }

  ul.tabs li.tab-left {
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-left: 20px;
  }

  ul.tabs li.tab-right {
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding-right: 20px;
  }
}

@media (max-width: 990px) {
  .shownav {
    background-image: url(/2/img/icons/shownav.png);
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: left center;
    width: 40px;
    height: 30px;
    float: right;
    margin-right: -20px;
  }

  .mobile-hide {
    display: none !important;
  }

  .desktop-hide {
    display: block !important;
  }

  .mobile-nav {
    width: 100%;
    background-color: #24272B;
    height: 100%;
    padding-top: 20px;
    z-index: 1000;
  }

  .mobile-nav-link {
    color: #FFF;
    opacity: 0.8;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    float: left;
    padding: 20px;
  }

  .mobile-nav-link.active {
    opacity: 1;
    font-weight: 500;
  }

  .proposal-card:not(.mobile-touch) .proposal-card-content {
    margin-right: 0rem;
    right: 0;
    min-width: max-content;
    text-align: left;
    top: 95px;
    visibility: hidden;
    opacity: 0;
    height:0;
  }

  .proposal-card.always-show .proposal-card-content,
  .proposal-card.mobile-touch .proposal-card-content {
    visibility: visible;
    height: auto;
    opacity: 1;
    z-index: 1111;
  }

    /* make sure the popup-trigger link never changes color on hover */
  .proposal-card .recurringValuesPopup,
  .proposal-card .recurringValuesPopup:hover {
    /* force it to stay the same as its normal state… */
    color: inherit;
    /* …but still show the underline, if you want: */
    text-decoration: underline;
  }

  .proposal-card td a.recurringValuesPopup:hover {
    color: inherit !important;
  }

  /* only on fine-pointer / hover-capable devices do we enable :hover */
  @media (hover: hover) and (pointer: fine) {
    .proposal-card:hover .proposal-card-content {
      visibility: visible;
      height: auto;
      opacity: 1;
      z-index: 1111;
      transition-delay: 0s;
    }
    .proposal-card td a.recurringValuesPopup:hover {
      color: var(--info-blue) !important;
    }
  }

  .proposal-card-content.left-arrow:after {
    right: 5%;
    top: -19px;
    border-bottom: 10px solid #FFF;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    }
}

/* GENERAL STYLES */
.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

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

.flex-column {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.mb-0 {
  margin-bottom: 0;
}

.p-2 {
  padding: 2rem;
}

.columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

a.button {
  text-decoration: none;
}

.btn-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.merge-tags-list {
  display: flex;
  align-items: center;
  justify-content: end;
  padding-top: 3px;
}

.merge-tags-list>span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #A9B5CA;
  transform: rotate(-45deg);
}

.merge-tags-list>span.active {
  background: #4DCF84;
}

.mergetag-input {
  background-image: url("../img/layout/settings-mergetag-label-background.png");
  background-size: contain;
  background-position: 50% 50%;
  padding-left: 28px;
  padding-right: 28px;
}

.content-wrapper {
  margin: auto;
  padding: 0 1rem;
}

.content-wrapper .small-container {
  width: 100%;
  max-width: 968px;
  margin: auto;
}

/*.content-wrapper {
	&.small-container {
		max-width: 968px;
	}

	&.medium-container {
		max-width: 1000px;
	}

	&.large-container {
		max-width: 1600px;
	}

	&.full-width-container {
		max-width: 100%;
		padding: 0 2rem;
	}
}*/
.notifications-input-wrapper input[type=checkbox] {
  margin-left: 2px;
  margin-right: 4px;
}

.button.pink,
button.pink {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42.8px;
}

.button.pink i.ico-plus,
button.pink i.ico-plus {
  line-height: 1;
  margin-right: 8px;
}

.button.white.settings-spacer {
  display: flex;
  align-items: center;
  min-height: 43.8px;
}

.mt-1_5 {
  margin-top: 1.5rem;
}

#dashboardChart {
  max-width: 100%;
}

.account-columns-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-grow: 1;
  gap: 1.5rem;
}

.account-columns-wrap #settings-form {
  flex-grow: 1;
  flex-basis: 400px;
}

.account-columns-wrap .logopreview-nav {
  max-width: 100%;
}

.main-content-wrapper .content-wrapper .button-big-frame {
  display: flex;
  flex-direction: column;
}

.main-content-wrapper .content-wrapper ol {
  margin-left: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.main-content-wrapper .content-wrapper ol li:first-child {
  margin-left: -2px;
}

.button-wrapper-microcopy {
  display: flex;
  flex-direction: column;
}

.button-wrapper-microcopy .microcopy {
  max-width: 400px;
}

.small-container .integrations-icon-success {
  margin: 20px 0 40px 0;
}

.small-container .mediumcopy {
  font-size: 1.2rem;
}

@-moz-document url-prefix() {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.branding-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: center;
  justify-content: center;
  grid-gap: 1.5rem;
}

.branding-grid-wrapper .brand-card {
  min-width: 240px;
  max-width: 250px;
  width: 100%;
}

.branding-grid-wrapper .brand-card .cards {
  min-height: 195px !important;
  display: flex;
  justify-content: center;
  height: 100%;
}

.branding-grid-wrapper .brand-card .cards>div {
  display: flex;
  align-items: center;
}

.covers-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-column-gap: 1rem;
  grid-row-gap: 2.5rem;
}

.feature-badge {
  background: #EBFAF7;
  padding: 8px 10px;
  display: inline-flex;
  border-radius: 3px;
  font-family: var(--font-medium);
  letter-spacing: -0.1px;
  color: #2db89c;
}

.feature-badge>.ico {
  margin-right: 7px;
  font-size: 18px;
  line-height: 1;
}

.loader-containar {
  width: 100%;
  display: flex;
  justify-content: center;
}

.snake-loader {
  width: 0;
  height: 5px;
  border-radius: 20%;
  animation: snake 2s ease-in-out infinite;
  display: none;
}

@keyframes snake {
  0% {
    width: 0px;
    background-color: #4286f4;
  }

  50% {
    width: 100%;
    background-color: #11418e;
  }

  100% {
    width: 0px;
    background-color: #4286f4;
  }
}

.integrations-cards {
  position: relative;
}

.button-wrapper-microcopy {
  display: flex;
  flex-direction: column;
}

.button-wrapper-microcopy .microcopy {
  max-width: 400px;
}

.button.white.small.addcolour {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding: 10px;
  width: auto;
}

.button.white.small.addcolour .ico-plus {
  line-height: 1;
  font-size: 12px;
  margin: 2px 12px 0 2px;
}

.button.white.small.btn-delete-colour.right {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 0;

}

@media screen and (max-width: 640px) {
  .btn-delete-colour-text {
    display: none;
  }

  .button.white.small.btn-delete-colour.right {
    width: 36px;
    border: 1px solid white;
    display: inline-block;
  }
}

.extra-fields.colour {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
}

.extra-fields.colour .textbox {
  margin-bottom: 0;
}

.button.white.small.btn-delete-colour.right .ico-cross {
  font-size: 10px;
  margin: 2px 12px 0 2px;
}


/* BRANDING / CUSTOM DOMAIN */
body#branding .url-error {
  color: #eb5463;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: -0.1px;
}

.dns-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 0.7rem;
  margin-top: 1.5rem;
}

.dns-cards-wrapper .card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
  padding: 1rem;
  border: 1px solid #d9dce1;
  cursor: pointer;
  transition: all 200ms ease-in-out;
}

.dns-cards-wrapper .card img {
  max-width: 100%;
}

.dns-cards-wrapper .card:hover {
  border: 1px solid #7b8290;
}

.dns-cards-wrapper .card .radio {
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .dns-cards-wrapper .radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    height: 1rem;
    width: 1rem;
    outline: none;
    transition: background 0.2s ease-out, border-color 0.2s ease-out;
  }

  .dns-cards-wrapper .radio::after {
    border: 1.5px solid #fff;
    border-top: 0;
    border-left: 0;
    content: "";
    display: block;
    height: 0.5rem;
    left: 25%;
    position: absolute;
    top: 50%;
    transform: rotate(45deg) translate(-50%, -50%);
    width: 0.275rem;
  }

  .dns-cards-wrapper .radio:checked {
    background: #2d74ff;
    border-color: #2d74ff;
  }

  .dns-cards-wrapper .card:hover .radio {
    border-color: #c4d1e1;
  }

  .dns-cards-wrapper .card:hover .radio:checked {
    border-color: #2d74ff;
  }
}

.dns-table {
  margin-top: 2rem;
}

.dns-guide-wrapper {
  margin-top: 2.5rem;
  padding-bottom: 1.5rem;
}

.dns-guide-wrapper p.subtitle {
  text-align: center;
  color: #72787f;
  margin-bottom: 2rem;
}

.dns-guide-wrapper h2 {
  margin-bottom: 0.5rem;
  text-align: center;
}

.dns-guide-wrapper h3 {
  font-family: var(--font-medium);
}

.dns-table-wrapper th span.tooltip--triangle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
}

.dns-table-wrapper th span.tooltip--triangle:hover::after {
  max-width: 300px;
}

.dns-table-wrapper th span.tooltip--triangle .ico {
  font-size: 1rem;
  line-height: 0;
  margin-left: 4px;
  margin-top: 2px;
  opacity: 0.5;
}

.dns-table-wrapper .buttons-wrapper {
  margin-top: 1.5rem;
}

.domain-status {
  position: relative;
  margin-left: 0.5rem;
}

.domain-status:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  top: 0;
  bottom: 0;
  margin-left: 1px;
  margin-top: 1px;
}

.domain-status.verified {
  background-color: #4dcf84;
}

.domain-status.verified:after {
  box-shadow: 0 0 0 0 rgba(77, 207, 132, 0.4);
  animation: pulse-verified 1.5s infinite;
}

.domain-status.failed {
  background-color: #d92d51;
}

.domain-status.failed:after {
  box-shadow: 0 0 0 0 rgba(217, 45, 81, 0.4);
  animation: pulse-failed 1.5s infinite;
}

.dns-table-cname-target {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 0.65rem;
  background: white;
  border-radius: 3px 4px 4px 3px;
  border: 1px solid #e8e8e8;
  transition: border 200ms ease-in-out;
}

.dns-table-cname-target:hover {
  border: 1px solid #a8a9ad;
}

.dns-table-cname-target .copy-icon-wrapper {
  padding: 0.6rem;
  width: 45px;
  display: flex;
  justify-content: center;
  height: 42px;
  border-left: 1px solid #e8e8e8;
  margin-top: -1px;
  margin-bottom: -1px;
  border-radius: 0 3px 3px 0;
  transition: border-left 200ms ease-in-out, color 200ms ease-in-out;
  color: rgba(73, 76, 84, 0.9);
}

.dns-table-cname-target .copy-icon-wrapper:hover {
  border-left: 1px solid #a8a9ad;
  color: #494c54;
}

@-webkit-keyframes pulse-verified {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(84, 171, 62, 0.4);
  }

  70% {
    -webkit-box-shadow: 0 0 0 6px rgba(84, 171, 62, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(84, 171, 62, 0);
  }
}

@keyframes pulse-verified {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(84, 171, 62, 0.4);
    box-shadow: 0 0 0 0 rgba(84, 171, 62, 0.4);
  }

  70% {
    -moz-box-shadow: 0 0 0 6px rgba(84, 171, 62, 0);
    box-shadow: 0 0 0 6px rgba(84, 171, 62, 0);
  }

  100% {
    -moz-box-shadow: 0 0 0 0 rgba(84, 171, 62, 0);
    box-shadow: 0 0 0 0 rgba(84, 171, 62, 0);
  }
}

@-webkit-keyframes pulse-failed {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(217, 45, 81, 0.4);
  }

  70% {
    -webkit-box-shadow: 0 0 0 6px rgba(217, 45, 81, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(217, 45, 81, 0);
  }
}

@keyframes pulse-failed {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(217, 45, 81, 0.4);
    box-shadow: 0 0 0 0 rgba(217, 45, 81, 0.4);
  }

  70% {
    -moz-box-shadow: 0 0 0 6px rgba(217, 45, 81, 0);
    box-shadow: 0 0 0 6px rgba(217, 45, 81, 0);
  }

  100% {
    -moz-box-shadow: 0 0 0 0 rgba(217, 45, 81, 0);
    box-shadow: 0 0 0 0 rgba(217, 45, 81, 0);
  }
}

.submit-domain-wrapper {
  margin-top: 2.5rem;
}

.submit-domain-wrapper h2 {
  margin-bottom: 0.5rem;
}

.submit-domain-wrapper #CustomURL {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

#step-3 {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

#step-3 h2 {
  margin-bottom: 0.5rem;
}

#step-3 p {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.buttons-wrapper,
.guide-text-wrapper,
.dns-table-wrapper,
.submit-domain-wrapper,
.dns-guide-wrapper {
  opacity: 1;
  height: 100%;
  transform: translateY(0);
  transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;
}

.dns-table-wrapper .mobile-label {
  display: none;
}

#brand-url .custom-url-wrapper{
  display: flex;
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
	.dns-table-wrapper thead {
		display: none;
	}

	.dns-table-wrapper tbody tr,
	.dns-table-wrapper tbody {
		display: flex;
		flex-direction: column;
	}

	.dns-table-wrapper tbody tr {
		padding: 0.3rem 0;
	}

	.dns-table-wrapper tbody tr:not(:last-child) {
		border-bottom: 1px solid #aaa;
	}

	.dns-table-wrapper tbody td {
		display: flex;
    flex-direction: column;
		padding: 0.2rem 0.62rem;
    text-align: left;
    align-items: flex-start;
    border-radius: 0;
    border: none;
    overflow-wrap: anywhere;
	}

  .dns-table-wrapper #domain-status{
    margin: 5px 0;
  }

  .dns-table-cname-target .copy-icon-wrapper{
    display: none!important;
  }

	.dns-table-wrapper .mobile-label {
		display: inline-block;
		font-weight: 600;
		font-family: "Gordita Medium", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
	}
}


.hide {
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transform: translateY(10px);
}

/* USERS */
#users-list .ico-mail {
  font-size: 1rem;
  line-height: 0.5;
  margin-right: 0.5rem;
}

@media (max-width: 640px) {
  #js-table-wrapper thead,
  #users-list thead {
    display: none;
  }
  
  #js-table-wrapper tbody tr ,
  #users-list tbody tr {
    display: flex;
    flex-direction: column;
  }

  #js-table-wrapper tbody tr td,
  #users-list tbody tr td{
      text-align:left;
      padding: 5px; 
  }
  #js-table-wrapper tbody tr td:first-child{
    font-weight:bold;
  }


  #js-table-wrapper tbody tr td:not(:last-child) ,
  #users-list tbody tr td:not(:last-child) {
      border: none;
  }

  #js-table-wrapper tbody tr td:last-child .right ,
  #users-list tbody tr td:last-child .right {
    float: left !important;
  }
  
  #js-table-wrapper tbody tr td:last-child ,
  #users-list tbody tr td:last-child {
      width: 100%;
      clear: both;
      justify-content: flex-start;
  }
}

.tipbox-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #FDFEFE;
  color: #43A5A1;
  font-size: 0.92rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  border: 1px solid #94CCC9;
}

.tipbox-info .ico, .tipbox-info .icon {
  line-height: 0;
  margin-right: 10px;
}

.video-holder {
  width: 100%;
  max-width: 1800px;
  margin: 1rem auto;
  box-shadow: inset 15px 15px 0 #FFF;
  border-radius: 8px;
  overflow: hidden;
}

.video-holder video {
  width: 100%;
  display: block;
  box-shadow: inset 15px 15px 0 #FFF;
}

.mobile-save-cancel-buttons {
  display: flex;
}

.btn-save-changes {
  margin-top: 0;
  margin-right: 10px;
}

label.label {
  display: block;
  cursor: pointer;
}

.learning-block .button {
  display: inline-block !important;
  min-height: auto;
}

#billing-wrapper .buttons-wrapper{
  display: flex;
  justify-content: flex-end;
}



.mobile-show{
  display: none;
}

@media (max-width: 640px) {
  .learning-image{
    margin-top: 30px;
  }

  .learning-block .button {
    margin: 0;
  }

  .learning-block .button.pink {
    margin-bottom: 20px;
  }

  .mobile-save-cancel-buttons {
    flex-direction: column-reverse;
    gap: 20px;
  }

  #sub-nav-tabs > a:not(:first-child) {
    display: none;
  }
  
  #sub-nav-tabs .current{
    display: none;;
  }

  #sub-nav-option{
    text-transform: capitalize;
  }
  
  #sub-nav-option > li{
    display: flex;
    justify-content: space-between;
  }

  #sub-nav-option .ico-chevron{
    transform: rotate(90deg);
  }

  #sub-nav-tabs.open #sub-nav-option .ico-chevron{
    transform: rotate(-90deg);
    margin-right: -4px;
  }

  #sub-nav-tabs.open > a {
    display: block;
  }

  .hide-sm{
    display: none!important;
  }

  #branding-tabs-wrapper{
    flex-basis: auto!important;
  }
  
  #templates-section,
  #documents-section,
  #documents-section .grid_9{
    overflow:unset!important;
  }

  #billing-wrapper .buttons-wrapper,
  #billing-wrapper .mobile-flex-columns {
    display: flex;
    flex-direction: column;
  }

  #billing-wrapper .text-align-right{
    text-align: left;
    margin-top: 10px;
  }

  #billing-wrapper .creditbar-behind{
    margin-top: 10px;
    margin-bottom: 20px;
  }

  #billing-wrapper .button{
    margin: 0 0 10px 0;
  }

  #billing-wrapper .user-row:not(:last-child),
  #billing-wrapper .deletedUserRow:not(:last-child){
    border-bottom: 1px solid #E3E6ED;
    margin-bottom: 10px;
  }
    

  #invoices table th,
  #invoices table td {
    padding: 15px;
  }

  #invoices table tr:first-child{
    display: none;
  }
  
  #invoices table tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid #E3E6ED;
    padding: 10px 0;
  }

  #invoices table td {
    padding: 5px 0px;
    border: none;
    width: 100%;
  }

  .mobile-show{
    display: inline-block;
  }
}

@media (min-width: 640px) {
  #find-template-title{
    margin-top:0;
  }

  #sub-nav-tabs > a:first-child {
    display: none;
  }

  .marketplace-container-wrapper .fitcontent{
    flex-basis: fit-content;
  }

  #invoices table td:nth-child(2) {
    text-align: center;
  }
}