#box-modal-all {
  z-index: 999;
  top: 1dvw;
  width: max-content;
  margin: auto;
  position: fixed;
}

@media (max-width: 730px) {

  #box-modal-all {
    min-width: calc(100% + 6.5rem);
    left: -3.25rem;
  }

}

.modal-backdrop, .box-modal-backdrop {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    background-color: var(--dark-80-rgba);
    -webkit-transition: all 0.25s ease-out;
       -moz-transition: all 0.25s ease-out;
         -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
  }
  
  .box-modal { 
      display: inline-block;
      position: absolute;
      z-index: 25;
      top: 6rem;
      left: 0.1%;
      right: 0.1%;
      margin: auto;
      width: auto;
      max-width: 80%;
      max-height: 60%;
  }
  
  .box-modal-content {
      clear: both;
      padding-top: 1dvw;
      width: 100%;
      max-width: 100%;
      text-align: center;
      background: var(--light-80-rgba);
      position: relative;
      z-index: 25;
      justify-content: center;
      text-align: center;
      margin: auto;
      border: 0.12rem solid var(--light-20-rgba);
      border-radius: 0.25rem;
      overflow-x: none;
      margin-bottom: -3rem !important;
      -webkit-border-radius: 0.12rem;
      -moz-border-radius: 0.12rem;
      border-radius: 0.12rem;
      -webkit-box-shadow: 0 0.25rem 0.5rem var(--dark-40-rgba);
      box-shadow: 0 0.25rem 0.5rem var(--dark-40-rgba);
  }
  
  .box-modal-header {
      border-bottom: 0.12rem solid var(--primary-20-rgba);
      display: inline-block;
      width: 100%;
  }
  
  .close {
      position: absolute;
      z-index: 25;
      display: inline-block;
      color: var(--error-hex);
      font-size: xx-large;
      font-weight: bolder;
      opacity: 0.5;
      vertical-align: top;
      right: 4rem;
  }
  
  .close:hover,
  .close:focus {
      text-decoration: none;
      cursor: pointer;
      opacity: 1;
      -webkit-transition: opacity 3s linear, top 3s ease-out;
       -moz-transition: opacity 3s linear, top 3s ease-out;
         -o-transition: opacity 3s linear, top 3s ease-out;
            transition: opacity 3s linear, top 3s ease-out;
  }
  
  .box-modal-body {
    position: relative;
    z-index: 25;
    box-sizing: border-box;
    width: 100%;
    padding: 2rem;
    min-height: calc(33dvh + 2rem);
    max-height: calc(50dvh + 2rem);
    overflow-y: scroll;
    padding-top: 2rem;
    margin: auto;
    justify-content: center;
    text-align: center;
  }
  
  .modal-form {
    margin-bottom: 0;
  }
  
  .box-modal-footer {
    position: relative;
    z-index: 25;
    margin-top: 2rem;
    margin: auto;
    margin-bottom: 2rem;
    text-align: center;
    border-top: 0.12rem solid var(--primary-20-rgba);
  }
  
  .box-modal-bottom {
      position: relative;
      z-index: 25;
      margin: auto;
      color: var(--dark-hex);
      width: 100px !important;
      height: 100px !important;
      text-shadow: 0 3px 0 var(--light-20-rgba);
      background: var(--origin-hex);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%; 
      -webkit-box-shadow: 0 0.25rem 0.5rem var(--dark-40-rgba);
      box-shadow: 0 0.25rem 0.5rem var(--dark-40-rgba); 
  }
  
  .box-modal-bottom img {
      height: 50px;
      width: 50px;
      margin-top: 25px;
  }
  
  .box-modal-footer:before,
  .box-modal-footer:after {
    display: table;
    line-height: 0;
    content: "";
  }
  
  .box-modal-footer:after {
    clear: both;
  }
  
  .box-modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
  }
  
  .box-modal-footer .btn-group .btn + .btn {
    margin-left: -1px;
  }
  
  .box-modal-footer .btn-block + .btn-block {
    margin-left: 0;
  }