.toast-top-right {
  top: 4.2rem;
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  /* CSS */
  .account-container {
    margin-top: 8rem!important;
  }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  /* CSS */
  .account-container {
    margin-top: 8rem!important;
}
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  /* CSS */
  .account-container {
    margin-top: 8rem!important;
}
.update-password-tab{
  border-top: 1px solid #000!important;  
}
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
  .account-container {
    margin-top: 3rem!important;
}
.update-password-tab{
  border-top: 1px solid #000!important;  
}

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  /* CSS */
  .menu-link {
    color: var(--color-black);
  }
  .icon-with-text{
    display: none !important;
  }
  .brand {
    top:0;
  }
  .account-container {
    margin-top: 1rem!important;
}
.update-password-tab{
    border-top: 1px solid #000!important;  
}
.toast-top-right {
  top: 50px;
}
#toast-container>div{
  padding:8px 8px 8px 8px;
  width:20em;
}
#app-hero:before {
  background: rgb(0 0 0 / 20%) !important;
}
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  /* CSS */
  .brand {
    top:0;
  }
  .menu-link {
    color: var(--color-black);
  }
  .icon-with-text{
    display: none !important;
  }
  .account-container {
    margin-top: 1rem!important;
}
.account-login-container {
  margin-top: 5rem!important;
}
.update-password-tab{
  border-top: 1px solid #000!important;  
}
.toast-top-right {
  top: 50px;
}
#toast-container>div{
  padding:8px 8px 8px 8px;
  width:20em;
}
#app-hero:before {
  background: rgb(0 0 0 / 20%) !important;
}
}