html {
  width: 100%;
}

body {
  overflow-x: hidden !important;
}

body.show-spinner>main {
  overflow: hidden !important;
}

/* Hide everything under body tag */
body.show-spinner>* {
  opacity: 0;
}

/* Spinner */
body.show-spinner::after {
  content: " ";
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.3);
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  position: fixed;
  z-index: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

/* Openstack datatable — center all cells and headers */
#datatableMyServers th,
#datatableMyServers td,
#datatableMyServers2 th,
#datatableMyServers2 td,
#datatableMyServers3 th,
#datatableMyServers3 td {
  text-align: center;
  vertical-align: middle;
}

/* OS card selection — blue highlight on click */
.os-card {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.os-card.selected {
    border-color: #3949ab;
    box-shadow: 0 0 0 3px rgba(57, 73, 171, 0.2);
}

/* OS name label — slightly larger text */
.os-card-label {
    font-size: 1rem;
}

/* Server Size card — spec display */
.os-size-label {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}
.os-size-price {
    font-size: 1.6rem;
    color: var(--theme-color-1);
    font-weight: 600;
    margin-bottom: 0.1rem;
    line-height: 1.1;
}
.os-size-hourly {
    font-size: 0.7rem;
    color: #aaa;
    margin-bottom: 0;
}
.os-size-specs {
    font-size: 0.8rem;
    line-height: 1.6;
}

/* Server Type slides: stack card and dropdown vertically
   (Dore sets .glide__slide{display:flex} with default row direction) */
#glide-server-type .glide__slide,
#glide-server-type-3 .glide__slide,
#glide-server-type-4 .glide__slide,
#glide-server-type-5 .glide__slide,
#glide-server-type-6 .glide__slide {
    flex-direction: column;
}

/* Allow version dropdowns to overflow the carousel track and slides container.
   glide.core.min.css sets overflow:hidden on both; safe to override because
   perView:6 with exactly 6 slides = no hidden slides that could bleed through. */
#glide-server-type .glide__track,
#glide-server-type-3 .glide__track,
#glide-server-type-4 .glide__track,
#glide-server-type-5 .glide__track,
#glide-server-type-6 .glide__track,
#glide-server-type .glide__slides,
#glide-server-type-3 .glide__slides,
#glide-server-type-4 .glide__slides,
#glide-server-type-5 .glide__slides,
#glide-server-type-6 .glide__slides {
    overflow: visible;
}

/* Server Configuration 4 — constrain card-img-top to match the image height
   visible in Server Config 2's horizontal (card-img-left) cards (~110px) */
#glide-server-type-4 .card-img-top,
#glide-server-size-4 .card-img-top {
  height: 110px;
  object-fit: cover;
  object-position: center;
}

/* Additional resource sliders — column dividers (desktop only) and handle margin */
@media (min-width: 768px) {
    .extra-col-divider {
        border-right: 1px solid #dee2e6;
    }
}
.extra-slider {
    margin: 0 10px;
}
/* SC5 variant: tooltip floats below the handle (Dore sets top:120%), no padding needed */
.extra-slider-tt {
    margin: 0 10px;
}

/* SC5 Server Type — dropdown button corners match the card radius (not the pill default) */
#glide-server-type-5 .dropdown-toggle {
    border-radius: .1rem;
}
.rounded #glide-server-type-5 .dropdown-toggle {
    border-radius: .75rem;
}

/* SC6 Summary card — fine-print VAT + settings link (smaller than the hourly 0.7rem) */
.summary-fine-print,
.summary-fine-print a {
    font-size: 0.6rem;
    color: #333;
}

/* M247 logo override for all Openstack pages */
.openstack-page .logo {
  width: 140px;
  height: 35px;
  background: url("../logos/m247-main-menu-logo.svg") no-repeat left center;
  background-size: contain;
}
.openstack-page .logo-mobile {
  width: 30px;
  height: 35px;
  background: url("../logos/m247-main-menu-logo.svg") no-repeat left center;
  background-size: contain;
}