body, html { 
	height: 100%;
	margin: 0;
	font-family: palanquin;
	background: #ccc;
	content: '';
}

.form-container {
    width: clamp(300px, 90vw, 1000px);
    min-height: 75vh;
    background: #dbdbdb;
    border-radius: 4px;
    margin: 12.5vh auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1em;
    padding: 20px;
}

.flex-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}
.flex-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

select {
  min-width: 150px;
  max-width: 300px;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: sans-serif;
}



input {
  padding: 0 15px 0 25px;
  width: 90px;
}

textarea, input, button, select {
  border: none;
  border-radius: 4px;
  min-height: 32px;
  outline: none;
}

textArea.lead-info {
  min-width: 500px;
  min-height: 380px;
  font-family: sans-serif;
  padding: 15px;
}


.field-group {
  margin-top: 16px;
}

button {
  margin-left: 1em;
  min-height: 32px;
  background: #ff9a44d4;
  transition: 200ms ease;
}
button:hover {
  background: #ff9a44;
}

.pass {
    position: relative;
}
.pass:before {
    content: '';
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' width='800px' height='800px' viewBox='0 0 32 32' version='1.1'%3E%3Cpath d='M25 12h-1v-3.816c0-4.589-3.32-8.184-8.037-8.184-4.736 0-7.963 3.671-7.963 8.184v3.816h-1c-2.206 0-4 1.794-4 4v12c0 2.206 1.794 4 4 4h18c2.206 0 4-1.794 4-4v-12c0-2.206-1.794-4-4-4zM10 8.184c0-3.409 2.33-6.184 5.963-6.184 3.596 0 6.037 2.716 6.037 6.184v3.816h-12v-3.816zM27 28c0 1.102-0.898 2-2 2h-18c-1.103 0-2-0.898-2-2v-12c0-1.102 0.897-2 2-2h18c1.102 0 2 0.898 2 2v12zM16 18c-1.104 0-2 0.895-2 2 0 0.738 0.405 1.376 1 1.723v3.277c0 0.552 0.448 1 1 1s1-0.448 1-1v-3.277c0.595-0.346 1-0.985 1-1.723 0-1.105-0.895-2-2-2z'/%3E%3Cdiv xmlns='' id='coplmfnphahpcknbchcehdikbdieognn' style='all: initial; font-size: 16px !important'/%3E%3Cdiv xmlns='' style='all: initial !important;'/%3E%3C/svg%3E");
    height: 0;
    width: 0;
    padding: 10px;
    display: block;
    position: absolute;
    left: 5px;
    color: black;
    background-size: contain;
    background-repeat: no-repeat;
    top: -9px;
}
#pass.shake {
  animation: shake 0.5s;
  animation-iteration-count: 1;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.notification {
  height: 40px;
  background-color: #C1F7EE;
  margin-top: 5px;
  margin-left: 76%;
  transform-origin: right;
  display: flex;
  align-items: flex-start;
  position: absolute;
  top: 4%;
  right: 0;
  border-radius: 2px;
  box-shadow: -3px 0px 0px -1px #94dacd;
  transform: scaleX(0);
}
.notification.show {
  -webkit-animation: notify 5s ease-in-out 1;
  animation: notify 5s ease-in-out 1;
}

.notification .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  flex-direction: row;
  padding: 10px;
  gap: 5px;
} 

@-webkit-keyframes notify {
  0% {transform: scaleX(0);}
  10% {transform: scaleX(1);}
  13% {transform: scale(1.1);}
  16% {transform: scale(1);}
  55% {transform: scaleX(1);}
  65% {transform: scaleX(0);}
  95% {transform: scaleX(0);}
  100% {transform: scaleX(0);}
}

@keyframes notify {
  0% {transform: scaleX(0);}
  3% {transform: scaleX(1);}
  5% {transform: scale(1.1);}
  8% {transform: scale(1);}
  55% {transform: scaleX(1);}
  60% {transform: scaleX(0);}
  95% {transform: scaleX(0);}
  100% {transform: scaleX(0);}
}

.notification .identifier {
    position: relative;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #77b9ad;
}
.notification.show .identifier {
    -webkit-animation: exit 5s ease-in-out 1;
    animation: exit 5s ease-in-out 1;
}
.notification .identifier svg {
    width: 100%;
    height: 100%;
    padding: 4px;
}

.notification .text {
    position: relative;
    padding: 5px;
    height: 30px;
    width: max-content;
    font-family: sans-serif;
    color: #6aaea1;
}
.notification.show .text {
    -webkit-animation: exit 5s ease-in-out 1;
    animation: exit 5s ease-in-out 1;
}

@-webkit-keyframes exit {
  0% {opacity: 1;}
  55% {opacity: 1;}
  60% {opacity: 0;}  
  100% {opacity: 0;}
}

@keyframes exit {
  0% {opacity: 1;}
  55% {opacity: 1;}
  60% {opacity: 0;}  
  100% {opacity: 0;}
}

@-webkit-keyframes enter {
  0% {opacity: 0;}
  55% {opacity: 0;}
  60% {opacity: 1; transform: scaleX(1);}
  95% {opacity: 1; transform: scaleX(1);}
  100% {opacity: 0; transform: scaleX(1);}
}

@keyframes enter {
  0% {opacity: 0;}
  55% {opacity: 0;}
  60% {opacity: 1; transform: scaleX(1);}
  95% {opacity: 1; transform: scaleX(1);}
  100% {opacity: 0; transform: scaleX(1);}
}

@media (max-width: 894px) {
  .flex-col {
    flex-direction: row;
  }

}