@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
:root{
  --eerieBlack: #181818;
  --cultured: #f0f0f0;
  --silver: #c9c9c9;
  --lightCoral: #FF8C8C;
  --lemonYellowCrayola: #FDFFAF;
  --lightSkyBlue: #8CCFFF;
  --aquamarine: #8CFFC1;
}
html,body{
  margin: 0;
  overflow: hidden;
}
body{
  background-color: var(--silver);
  font-family: 'Josefin Sans', sans-serif;
}
.logo{
  letter-spacing: -2.2px;
}
h1,h2,h3,h4,h5,h6{
  margin: 0;
  padding: 0;
  color: var(--eerieBlack);
}
.wExpand{
  width: 100%;
}
.w90{
  width: 90%;
}
.hExpand{
  height: 100%;
}
.webContainer{
  margin: auto;
  width: 390px;
  height: 100vh;
  background-color: var(--cultured);
  border-radius: 8px;
}
.content{
  position: fixed;
  top: 61px;
  left: calc(100vw - (50vw + 160px));
  width: 316px;
  height: calc(100vh - 166px);
  overflow-y: auto;
}
.content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

p,li{
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.face{
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.flexColumn{
  display: flex;
  flex-direction: column;
}
.flexRow{
  display: flex;
  flex-direction: row;
}
.aiStart{
  align-items: flex-start;
}
.aiCenter{
  align-items: center;
}
.jcCenter{
  justify-content: center;
}
.aiEnd{
  align-items: flex-end;
}
.spaceBetween{
  justify-content: space-between;
}
.spaceEvenly{
  justify-content: space-evenly;
}
.gap24{
  gap: 12px;
}
.gap12{
  gap: 12px;
}
.gap8{
  gap: 8px;
}
.gap6{
  gap: 6px;
}
.gap4{
  gap: 4px;
}
.gap2{
  gap: 2px;
}
.gap0{
  gap: 0;
}
.order0{
  order: 0;
}
.order1{
  order: 1;
}
.order2{
  order: 2;
}
.topBar{
  z-index: 5;

  position: fixed;
  padding: 8px 12px;
  width: 366px;
  max-width: 520px;
  height: 52px;
  background-color: var(--cultured);

  left: calc(100vw - (50vw + 195px));
  top: 0;

  border-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;

  border-bottom: 1px solid var(--eerieBlack);
}
.navBar{
  z-index: 5;

  position: fixed;
  padding: 8px 12px;
  width: 366px;
  max-width: 520px;
  height: 80px;
  background-color: var(--cultured);

  left: calc(100vw - (50vw + 195px));
  bottom: 0;

  border-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;

  border-top: 1px solid var(--eerieBlack);
}
.ibActive{
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--cultured);
  border-bottom: 1px solid var(--eerieBlack);
  cursor: pointer;
  opacity: 0.2;
}
.iconButton{
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  border-bottom: 1px solid var(--cultured);
}
.iconButton:hover{
  padding: 8px;
  border-radius: 6px;
  border-bottom: 1px solid var(--eerieBlack);
}
.circleButton{
  width: 48px;
  height: 48px;
  background-color: var(--cultured);
  border-radius: 24px;
}
.group{
  width: 256px;
  background-color: var(--lightCoral);
  padding: 12px;
  border-radius: 24px;

  transition: all ease-in-out .3s;
}
.group:hover{
  width: 300px;
}
.colorDot{
  width: 16px;
  height: 16px;
  border-radius: 16px;
  border: 1px solid var(--eerieBlack);
}
.colorDot:hover{
  background-color: var(--eerieBlack);
}
.lcGradient{
 background: rgb(255,140,140);
  background: -moz-linear-gradient(180deg, rgba(255,140,140,1) 0%, rgba(240,240,240,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(255,140,140,1) 0%, rgba(240,240,240,1) 100%);
  background: linear-gradient(180deg, rgba(255,140,140,1) 0%, rgba(240,240,240,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff8c8c",endColorstr="#f0f0f0",GradientType=1);
}
.lycGradient{
  background: rgb(253,255,175);
  background: -moz-linear-gradient(180deg, rgba(253,255,175,1) 0%, rgba(240,240,240,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(253,255,175,1) 0%, rgba(240,240,240,1) 100%);
  background: linear-gradient(180deg, rgba(253,255,175,1) 0%, rgba(240,240,240,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdffaf",endColorstr="#f0f0f0",GradientType=1);
}
.lsbGradient{
  background: rgb(140,207,255);
  background: -moz-linear-gradient(180deg, rgba(140,207,255,1) 0%, rgba(240,240,240,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(140,207,255,1) 0%, rgba(240,240,240,1) 100%);
  background: linear-gradient(180deg, rgba(140,207,255,1) 0%, rgba(240,240,240,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8ccfff",endColorstr="#f0f0f0",GradientType=1);
}
.amGradient{
  background: rgb(140,255,193);
  background: -moz-linear-gradient(180deg, rgba(140,255,193,1) 0%, rgba(240,240,240,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(140,255,193,1) 0%, rgba(240,240,240,1) 100%);
  background: linear-gradient(180deg, rgba(140,255,193,1) 0%, rgba(240,240,240,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8cffc1",endColorstr="#f0f0f0",GradientType=1);
}
.silverGradient{
  background: rgb(201,201,201);
  background: -moz-linear-gradient(180deg, rgba(201,201,201,1) 0%, rgba(240,240,240,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(201,201,201,1) 0%, rgba(240,240,240,1) 100%);
  background: linear-gradient(180deg, rgba(201,201,201,1) 0%, rgba(240,240,240,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9",endColorstr="#f0f0f0",GradientType=1);
}


.downShadow{
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);

  transition: all ease-in-out .3s;
}

.downShadow:hover{
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
}

.bigButton{
  width: 256px;
  height: 147px;
  padding: 12px;

  background-color: var(--cultured);
  border-radius: 20px;
  border: 1px solid var(--eerieBlack);

  transition: all ease-in-out .3s;
}
.bigButton:hover{
  width: 280px;
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
}
.cta{
  margin: 4px;
  padding: 12px 24px;
  border: 1px solid var(--eerieBlack);
  border-radius: 48px;
}
.spacer{
  background-color: var(--cultured);
  border-radius: 20px;
  width: 280px;
  height: 180px;
  border: 1px solid var(--silver);
  color: var(--silver);
  padding: 12px;
}


/*Inputs*/
input[type=text],input[type=phone],input[type=number],input[type="url"], select, textarea {
  font-family: 'Josefin Sans', sans-serif;
  width: 85%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  width: 100%;
  margin-top: 24px;
  background-color: var(--eerieBlack);
  color: var(--cultured);
  border: 1px solid var(--eerieBlack);
  padding: 12px 20px;
  border-radius: 41px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: var(--cultured);
  color: var(--eerieBlack);
  border: 1px solid var(--eerieBlack);
}

/*Selector*/
.custom-select {
  position: relative;
}
.custom-select select {
  display: none;
}
.select-selected {
  background-color: white;
}
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: var(--eerieBlack) transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--eerieBlack) transparent;
  top: 7px;
}
.select-items div,.select-selected {
  color: var(--eerieBlack);
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
.select-items {
  position: absolute;
  background-color: white;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

 /*Switch*/
.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 4px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--silver);
  -webkit-transition: .4s;
  transition: .4s;
}

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

input:checked + .slider {
  background-color: var(--eerieBlack);
}

input:focus + .slider {
  box-shadow: 0 0 1px --eerieBlack
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}
.slider.round {
  border-radius: 34px;
}

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