/* src/ui/components/App.scss */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#root {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.app,
.loading {
  font-weight: 300;
  font-family:
    "Avenir Web",
    "Avenir LT W01_45 Book1475508",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  color: #484949;
  background-color: #ffffff;
  box-sizing: border-box;
  align-self: start;
  width: 100%;
  height: 100%;
}
.app *,
.loading * {
  box-sizing: border-box;
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.app-container__main {
  height: 100%;
  overflow-y: auto;
  flex-grow: 2;
  position: relative;
}
.app-container__tabs {
  position: relative;
}
.app-container.show-tooltip.view--tracking .searchbar {
  z-index: 0;
}
.app-container.show-tooltip.view--tracking .searchbar .search {
  z-index: 0;
}
.settings-button-container {
  z-index: 100;
  width: 100%;
  background-color: #fff;
  height: 32px;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  bottom: 0;
  box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.06);
}
.settings-button-container > .settings {
  font-weight: 300;
  font-family:
    "Avenir Web",
    "Avenir LT W01_45 Book1475508",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 12px;
  color: #a0a0a0;
  border: none;
  background: none;
  text-decoration: underline;
  cursor: pointer;
  padding-right: 16px;
}
.settings-button-container > .settings:hover {
  color: #7a7979;
}
.logout-button-container {
  justify-content: flex-end;
}

/* src/ui/components/Login.scss */
.view--login {
  box-sizing: border-box;
  height: 100%;
  width: 221px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.view--login > header h1 {
  font-weight: 300;
  font-family:
    "Avenir Web",
    "Avenir LT W01_45 Book1475508",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 0;
  font-size: 38px;
  color: #484949;
  line-height: 47px;
}
.view--login > header h1.app-name {
  font-weight: 900;
  font-family:
    "Avenir Web",
    "Avenir LT W01_95 Black1475556",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
}
.view--login > hr {
  justify-self: start;
  display: block;
  margin: 32px 0 33px 0;
  width: 50px;
  height: 6px;
  border: 0;
  background-color: #ff6600;
}
.view--login > .info {
  font-weight: 300;
  font-family:
    "Avenir Web",
    "Avenir LT W01_45 Book1475508",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  margin: 0px 0px 43px 0px;
  line-height: 26px;
  color: #707070;
}
.view--login > .buttons {
  display: flex;
  flex-direction: column;
}
.view--login > .buttons button {
  box-sizing: border-box;
  font-weight: 700;
  font-family:
    "Avenir Web",
    "Avenir LT W01_85 Heavy1475544",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  margin-bottom: 20px;
  font-size: 18px;
  height: 40px;
  border-width: 2px;
}
.view--login > .buttons .get-another {
  box-sizing: border-box;
  margin: 0px 2px 20px 2px;
  font-size: 18px;
  transition: 0.3s;
  border-radius: 3px;
  height: 40px;
  font-weight: 500;
  background: none;
  border: 2.25px solid #bfc3c3;
  color: #bfc3c3;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.view--login > .buttons .get-another:hover {
  background-color: #bfc3c3;
  color: #fff;
}
.view--login > .buttons .get-another > a {
  text-decoration: none;
  color: inherit;
}
.view--login > .login-with-code {
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  color: #787979;
  font-size: 14px;
  text-decoration: underline;
  margin: 0;
}
.view--login > .login-with-code > a {
  color: inherit;
}
.view--login > .error-message {
  margin-bottom: 1em;
  color: #f00000;
  font-size: 12px;
  text-align: center;
}

/* src/ui/components/Tabs/Tabs.scss */
.tabs {
  box-sizing: border-box;
  border-top: 1px solid #bdbdbd;
  padding-top: 10px;
  font-weight: 700;
  font-family:
    "Avenir Web",
    "Avenir LT W01_85 Heavy1475544",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
}
.tabs a,
.tabs a:link,
.tabs a:visited {
  text-decoration: none;
  color: #a0a0a0;
  display: inline-block;
  padding-bottom: 12px;
  padding-top: 4px;
}
.tabs .active a,
.tabs .active a:link,
.tabs .active a:visited,
.tabs .tab:hover a,
.tabs .tab:hover a:link,
.tabs .tab:hover a:visited,
.tabs .tab:focus a,
.tabs .tab:focus a:link,
.tabs .tab:focus a:visited {
  color: #2c2e2f;
}
.tabs .icon {
  position: relative;
  top: 3px;
  margin-right: 6px;
}
.tabs .icon svg * {
  fill: #a0a0a0;
}
.tabs ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.tabs li {
  margin: 0;
  padding: 0;
  width: 100%;
  display: inline-block;
}
.tabs .tab {
  text-align: center;
  grid-row: 1;
  position: relative;
  padding-left: 15px;
}
.tabs .tab > a {
  margin-left: -5px;
}
.tabs .tab--video-library > a {
  margin-left: 0px;
}
.tabs .tab .badge {
  float: right;
  position: absolute;
  right: 12px;
  top: -4px;
}
.tabs .tab--video-library svg {
  width: 25px;
}
.tabs .tab--video-library.active svg *,
.tabs .tab--video-library:hover svg *,
.tabs .tab--video-library:focus svg * {
  fill: #6bb220;
}
.tabs .tab--recorder.active svg *,
.tabs .tab--recorder:hover svg *,
.tabs .tab--recorder:focus svg * {
  fill: #f00000;
}
.tabs .tab--tracking.active svg *,
.tabs .tab--tracking:hover svg *,
.tabs .tab--tracking:focus svg * {
  fill: #ff6600;
}
.tabs .tab--tracking.active .badge svg path,
.tabs .tab--tracking:hover .badge svg path,
.tabs .tab--tracking:focus .badge svg path {
  fill: #ffffff;
}
.tabs .tab-border {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: span 6;
  height: 5px;
  background: #eaeaea;
  position: relative;
}
.tabs .tab-border .border {
  height: 5px;
  border-radius: 3px;
  margin: 0 10px;
  position: absolute;
  left: 0;
  padding-top: 2px;
  transition: cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
}
.tabs .tab-border.active-tab--record .border {
  background-color: #f00000;
  left: 0;
}
.tabs .tab-border.active-tab--video-library .border {
  background-color: #6bb220;
  left: 18%;
}
.tabs .tab-border.active-tab--tracking .border {
  background-color: #ff6600;
  left: calc(34% - 2.5px);
}
.tabs.tabs3 .border {
  width: calc(15% - 10px);
}

/* src/ui/components/Tracking.scss */
.tab--tracking .loading {
  margin: 20px 0;
}
.tab--tracking .livefire-contents {
  text-align: center;
}
.tab--tracking .livefire-contents .feed {
  max-height: calc(100vh - 140px);
}
.tab--tracking div[role=feed] .error-container {
  min-height: 300px;
  height: 85%;
}
.tab--tracking > .error-container {
  align-items: center;
  text-align: center;
}
.tab--tracking .icon--play svg,
.tab--tracking .icon--video_watched svg {
  width: 15px;
  height: 16px;
}
.tab--tracking .empty-state-container {
  text-align: center;
  display: flex;
  align-items: center;
}

/* src/ui/components/VideoLibrary.scss */
.tab--video-library {
  height: 100%;
}
.tab--video-library .override .video-library--videos[role=list] {
  height: calc(100vh - 250px);
}
.tab--video-library .override div.buttons {
  display: flex;
  justify-content: center;
}
.tab--video-library .override .video-library--confirm-delete {
  text-align: center;
}
.tab--video-library .browser--legacy .video-library--videos[role=list] {
  -ms-overflow-style: scrollbar;
}
.tab--video-library .override .brand--new .dropdown .labels-dropdown {
  height: 100%;
}

/* src/ui/components/AccountOverlay.scss */
.overlay-content {
  position: absolute;
  background: #fff;
  height: 146px;
  width: 100%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid #bdbdbd;
}
.account-overlay {
  background: rgba(255, 255, 255, 0.8) 0% 0% no-repeat padding-box;
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100vh;
}
h3 {
  font-weight: 700;
  font-family:
    "Avenir Web",
    "Avenir LT W01_85 Heavy1475544",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 21px;
  font-weight: 500;
  margin-top: 30px;
}
.buy-now {
  display: inline-block;
  padding: 0.57rem 0.9rem;
  text-decoration: none;
  font-size: 1em;
  line-height: 1.3em;
  border: 0;
  cursor: pointer;
  height: 2.29rem;
  min-height: 2.29rem;
  transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  font-weight: 500;
  font-family:
    "Avenir Web",
    "Avenir LT W01_65 Medium1475532",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  background-color: #ff6600;
  width: 216px;
  text-transform: uppercase;
  outline: none;
  height: 36px;
  border-radius: 0;
  color: #fff;
  border: none;
  font-size: 14px;
}
.buy-now:hover {
  background-color: #bd4f27;
}

/* src/ui/components/TrialBanner.scss */
.banner--trial {
  position: relative;
  font-size: 13px;
}
.banner--trial > div {
  padding-right: 29px;
}
.banner--trial > .button--container {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 12px;
  width: 29px;
  height: 100%;
}
.banner--trial > .button--container button {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  width: 11.75px;
  height: 11.75px;
  cursor: pointer;
}
.banner--trial > .button--container svg {
  width: 11.75px;
  height: 11.75px;
}
.banner--trial > .button--container svg path {
  fill: #fff;
}

/* src/ui/components/Record.scss */
.pane {
  height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.compose-view {
  background-color: rgb(248, 248, 248);
}
.record svg * {
  fill: #f00000;
}
.icon-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.icon-container--record svg {
  width: 31.66px;
  height: 31.66px;
}
.compose-view .icon-container {
  background-color: #fff;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.05);
  height: 155px;
  width: 202px;
  margin: 35px auto 5px;
  border-radius: 3px;
  cursor: pointer;
}
@media (max-height: 565px) {
  .compose-view .icon-container {
    margin: 15px auto 5px;
  }
}
.compose-view .icon-container:hover {
  border: 2px solid rgb(253, 105, 35);
}
.read-view .icon-container,
.in-recording .icon-container {
  border-radius: 8px;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.09);
  height: 72px;
  width: 72px;
}
.read-view p {
  margin-top: 0;
}
h3 {
  font-weight: 500;
  font-family:
    "Avenir Web",
    "Avenir LT W01_65 Medium1475532",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  margin: 0;
}
@media (max-height: 565px) {
  h3 {
    margin-top: 15px;
  }
}
h4 {
  font-weight: 500;
  font-family:
    "Avenir Web",
    "Avenir LT W01_65 Medium1475532",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
  margin: 0;
  margin-top: 13px;
}
h2 {
  font-weight: 700;
  font-family:
    "Avenir Web",
    "Avenir LT W01_85 Heavy1475544",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 18px;
}
.pane p {
  font-weight: 200;
  font-family:
    "Avenir Web",
    "Avenir LT W01_35 Light1475496",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
}
.in-recording p {
  width: 200px;
  margin: 0 0 1rem 0;
}
.button--cancel {
  font-weight: 200;
  font-family:
    "Avenir Web",
    "Avenir LT W01_35 Light1475496",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
  padding: 16px 0 0 0;
  color: #a0a0a0;
  margin: 0 auto;
}
.button--cancel:hover,
.button--cancel:active {
  color: #484949;
}

/* src/ui/components/EmailSent.scss */
.notification--email-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-top: 1px solid #bdbdbd;
}
.notification--email-sent > .icon {
  display: flex;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.0901960784);
  border-radius: 8px;
  padding: 13.5px;
}
.notification--email-sent > .icon > svg {
  width: 26px;
  height: 26px;
}
.notification--email-sent > .icon > svg > path {
  fill: #6bb220;
}
.notification--email-sent > h1 {
  font-weight: 700;
  font-family:
    "Avenir Web",
    "Avenir LT W01_85 Heavy1475544",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  color: #484949;
  font-size: 18px;
  line-height: 25px;
  margin: 25px 0 0 0;
}
.notification--email-sent > p {
  font-weight: 300;
  font-family:
    "Avenir Web",
    "Avenir LT W01_45 Book1475508",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  color: #787979;
  font-size: 14px;
  line-height: 20px;
  padding: 0;
  margin: 5px 0 0 0;
}

/* src/ui/components/SendAndTrack.scss */
.app-container__tabs button {
  padding: 0;
}
.send-and-track__button {
  font-size: 14px;
  width: 108px;
  position: absolute;
  bottom: 15px;
  right: 19px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.send-and-track__button--overlay {
  z-index: 110;
}
.send-and-track__sending {
  position: absolute;
  bottom: 19px;
  right: 69px;
}
.send-and-track__overlay {
  position: fixed;
  z-index: 109;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(116, 116, 116, 0.65);
}
.send-and-track__info {
  position: absolute;
  z-index: 110;
  right: 19px;
  padding: 20px;
  margin-top: 5px;
  width: 218px;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
}
.send-and-track__info::after {
  content: " ";
  border-bottom: 10px solid #ffffff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  position: absolute;
  top: -10px;
  width: 0;
  font-size: 0;
  line-height: 0;
  right: 30px;
}
.send-and-track__heading {
  font-weight: 900;
  font-family:
    "Avenir Web",
    "Avenir LT W01_95 Black1475556",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 18px;
  line-height: 25px;
  margin: 5px 0 0 0;
  padding: 0;
  color: #ff6600;
}
.send-and-track__copy {
  font-weight: 300;
  font-family:
    "Avenir Web",
    "Avenir LT W01_45 Book1475508",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #484949;
  margin: 5px 0;
}
.send-and-track__copy strong {
  font-weight: 700;
  font-family:
    "Avenir Web",
    "Avenir LT W01_85 Heavy1475544",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
}
.send-and-track__link {
  font-weight: 300;
  font-family:
    "Avenir Web",
    "Avenir LT W01_45 Book1475508",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #484949;
}
.send-and-track__link:hover,
.send-and-track__link:active {
  color: #ff6600;
}

/* src/ui/components/AutoTrackingGlyph.scss */
.auto-tracking-glyph {
  background-color: #eaeaea;
  border-radius: 0.1875rem;
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
}
.auto-tracking-glyph > span {
  color: #a0a0a0;
  font-size: 0.6875rem;
  font-weight: normal;
  line-height: 0.9375rem;
  white-space: nowrap;
}
.auto-tracking-glyph > svg {
  height: 0.5625rem;
  margin-right: 0.3125rem;
  width: auto;
}
.auto-tracking-glyph .info-hover {
  color: #0099cc;
  background: #e2f5fc;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2039215686);
  display: none;
  font-size: 0.6875rem;
  line-height: 0.9375rem;
  position: absolute;
  padding: 0.75rem 0.5rem 0.375rem 0.375rem;
  right: 0;
  top: calc(100% + 0.625rem);
  width: 10rem;
  z-index: 100;
}
.auto-tracking-glyph .info-hover:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-right: 0.5rem solid transparent;
  border-left: 0.5rem solid transparent;
  border-bottom: 0.5rem solid #e2f5fc;
  right: 0.75rem;
  bottom: 100%;
}
.auto-tracking-glyph:hover .info-hover {
  display: block;
}

/* src/ui/components/TrackingControls.scss */
.tracking-controls > label {
  position: absolute;
  top: 20px;
  right: 22px;
  cursor: pointer;
  font-weight: 700;
  font-family:
    "Avenir Web",
    "Avenir LT W01_85 Heavy1475544",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 12px;
  color: #787979;
}
.tracking-controls > label > div {
  display: inline-block;
  padding-left: 9px;
}
.tracking-controls > label svg {
  position: relative;
  top: 3px;
  fill: #a0a0a0;
  width: 15px;
  height: 15px;
}
.tracking-controls > .auto-tracking-glyph {
  position: absolute;
  top: 25%;
  right: 1rem;
}

/* src/ui/components/Settings.scss */
.settings {
  font-weight: 500;
  font-family:
    "Avenir Web",
    "Avenir LT W01_65 Medium1475532",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
}
.settings > header {
  box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.062745098);
  padding: 21px 0 17px 20px;
}
.settings > header > h1 {
  font-weight: 900;
  font-family:
    "Avenir Web",
    "Avenir LT W01_95 Black1475556",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.settings > .option {
  padding-left: 22px;
  padding-right: 22px;
}
.settings > .option:nth-of-type(1) {
  margin-top: 48px;
}
.settings > .option > .label {
  font-size: 12px;
  line-height: 16px;
  color: #bfc3c3;
}
.settings > .option > .account,
.settings > .option label {
  font-weight: 700;
  font-family:
    "Avenir Web",
    "Avenir LT W01_85 Heavy1475544",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
  color: #484949;
  margin-top: 6px;
}
.settings > .option > label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.settings > .option > label svg {
  width: 25px;
  height: 13px;
}
.settings > .option > label .auto-tracking-glyph {
  cursor: auto;
  font-weight: normal;
}
.settings > .option > label .auto-tracking-glyph > svg {
  height: 0.5625rem;
  margin-right: 0.3125rem;
  width: auto;
}
.settings > .option .help {
  display: block;
  width: 208px;
  font-weight: 300;
  font-family:
    "Avenir Web",
    "Avenir LT W01_45 Book1475508",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 12px;
  font-style: italic;
  line-height: 15px;
  color: #c0c3c3;
}
.settings > .option .modes {
  padding-bottom: 25px;
}
.settings > .option > .logout,
.settings > .option > .settings {
  font-weight: 300;
  font-family:
    "Avenir Web",
    "Avenir LT W01_45 Book1475508",
    "Avenir",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 12px;
  color: #a0a0a0;
  border: none;
  background: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 16px;
}
.settings > .option > .logout:hover,
.settings > .option > .settings:hover {
  color: #7a7979;
}
.settings .filter {
  margin-top: 29px;
}
.settings > hr {
  background: #ddd;
  height: 1px;
  border: 0;
  margin-left: 22px;
  margin-top: 35px;
  margin-bottom: 35px;
}
/*# sourceMappingURL=ui.css.map */