html,
body,
header,
.view {
  height: 100%;
}

@media (max-width: 740px) {
  html,
  body,
  header,
  .view {
    height: 100%;
  }
}

@media (min-width: 800px) and (max-width: 850px) {
  html,
  body,
  header,
  .view {
    height: 100%;
  }
}
@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
     background: #1C2331!important;
  }
}
/* Navbar animation */
.navbar {
  background-color: rgba(0, 0, 0, 0.3); }

.top-nav-collapse {
  background-color: #1C2331; }

/* Adding color to the Navbar on mobile */
@media only screen and (max-width: 768px) {
  .navbar {
    background-color: #1C2331; } }

/* Footer color for sake of consistency with Navbar */
.page-footer {
  background-color: #1C2331; }

.modal-header .close{
  font-size: 2rem !important;
}

.modal-header:not(.bg-danger):not(.bg-success) .close{
  color: red;
}

.btn-warning {
  background-color: #ffa900 !important;
}
.card{
  border-radius: .5rem;
}
.modal-dialog .modal-content{
  border-radius: .5rem !important;
}
.modal-full-height .modal-content{
  border-radius: .125rem !important;
}
.modal-dialog .modal-content .modal-header {
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.btn {
  border-radius: 8px !important;
  padding: .625rem 1.5rem .5rem;
  font-size: .75rem;
  line-height: 1.5;
}
.card-header:first-child {
  border-radius: calc(.5rem - 1px) calc(.5rem - 1px) 0 0;
}
.btn-sm {
  padding: .375rem 1rem .3125rem;
  font-size: .75rem;
  line-height: 1.5;
}
.btn-lg {
  padding: .75rem 1.6875rem .6875rem;
  font-size: .875rem;
  line-height: 1.6;
}
.alert {
  border-radius: .5rem;
}
.badge {
  border-radius: .27rem;
  padding: .35em .65em;
  font-size: .75em;
}
.md-toast {
  border-radius: .5rem;
}
.toast-header {
  border-top-left-radius: calc(.5rem - 1px);
  border-top-right-radius: calc(.5rem - 1px);
}

.glass-alert{
    background: rgb(255 169 0 / 39%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
    color: antiquewhite;
}

.glass-card {
  background: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
          0 8px 20px rgba(0, 0, 0, 0.08),
          0 2px 6px rgba(0, 0, 0, 0.05);
}

.glass-card::before {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1));
  -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fadeInUp 0.5s ease;
}

.glass-card::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
          to bottom,
          rgba(255,255,255,0.25),
          transparent
  );
  border-radius: 12px;
  pointer-events: none;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#submitbutton {
  transition: all 0.2s ease;
}

#submitbutton:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

#submitbutton:active {
  transform: translateY(0);
}

.btnlogin {
  border: 1px solid #cfd6e6 !important;
  border-radius: 4px;
  text-transform: none;
  width: 40px;
  height: 40px;
  padding: 3px !important;
  background-color: white !important;
}

.btnlogin:hover {
  border: 1px solid #cfd6e6 !important;
  border-radius: 4px;
  text-transform: none;
  width: 40px;
  height: 40px;
  padding: 3px !important;
  background-color: white !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.form-control {
    height: 46px;
    border-radius: 12px !important;
    border: 1px solid #d9e2ef;
    background: rgba(255,255,255,.88);
    box-shadow: none !important;
    transition: all .2s ease;
}

.form-control {
    height: 46px;
    border-radius: 8px !important;
    border: 1px solid #d9e2ef;
    background: rgba(255,255,255,.88);
    box-shadow: none !important;
    transition: all .2s ease;
}

.modal-content{
    border-radius: 14px !important;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
}

.modal-dialog.modal-full-height.modal-right .modal-content,
.modal-dialog.modal-full-height.modal-top .modal-content,
.modal-dialog.modal-full-height.modal-left .modal-content{
    border-radius: 0 !important;
}

.modal-dialog .modal-content .modal-header{
    border-bottom: 1px solid var(--border-soft);
    border-top-left-radius: var(--radius-main);
    border-top-right-radius: var(--radius-main);
}

.modal-footer{
    border-top: 1px solid var(--border-soft);
    border-bottom-left-radius: var(--radius-main);
    border-bottom-right-radius: var(--radius-main);
}

.remember-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    isolation: isolate;
    z-index: 0;
}

/* solo halo exterior, sin mancha interior */
.remember-wrap::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;

    background: radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.45) 80%,
            rgba(255, 255, 255, 0.12) 18%,
            rgba(255, 255, 255, 0) 74%
    );

    filter: blur(20px);
}