.headbar {
  background-color: #d1cebc;
  border-bottom: #4c4c4e60 1px solid;
}

.topbar {
  position:static;
  top:0;
  margin-top:0;
}

.top-badget-btn {
  --bs-btn-padding-y: .1rem;
  --bs-btn-padding-x: .5rem;
  --bs-btn-font-size: .7rem;
  border-radius: .75rem;
}

.burger {
  font-size: 1.6rem;
  color: var(--bs-gray);
}

input[type="number"] {
  appearance: textfield !important;
}

.btn-mini {
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

#main-zone {
  position:static;
  margin-top: 58px;
  height: calc(100vh-500px);
}

.vertical-center {
  height: calc(100vh - 58px);
}

.center-zone {
  margin-top: calc((100vh - 400px) * 0.5);
}

.micro{
  font-size:10px;
}

.btn-plus {
  position: fixed;
  width: 50px;
  height: 50px;
  padding: 10px 14px;
  font-size: 20px;
  line-height: 1.33;
  border-radius: 25px;
  right: 40px;
  bottom: 60px;
}

@media (min-width: 576px) {
  .btn-plus {
    right: calc(50vw - 230px);
    bottom: 40px;
  }
}

@media (min-width: 768px) {
  .btn-plus {
    right: calc(50vw - 320px);
  }
}

@media (min-width: 992px) {
  .btn-plus {
    right: calc(50vw - 440px);
  }
}

@media (min-width: 1200px) {
  .btn-plus {
    right: calc(50vw - 530px);
  }
}

@media (min-width: 1400px) {
  .btn-plus {
    right: calc(50vw - 620px);
  }
}

.alert {
  position: fixed;
  top: 65px;
  right: 0px;
  z-index: 5000;
}

@media (min-width: 576px) {
  .alert {
    right: calc(50vw - 285px);
  }
}

@media (min-width: 768px) {
  .alert {
    right: calc(50vw - 375px);
  }
}

@media (min-width: 992px) {
  .alert {
    right: calc(50vw - 495px);
  }
}

@media (min-width: 1200px) {
  .alert {
    right: calc(50vw - 585px);
  }
}

@media (min-width: 1400px) {
  .alert {
    right: calc((50vw - 660px) + 30px);
  }
}

.vertical-text {
  transform: rotate(-90deg);
  display:grid;
}

.vertical{
  writing-mode: sideways-lr;
}

.escuela {
  position:fixed;
  font-size: 2.5em;
  color: #345c8c;
  font-weight: 800;
  opacity: 20%;
  z-index: -100;
  right: 20px;
  top: 60px;
}

@media (min-width: 576px) {
  .escuela {
    right: calc(50vw - 230px);
  }
}

@media (min-width: 768px) {
  .escuela {
    right: calc(50vw - 320px);
  }
}

@media (min-width: 992px) {
  .escuela {
    right: calc(50vw - 440px);
  }
}

@media (min-width: 1200px) {
  .escuela {
    right: calc(50vw - 530px);
  }
}

@media (min-width: 1400px) {
  .escuela {
    right: calc(50vw - 620px);
  }
}