@media all and (orientation: portrait){
    .botRow { 
        flex-flow: column nowrap;
    }
    #existingForm{
        margin-bottom: 10px !important;
    }
}
@media all and (orientation: landscape){
    .botRow {
        flex-flow: row nowrap;
        justify-content: space-evenly;
    }
    
}
@media all and (min-width:320px) and (max-width: 768px){
    input{
        font-size:16px !important;
    }
}
#addressUpdateFormBtn {
    margin-right: 15px;
}
#avModalContainer {
display: none;
visibility: hidden;
position: fixed;
height: 100vh;
width: 100%;
top: 0;
left: 0;
align-items: center;
justify-content: center;
opacity: 0;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 100ms;
z-index: 999;
background: rgba(0,0,0,0.5);
}


#avModalContainer.active {
display: flex;
visibility: visible;
opacity: 1;
}
#avModal {
display: flex;
z-index: 1000;
padding-bottom: 10px;
border: 1px solid lightgray;
width: auto;
width:-moz-fit-content;
border-radius: 4px;
font-family: "Roboto",sans-serif;
font-size: 14px;
height: fit-content;
background: white;
color: #333;
text-align: left;
justify-content: center;
flex-direction: column;
margin: 0 10px;
} 
.topRow, .botRow {
display: flex;
}
.topRow {
padding-left: 10px;
justify-content: center;
align-items: baseline;
font-size: 18px;
font-family: "Roboto",sans-serif;
font-weight: bold;
flex-direction: row;
margin: 0 10px;
}

.botRow > div {
padding: 0px 10px 10px 10px;
}
.botRow > div:hover {
background-color: lightgray;
cursor: pointer;
}
.subModal {
font-style: italic;
}

.modHeader {
flex: 1 0 90%;
}
.modHeader > p    {
font-size: 12px;
font-weight: normal;
max-width: fit-content;
padding: 1% 0;
}
#close {
flex: 1 0 5%;
padding: 5px;
cursor: pointer;
}
#close:hover {
color: lightgray;
}
#existingForm, #updateForm {
margin-top: 15px;
box-shadow: 4px 4px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
border-radius: 5px;
margin: 0 10px;
}

.loading-dots {
    text-align: center;
    display: none;
    visibility: hidden;
    height: fit-content;
    margin-left: 15px;
  }
  .loading-dots.active {
    display: unset;
    visibility: unset;
  }
  
  .loading-dots > div {
    width: 18px;
    height: 18px;
    background-color: cornflowerblue;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: dots-bouncedelay 1.4s infinite ease-in-out both;
    animation: dots-bouncedelay 1.4s infinite ease-in-out both;
  }
  
  .loading-dots .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  
  .loading-dots .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
  
  @-webkit-keyframes dots-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
  }
  
  @keyframes dots-bouncedelay {
    0%, 80%, 100% { 
      -webkit-transform: scale(0);
      transform: scale(0);
    } 40% { 
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
    }
  }
  #abpDots-span {
      display: flex;
      align-items: center;
  }
  #cAcctDots {
      margin: 5px 0;
      display: flex;
      justify-content: center;
  }