.imageOnNew {
  width: 20vw; }

.formgroup {
  flex-direction: row-reverse;
  width: 100%;
  justify-content: space-around;
  align-items: center; }

#Numberenter {
  display: none;
  min-height: 75vh; }
  #Numberenter.active {
    animation: scale-display .5s;
    display: inline-flex;
    width: 100%; }
  #Numberenter.out {
    animation: scale-display--reversed .5s;
    animation-fill-mode: forwards;
    display: inline-flex; }

#optenter {
  display: none;
  min-height: 75vh; }
  #optenter.active {
    animation: scale-display .5s;
    display: inline-flex;
    width: 100%; }
  #optenter.out {
    animation: scale-display--reversed .5s;
    animation-fill-mode: forwards;
    display: inline-flex; }

#Formdiv {
  display: block;
  min-height: 75vh; }
  #Formdiv.active {
    animation: scale-display .5s;
    display: inline-flex;
    width: 100%; }
  #Formdiv.out {
    animation: scale-display--reversed .5s;
    animation-fill-mode: forwards;
    display: inline-flex; }

#catdiv {
  display: none;
  min-height: 75vh; }
  #catdiv.active {
    animation: scale-display .5s;
    display: inline-flex;
    width: 100%; }
  #catdiv.out {
    animation: scale-display--reversed .5s;
    animation-fill-mode: forwards;
    display: inline-flex; }

@keyframes scale-display {
  0% {
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1); } }

@keyframes scale-display--reversed {
  0% {
    display: inline-flex;
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1); }
  99% {
    display: inline-flex;
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0); }
  100% {
    display: none;
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0); } }

.adjust-width {
  width: 50%; }

.adjust_form {
  width: 25%; }

.searchwidth {
  width: 50%; }

.backbtn {
  width: 75%; }

.margin-right-nutral {
  margin-right: 15vw; }

@media (max-width: 768px) {
  .margin-right-nutral {
    margin-right: 46vw; }
  .imageOnNew {
    display: none; }
  .adjust-width {
    width: 90%; }
  .adjust_form {
    width: 90%; }
  .searchwidth {
    width: 90%; } }

.btn-phone {
  color: white;
  background-color: black; }

.btn-phone:hover {
  color: black;
  background-color: white;
  border: 1px solid black; }

.transformrotate {
  transform: rotateZ(180deg); }

.rolebox {
  align-items: center;
  border: 1px solid #c7c7c7;
  height: 30%;
  margin: 10px 0px;
  padding: 30px 20px;
  border-radius: 1rem;
  transition: all 0.3s ease;
  cursor: pointer; }
  .rolebox .icon {
    padding: 0px 10px; }
  .rolebox p {
    margin-bottom: 0px !important; }
  .rolebox:hover {
    box-shadow: 1px 3px 26px -4px var(--primary);
    border: 1px solid var(--primary);
    transform: scale(1.02); }

.selectedrolebox {
  background-color: var(--primary);
  color: white; }

/*# sourceMappingURL=newUser.css.map */