@font-face {
font-family: "Nunito Black";
src: url("fonts/nunito-black-webfont.ttf") format("opentype");
}
@font-face {
font-family: "Nunito SemiBold";
src: url("fonts/nunito-semibold-webfont.ttf") format("opentype");
}
@font-face {
font-family: "Nunito Light";
src: url("fonts/nunito-light-webfont.ttf") format("opentype");
}

:root{
  --logo-primary-color: #94a9ee; /* purple */
  --logo-primary-color-bkg-dark: #8478c9;
  --logo-primary-color-bkg-light: #9e90f1;
  --logo-secondary-color: #642A47; /* marroon */
  --background-color: white;

--secondary-dark-500: hsl(330, 41%, 28%);
--secondary-dark-400: hsl(332, 41%, 36%);
--secondary-dark-300: hsl(334, 39%, 43%);
--secondary-dark-200: hsl(336, 34%, 48%);
--secondary-dark-100: hsl(338, 24%, 57%);
--secondary-light-500: hsl(332, 32%, 66%);
--secondary-light-400: hsl(332, 40%, 73%);
--secondary-light-300: hsl(332, 48%, 80%);
--secondary-light-200: hsl(332, 48%, 88%);
--secondary-light-100: hsl(332, 48%, 95%);

--purple-dark-500: hsl(222, 91%, 23%);
--purple-dark-400: hsl(224, 87%, 31%);
--purple-dark-300: hsl(225, 87%, 37%);
--purple-dark-200: hsl(225, 65%, 57%);
--purple-dark-100: hsl(226, 73%, 76%);
--purple-light-500: hsl(226, 85%, 82%);
--purple-light-400: hsl(220, 91%, 85%);
--purple-light-300: hsl(218, 96%, 87%);
--purple-light-200: hsl(215, 100%, 90%);
--purple-light-100: hsl(214, 90%, 96%);

--grey-dark-500: hsl(209, 61%, 16%);
--grey-dark-400: hsl(211, 39%, 23%);
--grey-dark-300: hsl(209, 34%, 30%);
--grey-dark-200: hsl(209, 28%, 39%);
--grey-dark-100: hsl(210, 22%, 49%);
--grey-light-500: hsl(209, 23%, 60%);
--grey-light-400: hsl(211, 27%, 70%);
--grey-light-300: hsl(210, 31%, 80%);
--grey-light-200: hsl(212, 33%, 94%);
--grey-light-100: hsl(210, 32%, 98%);

--red-dark-500: hsl(348, 94%, 20%);
--red-dark-400:hsl(350, 94%, 28%);
--red-dark-300:hsl(352, 90%, 35%);
--red-dark-200:hsl(354, 85%, 44%);
--red-dark-100:hsl(356, 75%, 53%);
--red-ligth-500:hsl(360, 83%, 62%);
--red-ligth-400:hsl(360, 91%, 69%);
--red-ligth-300:hsl(360, 100%, 80%);
--red-ligth-200:hsl(360, 100%, 87%);
--red-ligth-00:hsl(360, 100%, 95%);

  --light-grey-3: #87afaf57;
  --medium-grey: #87afaf;
  --medium-grey-1: #789b9b;
  --elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .14),
              0 .0625rem .3125rem 0 rgb(0 0 0 / .12),
              0 .1875rem .0625rem -.125rem rgb(0 0 0 / .2);
  --elevate2: 0 .375rem .625rem 0 rgb(0 0 0 / .14),
              0 .0625rem 1.125rem 0 rgb(0 0 0 / .12),
              0 .1875rem .3125rem -.0625rem rgb(0 0 0 / .3);
  --elevate3: 0 .625rem 1rem 0 rgb(0 0 0 / .14),
              0 .0625rem 1.9375rem 0 rgb(0 0 0 / .12),
              0 .1875rem .5625rem 0 rgb(0 0 0 / .4);
}
html, body{
  font-family: 'Nunito Light';
}
h1 {
font-family: 'Nunito Black';
font-weight: normal;
color: var(--logo-secondary-color);
}
h2,h3, h4, h5 {
font-family: 'Nunito SemiBold';
font-weight: normal;
color: var(--logo-secondary-color);
}
.hidden{display: none !important;}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
.nostyle{
  list-style-type: none;
  padding-left: 0;
}
.text-right{text-align: right;}
.text-center{text-align: center;}
.text-muted {
    color: var(--medium-grey-1);
    font-size: 90%;
}
.divider {
    border-bottom: 1px solid var(--light-grey-3);
}
.round{
  border-radius: 50%;
}
.flex-right{
  display: flex;
  justify-content: end;
}
.flex-1{flex: 1;}
.primary{
 fill: var(--logo-primary-color);
}
.add-salon--home .primary{
fill: var(--purple-dark-400);
}
.secondary{
 fill: var(--logo-secondary-color);
}
.secondary-grey{
  fill: var(--purple-light-200);
}
.transp-circle .primary{
  color: transparent;
  fill: transparent;
}
.prs{padding-right: .5em;}

main{padding: 3.5rem .5rem;}
nav.left,nav.right,nav.top,nav.bottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  border:0;
  z-index:100;
  width:auto;
  text-align:center;
}
nav.bottom{
  flex-direction:row;
  height: 2.5rem;
  top:auto;
  bottom:0;
}
nav.top img.logo {
  height: 100%;
}
nav.top h1 {
  flex: 1;
  margin-top: 0;
  padding-left: .5rem;
  text-align: left;
  font-size: 2rem;
}
.brand-name{
  width: 60%;
}
.home-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 30vh;
  margin-top: -3rem;
  background: linear-gradient(to bottom, var(--logo-primary-color-bkg-dark) 1%,var(--logo-primary-color-bkg-light) 100%);
}
@media all and (max-width: 765px){
  .home-header-brand {
    margin-top: 1.5rem;
  }
  .home-header img.logo {
    width: 35%;
    margin-bottom: -19%;
  }
  .home-content{
    margin-top: 7.5rem;
  }
}

.home-header-brand {
    margin-top: 3.5rem;
    padding: 0;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: .05rem;
}
.brand {
    position: absolute;
    top: 7%;
    width: 50%;
    border-radius: 37px;
    box-shadow: 4.4px 3.7px 6.3px rgba(0, 0, 0, 0.028),
  9.7px 8.2px 16.6px rgba(0, 0, 0, 0.041),
  16.8px 14.1px 33px rgba(0, 0, 0, 0.051),
  26.9px 22.6px 58.8px rgba(0, 0, 0, 0.059),
  43px 36.1px 99.9px rgba(0, 0, 0, 0.069),
  74.1px 62.2px 161.4px rgba(0, 0, 0, 0.082),
  162px 136px 226px rgba(0, 0, 0, 0.11);
}
.logo-badge-wrapper{
    position: relative;
    width: calc(100vw / 3);
}
.home-header img.logo {
    width: 100%;
    background-color: var(--background-color);
    margin-top: auto;
    margin-bottom: -14%;
    padding: 3px;
    border: 3px solid var(--logo-primary-color);
    box-shadow: 0 0 0 4px white;
}
.menu-pending-badge,
.home-pending-badge {
    width: 1.75em;
    line-height: 1;
    padding: .35em;
    display: flex;
    align-items: end;
    justify-content: center;
    background-color: var(--secondary-dark-200);
    color: white;
    font-style: normal;
}
.menu-link-wrapper{
  position: relative;
}
.home-pending-badge {
    position: absolute;
    right: 0;
    bottom: -6%;
    font-size: 86%;
}
.home-content{
  display: flex;
  justify-content: space-evenly;
  margin-top: 15vh;
}
.home-action-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-action-wrapper span {
  width: 6rem;
  text-align: center;
  font-size: 85%;
  line-height: 1;
  color: var(--logo-secondary-color);
}
a.home-action.button,
.home-action.button {
  background-color: var(--grey-light-200);
  padding: .6rem;
  height: calc(50px + 1.2rem);
}
.label.icon{
  background-color: transparent;
}
.svg-icon{
  width: 1.5em;
  height: 1.5em;
}
.svg-icon-action {
  display: inline-flex;
  width: 50px;
  height: 50px;
}
.bizcard-entry .svg-icon{
  width: 1em;
}
.dropimage.bizcard .svg-icon {
    width: 100px;
    height: 65px;
}
.nav-icon .svg-icon{
  width: 2rem;
  height: 2rem;
}
.nav-icon a {
  padding: .25rem .5rem;
}
.card {
    box-shadow: var(--elevate1);
    background-color: var(--grey-light-100);
    color: var(--logo-secondary-color);
    border-radius: .75rem;
    border: none;
    display: block;
}
.card header{
  border-color: var(--light-grey-3);
}
.dropimage.bizcard{
  width: 50%;
  padding-bottom: 0;
/*  background-size: unset;
  background-position: unset;*/
  background-image: none;
  background-color: var(--grey-light-200);
  color: var(--logo-secondary-color);
}
.button.contact-entry{
  display: flex;
  margin-top: 2rem;
  background-color: var(--grey-light-200);
  color: var(--logo-secondary-color);
}
.button.contact-entry>span{
  flex: 1;
}
.pseudo.contact-link{
  height: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
.pseudo.bizcard-entry {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: .5em;
}
.pseudo.contact-link,
.pseudo.bizcard-entry {
    display: flex;
    justify-content: center;
    flex-direction: column;
/*    background-color: var(--light-grey);*/
}

.add-tradeshow{
  display: flex;
  align-items: center;
  line-height: 1;
}
.add-tradeshow svg{
  margin-right: .5em;
}
.floating-label-field{
  position: relative;
  margin-top: .5em;
}
.floating-label-field textarea,
.floating-label-field input {
    border-top: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-color: var(--medium-grey);
    color: var(--medium-grey);
}

.label.label--sync-status {
    font-size: .75em;
    font-weight: bold;
    white-space: nowrap;
    background-color: var(--purple-light-100);
    color: var(--purple-dark-200);
}
/*
.field input,
.floating-label-field input {
    height: 2.5em;
}
 .floating-label-field input{
  padding-top: 1em;
}*/

.field label,.floating-label-field>label{
  color: var(--grey-dark-100);
} 
.floating-label-field>label{
  /*position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;*/
  transition: 0.2s;
  font-size: 75%;
}
.floating-label-field input.valid + label {
  color: var(--secondary-light-500);
}

.dropimage, button, .button, [type=submit], .label, [data-tooltip]:after{
  background-color: var(--purple-dark-500);
}
.result-img:not(.hidden) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.result-img:not(.hidden) img{
  max-height: 30vh;
  max-width: 100%;
  width: auto;
}
.action-buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.result-img button {
  margin-left: 5px;
  padding: 3px;
  background: var(--purple-light-200);
}
.process-state{
  width: 100%;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--purple-light-200);
  color: var(--purple-dark-300);
}

/*
edit/show mode in visit
 */
[data-mode=show] input,
[data-mode=show] textarea,
[data-mode=show] label {
    display: none;
}
label[for="nextDate"] {
    display: inline-block;
}
label[for="note"] {
    display: inline-block;
}
[data-mode=show] button {
  width: 100%;
  margin: 0;
  padding: inherit;
  text-align: left;
  font-size: .85em;
  color: var(--grey-dark-100);
  background: var(--grey-light-100);
}
.show-btn[data-contact-prop=note],
.show-btn[data-contact-prop=Address] {
    white-space: pre-line;
}
.show-btn-wrapper{
  display: flex;
  background: var(--background-color);
}
.show-btn-wrapper .show-btn{
  flex: 1;
}
a.contact-action {
  padding-left: 5px;
}
[data-mode=show] button[data-contact-prop="Phone"],
[data-mode=show] button[data-contact-prop="Email"]{
  width: 100%;
}
[data-mode=edit] input,
[data-mode=edit] textarea {
  width: 90%;
}
[data-mode=show] .input-confirm {
    display: none;
}
[data-mode=edit] .input-confirm {
  height: 2em;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}
.suspicious i {
    color: var(--red-dark-300);
}
ol.form-errors-list,
span.error {
  background: var(--secondary-light-100);
  color: var(--secondary-dark-300);
  font-size: .85em;
}
ol.form-errors-list {
  padding-left: 1em;
}
span.error {
    padding: 2px;
    font-style: italic;
}
.form-modal{
  border: 1px solid var(--grey-light-200);
}

/*
bizcard viewer
 */
.bizcard-viewer.finding {
  height: auto;
}
.bizcard-viewer {
/*  position: relative;*/
  height: 3em;
  overflow: hidden;
}
.bizcard-viewer > img {
  width: 100%;
}
.bizcard-finder {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: end;
  width: 100%;
  height: 3em;
  border: 2px solid var(--red-dark-300);
}
/*
==EMPTY STATE
 */
.empty h3{
  color: var(--grey-dark-100);
}
.next-tradeshow .empty
{
  text-align: center;
  background-color: var(--grey-light-200);
  padding-bottom: .3em;
}
.contact-list .empty,
.tradeshow-list .empty{
  display: flex;
  justify-content: center;
  background-color: var(--grey-light-200);
  padding: 3em;
}
.contact-list .empty{
  text-align: center;
}

/*
==ALL PAGES
 */
.menu-pending-badge {
  position: absolute;
  font-size: .65em;
  right: -0.75em;
  bottom: -.65em;
}
/*
==HOME PAGE
 */
.next-tradeshow{
  margin-top: 1.5rem;
  background-color: transparent;
}
.add-salon--home.button {
  background-color: var(--logo-primary-color);
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.next-tradeshow > h2{
  padding-bottom: 0;
  text-align: center;
  font-size: 1.2rem;
  color: var(--logo-secondary-color);
}
.next-tradeshow footer{
  padding-top: 0;
}
.tradeshow-dates {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 90%;
    font-weight: 600;
    color: var(--grey-dark-100);
}
/*
==VISIT PAGE
 */
.contact-list li{
  display: flex;
  justify-content: space-between;
}
.contact-list li.hidden{
  display: none;
}
.contact-list a {
  color: inherit;
}
/*
==VISIT LIST PAGE
 */
.list-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}

#search{
  width: 75%;
  box-sizing: content-box;
  border-radius: 1em;
  height: 1.5rem;
}
#search::placeholder {
    font-size: .75em;
}
.sort-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .2em .4em;
  background-color: var(--grey-light-200);
}
.sort-date i {
  font-size: .85em;
  color: var(--purple-dark-300);
}
.contact-company {
  font-variant: all-small-caps;
  line-height: .85;
}
.meeted-when-where {
  display: flex;
  justify-content: space-between;
  font-size: 79%;
  font-style: italic;
}
.calendar--date {
    display: flex;
}
/*
==TRADESHOW PAGE
 */
.nostyle.tradeshow-list {
  margin-top: 0;
}
.tradeshow-list h3 {
  padding-top: 0;
  padding-bottom: .25em;
}
.fixed-btn {
  position: fixed;
  bottom: 2.5em;
  right: 1em;
}
/*
==USER NOTIFICATION
*/
.user-notification {
  position: sticky;
  top: 3em; /* submit block is fixed at top & 3em height */
  width: fit-content;
  padding-right: .5em;
  padding-left: .5em;
  border-radius: .5em;
  transform: translateX(0);
  transition: all 0.6s ease-out;
}
.user-notification.info,
.label.-status.pending,
.label.-status.update {
  background-color: var(--purple-light-300);
  color: var(--purple-dark-500);
}
.user-notification.success,
.label.-status.done {
  background-color: #a4d5bd;
}
.user-notification.failure,
.label.-status.failed {
  background-color: #efc3d4;
}
.user-notification .content {
  position: relative;
  margin: 0;
  padding: 0.3em;
  white-space: pre-line;
}
.user-notification.removing{
  transform: translateX(calc(100vw + 100px));
}
.user-notification .close,
.form-modal .close{
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  border-radius: .5em;
  background: var(--grey-light-300);
}