body {
  letter-spacing: -0.02em;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

.bold {
  font-weight: 600;
}
#wrapper {
  background-color: #F3F4F5;
}


.section-title, .nav-tabs, #content-wrapper .product_header_container .page-title,#content-wrapper .page-title {
  background: #ffffff!important;
  border-radius: 4px;
  padding: 12px;
  color: #0A2433!important;
}

.container, .elementor-section.elementor-section-boxed>.elementor-container {
  max-width: 1320px;
}

.form-control {
  /*background-color: white!important;*/
  border-radius: 8px;
}

#header .header-btn-w .header-btn .title, .cart-toogle .title{
  display: inline;
  font-size: 14px;
  line-height: 150%;
  margin-top: unset;
}

.header-user-btn {
  padding-right: 24px;
  border-right: 1px solid #E7E9EB
}

.ps-shoppingcart .cart-products-count-btn {
  right: unset;
  left: 16px;
  background-color: #7DBF40;
  padding: 2px;
}

.search-widget .form-search-control {
  border: 1px solid #DADEE0;
  background-color: #F3F4F5!important;
  font-size: 14px;
  color: #9DA7AD;
  border-radius: 4px;
  padding: 8px 12px;
  justify-content: space-between;
}

.top-bar {
  height: 40px;
  background: #F4D9E0;
}

.top-bar {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.top-bar div a:not(:last-child) {
  padding-right: 12px;
  padding-left: 12px;
  border-right: 1px solid rgba(20, 70, 99, 0.2);
  letter-spacing: -0.02em;
}

.desktop-header-style-1 {
  height: 78px;
}

#header .header-nav {
  box-shadow: unset;
  border: unset;
  padding-bottom: 0;
  padding-top: 0;
}


body {
  letter-spacing: -0.02em;
}

.btn-product-list {
  background-color: #C74167;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  line-height: 150%;
  padding: 8px;
  border-radius: 8px;
  gap: 4px;
}
.products-grid .product-miniature .product-add-cart {
  display: unset!important;
}


.search-widget {
  height: 37px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #DADEE0;
  background: #F3F4F5;
}

#header .desktop-header-style-1 .col-header-center .search-widget {
  margin: unset;
}

.form-control {
  background-color: unset;
  color: unset;
  border: unset;
  box-shadow: unset;
}

.form-control::placeholder {
  color: #9DA7AD;
  opacity: 1;
}

.first-row .slider-img {
  width: 100%;
  border-radius: 16px;
  gap: 10px;
  padding: 32px;
  display: block;
}

.rounded-lg {
  border-radius: 16px;
}

.first-row .podklad{
  background-image: url(../../../warehousealeksander/assets/img/homepage/podklady_pod_torty.jpg);
  height: 432px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.first-row .etykiety{
  background-image: url(../../../warehousealeksander/assets/img/homepage/etykiety.jpg);
  height: 208px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.first-row .kartony{
  background-image: url(../../../warehousealeksander/assets/img/homepage/kartony_na_torty.jpg);
  height: 208px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.shop_feature span {
  font-weight: 600;
  font-size: 15px;
  line-height: 120%;
}

.title {
  margin-top: 32px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 120%;
  color: #0a2433;
}

.page-home .home-page-title {
  margin: 0 0 24px;
  font-weight: 600;
  font-size: 24px;
  line-height: 120%;
  color: #0a2433;
}

.subTitle {
  font-weight: 400;
  font-size: 15px;
  line-height: 150%;
  color: #0a2433;
}

.popular-category {
  height: 100%;
  border-radius: 8px;
  background-color: #ffffff;
  padding: 8px;
  gap: 16px;
  flex: 1;
  /* min-width: 300px !important; */
}

.popular-category img {
  width: 86px;
  height: 86px;
  object-fit: cover;
}

.popular-category span {
  font-weight: 600;
  font-size: 15px;
  line-height: 120%;
  display: block;
}

.popular_cat .swiper-slide {
  margin-right: 16px;
  width: 312px !important;
  height: 102px !important;
}

.swiper-container-wrapper .product-carousel {
  padding: unset;
}

.custom-swiper-button-prev,
.custom-swiper-button-next {
  top: 30px;
  bottom: auto;
  width: 24px;
  height: 24px;
  font-size: 24px;
  background-color: unset;
  color: #9da7ad;
  z-index: 10;
  position: unset; 
  margin-top: unset;
}

.products-grid .swiper-button-next {
  right: 0;
  left: auto;
}

.products-grid .swiper-button-prev {
  right: 40px;
  left: auto;
}

.popular_cat .swiper-button-prev,
.popular_cat .swiper-button-next {
  /* display: none; */
}

.card-service {
  border-radius: 16px;
  border: 1px solid #e7e9eb;
  background-color: #e7e9eb;
  padding: 8px;
  gap: 8px;
}

.service-left-card div span{
  font-size: 24px;
  line-height: 120%;
  font-weight: 600;
}

.service-left-card div p{
  font-size: 15px;
  line-height: 120%;
  font-weight: 400;
}


.card-img-service {
  border-radius: 8px;
}

.card-service-content span, .simpleblog__listing__post__wrapper__content__readmore {
  color: #C74167!important;
  font-size: 15px;
  font-weight: 600;
  line-height: 150%;
}

.card-service-content p {
  color: #0A2433;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 150%;
}


/*BLOG*/
.simpleblog__listing__post{
  background-color: white;
  border-radius: 16px;
  padding: 8px;
  border: 1px solid #E7E9EB;
}

.cardblog img {
  border-radius: 8px;
}

.simpleblog__listing__post__wrapper__content__headline {
  font-weight: 600;
  font-size: 15px;
  line-height: 120%;
  color: #0A2433;
}

/*PRODUCT*/

.product-carousel article, .product-miniature  {
  background-color: #ffffff;
  border: 1px solid #E7E9EB;
  padding: 16px;
  border-radius: 8px;
  /*height: 368px;*/
}
.products-grid .product-add-cart {
  margin: unset;
}
.product-carousel article img {
  height: 214px;
  width: 214px;
  border-radius: 8px;
}

.product-miniature-default li.product-flag {
  border-radius: 8px;
  padding: 4px 8px;
}

.product-category-name {
  font-size: 12px;
  line-height: 150%;
  font-weight: 400;
}

.product-title {
  font-size: 15px!important;
  line-height: 120%;
  font-weight: 600!important;
  color: #0A2433;
}

.product-price-and-shipping .regular-price {
  font-size: 15px;
  line-height: 120%;
  font-weight: 600;
}

.pink {
  background-color: #F9ECF0;
}

.top-picks {
  border: 1px solid #FFCC92;
  border-radius: 16px;
  background-color: #FFDDB6;
  padding: 16px;
  gap: 16px;
}

.top-picks .title {
  padding: 8px 12px;
}

.homepage-box {
  padding: 16px;
  border: 1px solid #F4D9E0;
  border-radius: 16px;
}

.homepage-box .left_side
{

}

.homepage-box .left_side span,
.homepage-box .left_side h2{
  margin: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 120%;
  color: #144663;
}

.homepage-box .left_side p{
  font-weight: 400;
  font-size: 15px;
  line-height: 150%;
  color: #144663;
}




#iqitmegamenu-horizontal {
  background-color: #FFF;
  align-items: center;
}

#cbp-hrmenu-extra {
  margin-left: auto;
}

.cbp-tab-title {
  color: #144663;
}

.cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link {
  border: unset;
  padding: 0 10px 0 10px;
}

/* BEGIN FOOTER */

#footer a,  .contact-rich .part {
  color: #9DA7AD;
}

#footer a:hover {
  color: #c74167;
}


.footer-default-text {
  color: #3b505c;
}

.footer-default-bg {
  background: #3b505c;
}

.footer-secondary-text {
  color: #546670;
}

.footer-detail-text {
  color: #9da7ad;
}


.contact-rich .part strong {
  color: white;
}

.footer-line {
  box-sizing: border-box;
  justify-content: space-between;
  padding: 32px 0 0;
  gap: 32px;
  border-top: 1px solid #3B505C;
}

.fw-400 {
  font-weight: 400;
}

.gap-16px {
  gap: 16px;
}

.gap-32px {
  gap: 32px;
}

.footer-responsive-gap {
  gap: 24px;
}

@media (min-width: 768px) {
  .footer-responsive-gap {
    gap: 32px;
  }
}

.gap-8px {
  gap: 8px;
}

.footer-info {
  background: #e7e9eb;
}

.footer-fast-links-item {
  white-space: nowrap;
}

.footer-fast-links-delimiter {
  width: 19px;
  height: 0px;
  opacity: 0.2;
  border: 1px solid #9DA7AD;
  transform: rotate(90deg);
}

.footer-bottom-icons {
  border-radius: 4px; 
  padding: 6px; 
  width: 48px; 
  height: 32px;
}

.newsletter-input-group input::placeholder {
  color: #667085;
}

.newsletter-input {
  border-radius: 4px;
  height: 34px;
}

.newsletter-btn {
  background-color: #c74167;
  border-radius: 8px;
  white-space: nowrap;
  min-width: auto;
  color: #fff;
  font-weight: 600;
}

.newsletter-letter-img {
  top: 70%; 
  right: 12%; 
  transform: translateY(-50%); 
  z-index: 1;
}

.footer-fast-links {
  gap: 32px;
  background: #233A47; 
  z-index: 2;
}

.footer-fast-links-container {
  box-sizing: border-box;
  justify-content: space-between;
  padding: 0px 32px 32px;
  gap: 32px;
  border-bottom: 1px solid #3B505C;
}

.newsletter-btn:hover {
  color: #fff;
}

.fs-24px {
  font-size: 24px;
}

.fs-15px {
  font-size: 15px;
}

.fw-400 {
  font-weight: 400;
}
/* END FOOTER */

/* START MEGAMENU */
.gap-6px {
  gap: 6px;
}

#iqitmegamenu-wrapper .cbp-hrsub-inner {
  box-sizing: border-box;

  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  gap: 16px;

  position: absolute;
  width: 700px;

  background: #ffffff;
  border: 1px solid #e7e9eb;
  border-radius: 0px 0px 16px 16px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);

  flex: none;
  order: 1;
  flex-grow: 0;
  z-index: 1;
}

.cbp-hrmenu .cbp-hrsub-inner,
.cbp-hrmenu .cbp-hrsub-inner a,
.cbp-hrmenu .cbp-hrsub-inner a:link {
  color: #ff0000;
}

#iqitmegamenu-wrapper.stuck-menu #iqitmegamenu-horizontal {
  background: #fff;
}

#iqitmegamenu-wrapper a.mm-links {
  color: #144663 !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
}

#mega-menu .nav-link-title {
  color: #144663 !important;
  font-size: 16px !important;
  font-weight: 600;
}

.cbp-horizontal > ul > li.cbp-hropen > a,
.cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]),
.cbp-horizontal > ul > li.cbp-hropen > a:hover {
  background: #f0f0f0;
  color: #ffffff;
}

/* END MEGAMENU */

/* START HOVER ROTATE ICON */
.mm-element .cbp-submenu-aindicator {
  transition: transform 0.3s ease;
}

.mm-element:hover .cbp-submenu-aindicator {
  transform: rotate(180deg);
}

#cbp-hrmenu .cbp-tab-title {
  font-size: 13px;
}
#cbp-hrmenu-extra .cbp-tab-title {
  font-size: 12px;
}


#header, #checkout-header {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid #E7E9EB;
}
/* END HOVER ROTATE ICON */

.menu-item-with-border {
  position: relative;
}

.menu-item-with-border::after {
  content: '';
  position: absolute;
  right: 0;
  top: 28%;
  height: 40%;
  width: 1px;
  background-color: #E7E9EB;
}

.mobile-top-bar-wrapper {
  background-color: #fff; 
  border-bottom: 1px solid #eee;
}

.mobile-header-logo {
  max-height: 50px; 
  width: auto;
}

.text-brand-primary {
    color: #144663 !important;
}

.mobile-contact-icon-svg path {
    fill: #144663;
}

.mobile-fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    z-index: 10000;
    overflow-y: auto;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    -webkit-overflow-scrolling: touch;
}

.mobile-fullscreen-menu.show {
    transform: translateX(0);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear;
    cursor: pointer;
}

.mobile-fullscreen-menu.show~.mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
}

.mobile-menu-logo .logo {
    max-height: 40px;
    width: auto;
}

.mobile-menu-close-btn {
    min-width: 44px;
    min-height: 44px;
}

.mobile-category-btn:hover,
.mobile-category-btn:focus {
    color: #007bff;
    background-color: #f8f9fa;
}

.mobile-category-btn[aria-expanded="true"] {
    color: #007bff;
    background-color: #e7f3ff;
}

.mobile-category-arrow {
    transition: transform 0.25s ease-in-out;
    fill: currentColor;
}

.mobile-category-btn[aria-expanded="true"] .mobile-category-arrow {
    transform: rotate(180deg);
}

.mobile-subcategory-link {
    display: block;
    padding: 10px 20px;
    color: #144663;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.5;
}

.mobile-subcategory-link:hover,
.mobile-subcategory-link:focus {
    color: #007bff !important;
    background-color: #f0f0f0 !important;
}


.mobile-currency-toggler:hover,
.mobile-currency-toggler:focus {
    color: #007bff;
}

.mobile-menu-v-separator,
.mobile-menu-v-separator-footer {
    width: 1px;
    background-color: #ced4da;
}

.mobile-menu-v-separator {
    height: 20px;
}

.mobile-menu-v-separator-footer {
    align-self: stretch;
}

.cbp-horizontal > ul > li.cbp-hropen > a, .cbp-horizontal > ul > li.cbp-hropen > a:hover {
    background: transparent;
    color: #ffffff;
}

.iqitmegamenu-wrapper.sticky-active #element-7-container {
    display: none !important;
}

#quantity_wanted,
.elementor-element .form-control,
.block-section .form-control,
#content:not(.page-home) .form-control,
.custom-select2 .form-control-select,
.custom-select2 select,
#inner-wrapper .form-control,
#inner-wrapper .form-control-select
{
  background-color: #F3F4F5!important;
}

.product-container .block-section, #content:not(.page-home)
{
  background-color: #fff;
  border-radius: 16px;
  padding-left: 1rem;
}

.product-container .section-content {
  padding: 4px 12px 12px 12px;
}

.pshow-points-buton-balacne {
  display: inline;
}

.product-carousel article img {
height: unset;
width: unset;
}

/* ============================================================
   CONTACT PAGE (/kontakt)
   Even, card-based layout. Scoped to body#contact only, so the
   shared footer contact block (block-iqitcontactpage / displayFooter)
   is never affected. Colors and radii reuse existing design tokens.
   ============================================================ */

/* Let the map + info/form cards sit on the light page background
   instead of inside the lopsided global "#content { padding-left:1rem }"
   card, which is the main cause of the uneven look. */
body#contact #content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

body#contact .page-header { margin-bottom: 20px; }

/* --- Map ----------------------------------------------------- */
body#contact #iqitcontactpage-map {
  margin-bottom: 24px;
  border: 1px solid #E7E9EB;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}
body#contact #iqitcontactpage-map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

/* --- Two-column layout (info + form) ------------------------- */
/* Only the page_content row — never the form's .form-group.row. */
body#contact #content .row:not(.form-group) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
}
body#contact #content .row:not(.form-group) > .contact-page-info,
body#contact #content .row:not(.form-group) > .col-sm-8 {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
body#contact #content .row:not(.form-group) > .col-sm-8 { flex: 2 1 460px; }

/* --- Info card ----------------------------------------------- */
/* The active info markup is the CHILD theme's content.tpl:
   .contact-rich > span.footer-detail-text  (company name),
   then .part rows — the address row uses a Font Awesome <i>, while the
   phone/mail rows use inline <svg> icons plus Bootstrap utility classes
   (d-flex, align-items-center, mr-3, mt-2). Rules below normalise all
   three rows and are scoped to .contact-page-info, so the identical
   .contact-rich markup reused in the footer block is never touched. */
body#contact .contact-page-info {
  background: #F9ECF0;
  border: 1px solid #F4D9E0;
  border-radius: 16px;
  padding: 24px;
}

/* Company name — rendered as <span class="h6 footer-detail-text ..."> */
body#contact .contact-page-info .contact-rich > .footer-detail-text {
  display: block;
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #0A2433;
}

/* Every info row, normalised to one rhythm. !important overrides the
   inline Bootstrap utilities (align-items-center / mr-3 / mt-2) so the
   address, phone and mail rows line up identically. */
body#contact .contact-page-info .part {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 14px 0;
  color: #0A2433;
}
body#contact .contact-page-info .contact-rich > .part:first-of-type { padding-top: 4px; }
body#contact .contact-page-info .part + .part { border-top: 1px solid #EFD5DE; }

/* Icon disc — same treatment for the FA <i> (address) and the <svg> (phone/mail) */
body#contact .contact-page-info .part .icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;          /* neutralise Bootstrap .mr-3 */
  background: #fff;
  color: #C74167;                /* the Font Awesome address icon inherits this */
  border: 1px solid #F4D9E0;
  border-radius: 50%;
  font-size: 15px;
}
/* Recolour the hard-coded grey (#9DA7AD) SVG icons to the brand accent
   so the phone/mail icons match the pink address marker. */
body#contact .contact-page-info .part .icon svg { width: 17px; height: 17px; }
body#contact .contact-page-info .part .icon svg path { fill: #C74167; }

/* Value column — .data (address), bare <div> (phone) or .text-break (mail) */
body#contact .contact-page-info .part > div:not(.icon) {
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #0A2433;
  word-break: break-word;
}
body#contact .contact-page-info .part a { color: #0A2433; text-decoration: none; }
body#contact .contact-page-info .part a:hover { color: #C74167; }

/* Optional custom HTML block appended by iqitcontactpage-info.tpl */
body#contact .contact-page-info hr {
  margin: 14px 0 0;
  border: 0;
  border-top: 1px solid #EFD5DE;
}

/* --- Form card ----------------------------------------------- */
body#contact .contact-form {
  background: #fff;
  border: 1px solid #E7E9EB;
  border-radius: 16px;
  padding: 24px;
}
body#contact .contact-form h4 {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: #0A2433;
}

/* Stack each field (label above, full-width control) so the right
   edges line up — fixes the uneven col-md-6 / col-md-9 mismatch and
   the dead Bootstrap-3 "col-md-offset-3". */
body#contact .contact-form .form-group.row {
  display: block;
  margin: 0 0 18px;
}
body#contact .contact-form .form-group.row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
body#contact .contact-form .form-control-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #0A2433;
  text-align: left;
}
body#contact .contact-form .form-control,
body#contact .contact-form .form-control-select {
  width: 100%;
  padding: 10px 12px;
  background: #F3F4F5 !important;
  border: 1px solid #DADEE0 !important;
  border-radius: 8px;
  box-shadow: none;
  color: #0A2433;
}
body#contact .contact-form .form-control::placeholder { color: #9DA7AD; }
body#contact .contact-form .form-control:focus,
body#contact .contact-form .form-control-select:focus {
  border-color: #C74167 !important;
  box-shadow: 0 0 0 3px rgba(199, 65, 103, 0.12);
  outline: 0;
}
/* Custom dropdown chevron so the two selects match the rest of the card */
body#contact .contact-form select.form-control-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px;
  background: #F3F4F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230A2433' d='M1 2l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 14px center !important;
}
body#contact .contact-form textarea.form-control {
  min-height: 140px;
  resize: vertical;
}
body#contact .contact-form .form-control-comment {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #9DA7AD;
}

/* Submit */
body#contact .contact-form .form-footer {
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid #E7E9EB;
}
body#contact .contact-form .btn-primary {
  min-width: 160px;
  padding: 11px 28px;
  background: #C74167;
  border-color: #C74167;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
}
body#contact .contact-form .btn-primary:hover,
body#contact .contact-form .btn-primary:focus {
  background: #B23A5B;
  border-color: #B23A5B;
  color: #fff;
}
body#contact .contact-form .alert { border-radius: 8px; }

/* --- Mobile -------------------------------------------------- */
@media (max-width: 767px) {
  body#contact #iqitcontactpage-map iframe { height: 240px; }
  body#contact .contact-page-info,
  body#contact .contact-form { padding: 16px; }
}
/* END CONTACT PAGE */

/* ============================================================================
   PARYTET WIZUALNY PO AKTUALIZACJI MOTYWU  warehouse 4.6.4 -> 4.7.2
   (Bootstrap 4.2.1 -> Bootstrap 5.3.3)
   ----------------------------------------------------------------------------
   Referencja: produkcja https://aleksander-print.com/ (nadal build BS4).
   Motyw nadrzedny 4.7.2 dowozi wlasny shim BS4->BS5
   (themes/warehouse/_dev/css/partials/_compatibility-bs.scss), ale jest on
   niekompletny. Ponizsze bloki domykaja braki, ktore zweryfikowano poprzez
   porownanie produkcyjnego bundla CSS z lokalnym oraz spis klas realnie
   uzywanych w markupie sklepu (szablony + wyrenderowane strony produkcyjne).

   Kazdy blok jest niezalezny i opisany - mozna go usunac pojedynczo, gdy
   markup zostanie kiedys przepisany na natywne klasy Bootstrap 5.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. SIATKA - odstepy (gutter) 30px jak w BS4
   BS4: .row{margin:0 -15px} .col{padding:0 15px}  -> gutter 30px
   BS5: --bs-gutter-x:1.5rem                       -> gutter 24px
   Bez tego cala siatka (listingi produktow, sekcje, koszyk) jest wezsza
   o 3px z kazdej strony kolumny. Klasy gutterow (g-, gx-, gy-) nie sa w tym sklepie
   uzywane, wiec globalne nadpisanie jest bezpieczne.
   --------------------------------------------------------------------------- */
.row {
  --bs-gutter-x: 30px;
}
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  --bs-gutter-x: 30px;
}

/* 1b. .row uzywany jako zwykly kontener flex (dzieci bez klasy kolumny)
   BS4 nie mial zadnej reguly `.row > *`. BS5 dodal:
       .row > * { flex-shrink:0; width:100%; max-width:100%; padding: 0 gutter/2;
                  margin-top: var(--bs-gutter-y) }
   Skutkiem kazde bezposrednie dziecko .row dostaje szerokosc 100% i laduje
   w osobnej linii. Dotyka to m.in. bloku ceny na listingu produktow:
       <div class="product-price-and-shipping row d-flex align-items-center
                   justify-content-between px-3">
         <a><span class="product-price">...</span></a>
         <div class="product-add-cart">...</div>
       </div>
   -> przycisk koszyka/podgladu spadal pod cene zamiast stac w tej samej linii.

   Reset dotyczy WYLACZNIE dzieci, ktore nie sa kolumnami (bez `col` i bez
   `col-*`), wiec normalna siatka Bootstrapa dziala bez zmian. Przywracamy
   dokladnie zachowanie BS4: brak wymuszonej szerokosci, brak paddingu,
   `flex-shrink` domyslny (1) - istotne przy waskich kafelkach col-6 na
   mobile, gdzie cena i przycisk musza sie zmiescic.
   Elementy z wlasnym `w-100` (np. kolumny stopki) zachowuja swoja szerokosc,
   bo `.w-100` ma `!important`.

   W markupie sklepu wystepuja tylko 2 takie wzorce (blok ceny x100 oraz
   wiersze stopki x18 na 10 przeanalizowanych stronach produkcyjnych). */
.row > *:not([class*="col-"]):not([class~="col"]) {
  flex-shrink: 1;
  width: auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
}


/* ---------------------------------------------------------------------------
   2. NAGLOWKI - stale rozmiary jak na produkcji
   BS5 wlacza RFS (responsive font sizes): naglowki sa plynne ponizej 1200px,
   a powyzej 1200px blok @media nadpisuje wlasne rozmiary motywu:
       h2  1.25rem  -> 2rem     (+60%)
       h3  1.125rem -> 1.75rem  (+55%)
       h4  1.125rem -> 1.5rem   (+33%)
   Przywracamy wartosci produkcyjne. Uwaga: `legend` celowo pominiete -
   na produkcji ma 1.5rem, wiec BS5 sie tu zgadza.
   --------------------------------------------------------------------------- */
.h1, h1 { font-size: 2.5rem; }
.h2, h2 { font-size: 1.25rem; }
.h3, h3,
.h4, h4 { font-size: 1.125rem; }


/* ---------------------------------------------------------------------------
   3. UTILITIES BS4 USUNIETE W BS5
   Shim motywu pokrywa tylko .ml-0..5 / .mr-0..5 (bez `auto` i bez wariantow
   responsywnych) oraz .text-left / .text-right / .float-*.
   Ponizej brakujaca reszta - wylacznie klasy realnie wystepujace w markupie
   sklepu (m.in. pl-0 x52, font-weight-normal x145, ml-auto, pl-md-2).
   --------------------------------------------------------------------------- */

/* padding-left / padding-right (BS5: ps-* / pe-*) */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* margin-left/right: auto (BS5: ms-auto / me-auto) - brakuje w shimie motywu */
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* warianty responsywne: ml-* / mr-* / pl-* / pr-* */
@media (min-width: 576px) {
  .ml-sm-0 { margin-left: 0 !important; }
  .ml-sm-1 { margin-left: 0.25rem !important; }
  .ml-sm-2 { margin-left: 0.5rem !important; }
  .ml-sm-3 { margin-left: 1rem !important; }
  .ml-sm-4 { margin-left: 1.5rem !important; }
  .ml-sm-5 { margin-left: 3rem !important; }
  .ml-sm-auto { margin-left: auto !important; }
  .mr-sm-0 { margin-right: 0 !important; }
  .mr-sm-1 { margin-right: 0.25rem !important; }
  .mr-sm-2 { margin-right: 0.5rem !important; }
  .mr-sm-3 { margin-right: 1rem !important; }
  .mr-sm-4 { margin-right: 1.5rem !important; }
  .mr-sm-5 { margin-right: 3rem !important; }
  .mr-sm-auto { margin-right: auto !important; }
  .pl-sm-0 { padding-left: 0 !important; }
  .pl-sm-1 { padding-left: 0.25rem !important; }
  .pl-sm-2 { padding-left: 0.5rem !important; }
  .pl-sm-3 { padding-left: 1rem !important; }
  .pl-sm-4 { padding-left: 1.5rem !important; }
  .pl-sm-5 { padding-left: 3rem !important; }
  .pr-sm-0 { padding-right: 0 !important; }
  .pr-sm-1 { padding-right: 0.25rem !important; }
  .pr-sm-2 { padding-right: 0.5rem !important; }
  .pr-sm-3 { padding-right: 1rem !important; }
  .pr-sm-4 { padding-right: 1.5rem !important; }
  .pr-sm-5 { padding-right: 3rem !important; }
}
@media (min-width: 768px) {
  .ml-md-0 { margin-left: 0 !important; }
  .ml-md-1 { margin-left: 0.25rem !important; }
  .ml-md-2 { margin-left: 0.5rem !important; }
  .ml-md-3 { margin-left: 1rem !important; }
  .ml-md-4 { margin-left: 1.5rem !important; }
  .ml-md-5 { margin-left: 3rem !important; }
  .ml-md-auto { margin-left: auto !important; }
  .mr-md-0 { margin-right: 0 !important; }
  .mr-md-1 { margin-right: 0.25rem !important; }
  .mr-md-2 { margin-right: 0.5rem !important; }
  .mr-md-3 { margin-right: 1rem !important; }
  .mr-md-4 { margin-right: 1.5rem !important; }
  .mr-md-5 { margin-right: 3rem !important; }
  .mr-md-auto { margin-right: auto !important; }
  .pl-md-0 { padding-left: 0 !important; }
  .pl-md-1 { padding-left: 0.25rem !important; }
  .pl-md-2 { padding-left: 0.5rem !important; }
  .pl-md-3 { padding-left: 1rem !important; }
  .pl-md-4 { padding-left: 1.5rem !important; }
  .pl-md-5 { padding-left: 3rem !important; }
  .pr-md-0 { padding-right: 0 !important; }
  .pr-md-1 { padding-right: 0.25rem !important; }
  .pr-md-2 { padding-right: 0.5rem !important; }
  .pr-md-3 { padding-right: 1rem !important; }
  .pr-md-4 { padding-right: 1.5rem !important; }
  .pr-md-5 { padding-right: 3rem !important; }
}
@media (min-width: 992px) {
  .ml-lg-0 { margin-left: 0 !important; }
  .ml-lg-1 { margin-left: 0.25rem !important; }
  .ml-lg-2 { margin-left: 0.5rem !important; }
  .ml-lg-3 { margin-left: 1rem !important; }
  .ml-lg-4 { margin-left: 1.5rem !important; }
  .ml-lg-5 { margin-left: 3rem !important; }
  .ml-lg-auto { margin-left: auto !important; }
  .mr-lg-0 { margin-right: 0 !important; }
  .mr-lg-1 { margin-right: 0.25rem !important; }
  .mr-lg-2 { margin-right: 0.5rem !important; }
  .mr-lg-3 { margin-right: 1rem !important; }
  .mr-lg-4 { margin-right: 1.5rem !important; }
  .mr-lg-5 { margin-right: 3rem !important; }
  .mr-lg-auto { margin-right: auto !important; }
  .pl-lg-0 { padding-left: 0 !important; }
  .pl-lg-1 { padding-left: 0.25rem !important; }
  .pl-lg-2 { padding-left: 0.5rem !important; }
  .pl-lg-3 { padding-left: 1rem !important; }
  .pl-lg-4 { padding-left: 1.5rem !important; }
  .pl-lg-5 { padding-left: 3rem !important; }
  .pr-lg-0 { padding-right: 0 !important; }
  .pr-lg-1 { padding-right: 0.25rem !important; }
  .pr-lg-2 { padding-right: 0.5rem !important; }
  .pr-lg-3 { padding-right: 1rem !important; }
  .pr-lg-4 { padding-right: 1.5rem !important; }
  .pr-lg-5 { padding-right: 3rem !important; }
}
@media (min-width: 1200px) {
  .ml-xl-0 { margin-left: 0 !important; }
  .ml-xl-1 { margin-left: 0.25rem !important; }
  .ml-xl-2 { margin-left: 0.5rem !important; }
  .ml-xl-3 { margin-left: 1rem !important; }
  .ml-xl-4 { margin-left: 1.5rem !important; }
  .ml-xl-5 { margin-left: 3rem !important; }
  .ml-xl-auto { margin-left: auto !important; }
  .mr-xl-0 { margin-right: 0 !important; }
  .mr-xl-1 { margin-right: 0.25rem !important; }
  .mr-xl-2 { margin-right: 0.5rem !important; }
  .mr-xl-3 { margin-right: 1rem !important; }
  .mr-xl-4 { margin-right: 1.5rem !important; }
  .mr-xl-5 { margin-right: 3rem !important; }
  .mr-xl-auto { margin-right: auto !important; }
  .pl-xl-0 { padding-left: 0 !important; }
  .pl-xl-1 { padding-left: 0.25rem !important; }
  .pl-xl-2 { padding-left: 0.5rem !important; }
  .pl-xl-3 { padding-left: 1rem !important; }
  .pl-xl-4 { padding-left: 1.5rem !important; }
  .pl-xl-5 { padding-left: 3rem !important; }
  .pr-xl-0 { padding-right: 0 !important; }
  .pr-xl-1 { padding-right: 0.25rem !important; }
  .pr-xl-2 { padding-right: 0.5rem !important; }
  .pr-xl-3 { padding-right: 1rem !important; }
  .pr-xl-4 { padding-right: 1.5rem !important; }
  .pr-xl-5 { padding-right: 3rem !important; }
}

/* text-align: warianty responsywne (BS5: text-*-start / text-*-end) */
.text-justify { text-align: justify !important; }
@media (min-width: 576px) {
  .text-sm-left { text-align: left !important; }
  .text-sm-right { text-align: right !important; }
  .text-sm-center { text-align: center !important; }
}
@media (min-width: 768px) {
  .text-md-left { text-align: left !important; }
  .text-md-right { text-align: right !important; }
  .text-md-center { text-align: center !important; }
}
@media (min-width: 992px) {
  .text-lg-left { text-align: left !important; }
  .text-lg-right { text-align: right !important; }
  .text-lg-center { text-align: center !important; }
}
@media (min-width: 1200px) {
  .text-xl-left { text-align: left !important; }
  .text-xl-right { text-align: right !important; }
  .text-xl-center { text-align: center !important; }
}

/* font-weight / font-style (BS5: fw-* / fst-*) */
.font-weight-lighter { font-weight: lighter !important; }
.font-weight-light   { font-weight: 300 !important; }
.font-weight-normal  { font-weight: 400 !important; }
.font-weight-bold    { font-weight: 700 !important; }
.font-weight-bolder  { font-weight: bolder !important; }
.font-italic         { font-style: italic !important; }


/* ---------------------------------------------------------------------------
   4. KOMPONENTY BS4 USUNIETE / PRZESTYLIZOWANE W BS5
   --------------------------------------------------------------------------- */

/* 4a. Badge - rozmiar jak w BS4 (BS5: .35em/.65em, 0.75em).
   `line-height` przywracamy z `initial` (~1.2, ustawione przez shim motywu)
   na produkcyjne `1` - inaczej plakietki dostepnosci i flagi rabatu sa wyzsze. */
.badge {
  --bs-badge-padding-x: 0.4em;
  --bs-badge-padding-y: 0.25em;
  --bs-badge-font-size: 75%;
  line-height: 1;
}

/* 4b. Badge - warianty kolorystyczne.
   W BS5 nie istnieja; .badge ma `--bs-badge-color:#fff` i przezroczyste tlo,
   wiec np. `badge badge-danger` (status dostepnosci produktu: "Niedostepny")
   renderuje sie jako bialy tekst na przezroczystym tle = niewidoczny.
   Shim motywu pokrywa tylko warning/success, i to w innych kolorach niz
   produkcja (success #198754 vs #28a745, warning z bialym tekstem). */
.badge-primary   { color: #fff;     background-color: #2fb5d2; }
.badge-secondary { color: #fff;     background-color: #6c757d; }
.badge-success   { color: #fff;     background-color: #28a745; }
.badge-danger    { color: #fff;     background-color: #ff4c4c; }
.badge-warning   { color: #212529;  background-color: #ff9a52; }
.badge-info      { color: #fff;     background-color: #17a2b8; }
.badge-light     { color: #212529;  background-color: #f8f9fa; }
.badge-dark      { color: #fff;     background-color: #343a40; }

/* 4b-bis. Alerty - kolory jak na produkcji.
   BS5 zastapil wyliczanie kolorow wariantow (BS4: theme-color-level) nowym
   systemem "subtle" (--bs-*-bg-subtle / --bs-*-text-emphasis). Tla wychodza
   praktycznie identyczne, ale kolor tekstu jest wyraznie ciemniejszy,
   a obramowanie bardziej nasycone, np.:
       success  tekst #155724 -> #0A3622,  ramka #c3e6cb -> #A3CFBB
       warning  tekst #85502b -> #663E21,  ramka #ffe3cf -> #FFD7BA
   To skutek uboczny zmiany silnika kolorow, a nie decyzja projektowa,
   wiec przywracamy wartosci produkcyjne. Alerty pojawiaja sie w koszyku,
   walidacji formularzy i komunikatach o dostepnosci.
   Uwaga: padding alertow (BS4 .75rem 1.25rem -> 16px w motywie 4.7.2)
   zostawiamy zmieniony - to swiadoma decyzja autora motywu. */
.alert-primary   { color: #185e6d; background-color: #d5f0f6; border-color: #c5eaf2; }
.alert-secondary { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; }
.alert-success   { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-danger    { color: #852828; background-color: #ffdbdb; border-color: #ffcdcd; }
.alert-warning   { color: #85502b; background-color: #ffebdc; border-color: #ffe3cf; }
.alert-info      { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
.alert-light     { color: #818182; background-color: #fefefe; border-color: #fdfdfe; }
.alert-dark      { color: #1b1e21; background-color: #d6d8d9; border-color: #c6c8ca; }

/* 4b-ter. Przyciski w stanie disabled - kolory jak na produkcji.
   BS4 nie ustawial tla ani koloru tekstu w regule `.btn:disabled` (robily to
   tylko warianty, np. `.btn-primary:disabled`). BS5 dolozyl:
       .btn.disabled, .btn:disabled, fieldset:disabled .btn {
           color: var(--bs-btn-disabled-color);
           background-color: var(--bs-btn-disabled-bg);
           border-color: var(--bs-btn-disabled-border-color); }
   Ta regula ma specyficznosc (0,2,0), wiec bije wlasne klasy sklepu (0,1,0).
   Dla przyciskow BEZ wariantu `.btn-*` te zmienne nie sa nigdzie zdefiniowane,
   wiec deklaracje sa niepoprawne na etapie wyliczania wartosci i tlo spada do
   `transparent`, a tekst do koloru domyslnego.

   Dotyczy dwoch przyciskow sklepu, ktore maja `class="btn <wlasna-klasa>"`:
     - .newsletter-btn    (zapis do newslettera; psgdpr trzyma go wylaczonym
                           do czasu zaznaczenia zgody, wiec stan disabled jest
                           widoczny od razu po wejsciu na strone)
     - .btn-product-list  (przycisk na listingu produktow)
   Zamiast walczyc o specyficznosc podajemy zmienne BS5 - regula disabled sama
   je odczyta. Wyciemnienie zapewnia `opacity:.5` z motywu, tak jak na
   produkcji. */
.newsletter-btn {
  --bs-btn-disabled-bg: #c74167;
  --bs-btn-disabled-border-color: #c74167;
  --bs-btn-disabled-color: #fff;
}
.btn-product-list {
  --bs-btn-disabled-bg: #C74167;
  --bs-btn-disabled-border-color: #C74167;
  --bs-btn-disabled-color: #fff;
}

/* 4c. input-group-prepend / input-group-append
   W BS5 przyciski sa bezposrednimi dziecmi .input-group, a te wrappery
   zostaly usuniete - bez `display:flex` wrapper przestaje sie rozciagac
   na wysokosc grupy (wyszukiwarka, newsletter, pola z przyciskiem). */
.input-group-prepend,
.input-group-append { display: flex; }
.input-group-prepend { margin-right: -1px; }
.input-group-append  { margin-left: -1px; }
.input-group-prepend > .btn,
.input-group-append > .btn,
.input-group-prepend > .input-group-text,
.input-group-append > .input-group-text { position: relative; }

/* 4d. dropdown-menu-right (BS5: dropdown-menu-end).
   Podwyzszona specyficznosc, bo BS5 ustawia `left:0` na
   `.dropdown-menu[data-bs-popper]`. */
.dropdown-menu.dropdown-menu-right,
.dropdown-menu.dropdown-menu-right[data-bs-popper] { right: 0; left: auto; }
.dropdown-menu.dropdown-menu-left,
.dropdown-menu.dropdown-menu-left[data-bs-popper] { right: auto; left: 0; }

/* 4e. form-inline (usuniete w BS5) */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

/* 4f. Tabele - geometria jak w BS4.
   BS5: padding .5rem + `border-bottom` na kazdej komorce.
   BS4/produkcja: padding .75rem + `border-top`, naglowek z border-bottom 2px.
   Specyficznosc rowna regule BS5 (.table>:not(caption)>*>*), wiec wlasne
   style tabel motywu (.page-order table td, body#checkout ... td) pozostaja
   nadrzedne. */
.table > :not(caption) > * > * {
  padding: 0.75rem;
  border-bottom-width: 0;
}
.table > * > tr > th,
.table > * > tr > td {
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}
.thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}


/* ---------------------------------------------------------------------------
   5. IKONY - Font Awesome 4.7 -> 6.7.2
   Motyw 4.7.2 podmienil font ikon na FA6. Zalaczony font-awesome-preload.css
   zawiera pelny shim nazw v4 (376 aliasow .fa.fa-*), wiec stare nazwy ikon
   (fa-heart-o, fa-trash-o, fa-circle-o-notch, ...) dzialaja poprawnie.

   Jedyny wyjatek: fa-file-o. Shim ustawia tylko kod znaku
   (.fa.fa-file-o{--fa:"\f15b"}), ale nie grubosc 400, wiec ikona dziedziczy
   `font-weight:900` z klasy .fa i renderuje sie jako wypelniony plik (solid)
   zamiast konturowego (regular), jak bylo w FA4 na produkcji.
   --------------------------------------------------------------------------- */
.fa.fa-file-o {
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   6. SKALA ODSTEPOW (spacers) - wartosci BS4 jak na produkcji

   Motyw 4.7.2 przedefiniowal mape $spacers z siatki BS4 (rem) na wlasna
   siatke 4-pikselowa i dolozyl poziomy 6-8. Efekt dla klas m-* / p-*
   (root font-size = 14px w obu wersjach):

       poziom | produkcja (BS4)  | motyw 4.7.2 | roznica
       -------|------------------|-------------|--------
         1    |  .25rem =  3.5px |   4px       |  +0.5px
         2    |   .5rem =  7px   |   8px       |  +1px
         3    |    1rem = 14px   |  12px       |  -2px
         4    |  1.5rem = 21px   |  16px       |  -5px
         5    |    3rem = 42px   |  20px       | -22px

   Klasy poziomu 4 i 5 wystepuja 736x w markupie sklepu (wyrenderowane strony
   produkcyjne + szablony child theme), a tylko 9x w szablonach rodzica
   zmienionych przez aktualizacje - markup jest pisany pod skale BS4.
   Motyw nie uzywa @extend na tych klasach (.p-3 to samodzielna regula),
   wiec zmiana dotyczy wylacznie markupu, nie komponentow motywu.

   Poziomy 6-8 zostaja nietkniete - nie istnieja na produkcji i uzywa ich
   tylko nowy kod motywu.

   Usuniecie tego bloku przywraca 4-pikselowa siatke autora motywu.
   Blok wygenerowany z listy klas faktycznie obecnych w bundlu (440 klas).
   --------------------------------------------------------------------------- */
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-n1 { margin-left: -0.25rem !important; }
.ml-n2 { margin-left: -0.5rem !important; }
.ml-n3 { margin-left: -1rem !important; }
.ml-n4 { margin-left: -1.5rem !important; }
.ml-n5 { margin-left: -3rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-n1 { margin-right: -0.25rem !important; }
.mr-n2 { margin-right: -0.5rem !important; }
.mr-n3 { margin-right: -1rem !important; }
.mr-n4 { margin-right: -1.5rem !important; }
.mr-n5 { margin-right: -3rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
.mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
.mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
.mx-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.mx-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

@media (min-width: 576px) {
  .m-sm-1 { margin: 0.25rem !important; }
  .m-sm-2 { margin: 0.5rem !important; }
  .m-sm-3 { margin: 1rem !important; }
  .m-sm-4 { margin: 1.5rem !important; }
  .m-sm-5 { margin: 3rem !important; }
  .mb-sm-1 { margin-bottom: 0.25rem !important; }
  .mb-sm-2 { margin-bottom: 0.5rem !important; }
  .mb-sm-3 { margin-bottom: 1rem !important; }
  .mb-sm-4 { margin-bottom: 1.5rem !important; }
  .mb-sm-5 { margin-bottom: 3rem !important; }
  .me-sm-1 { margin-right: 0.25rem !important; }
  .me-sm-2 { margin-right: 0.5rem !important; }
  .me-sm-3 { margin-right: 1rem !important; }
  .me-sm-4 { margin-right: 1.5rem !important; }
  .me-sm-5 { margin-right: 3rem !important; }
  .ms-sm-1 { margin-left: 0.25rem !important; }
  .ms-sm-2 { margin-left: 0.5rem !important; }
  .ms-sm-3 { margin-left: 1rem !important; }
  .ms-sm-4 { margin-left: 1.5rem !important; }
  .ms-sm-5 { margin-left: 3rem !important; }
  .mt-sm-1 { margin-top: 0.25rem !important; }
  .mt-sm-2 { margin-top: 0.5rem !important; }
  .mt-sm-3 { margin-top: 1rem !important; }
  .mt-sm-4 { margin-top: 1.5rem !important; }
  .mt-sm-5 { margin-top: 3rem !important; }
  .mx-sm-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
  .mx-sm-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
  .mx-sm-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
  .mx-sm-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
  .mx-sm-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
  .my-sm-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-sm-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-sm-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-sm-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-sm-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .p-sm-1 { padding: 0.25rem !important; }
  .p-sm-2 { padding: 0.5rem !important; }
  .p-sm-3 { padding: 1rem !important; }
  .p-sm-4 { padding: 1.5rem !important; }
  .p-sm-5 { padding: 3rem !important; }
  .pb-sm-1 { padding-bottom: 0.25rem !important; }
  .pb-sm-2 { padding-bottom: 0.5rem !important; }
  .pb-sm-3 { padding-bottom: 1rem !important; }
  .pb-sm-4 { padding-bottom: 1.5rem !important; }
  .pb-sm-5 { padding-bottom: 3rem !important; }
  .pe-sm-1 { padding-right: 0.25rem !important; }
  .pe-sm-2 { padding-right: 0.5rem !important; }
  .pe-sm-3 { padding-right: 1rem !important; }
  .pe-sm-4 { padding-right: 1.5rem !important; }
  .pe-sm-5 { padding-right: 3rem !important; }
  .ps-sm-1 { padding-left: 0.25rem !important; }
  .ps-sm-2 { padding-left: 0.5rem !important; }
  .ps-sm-3 { padding-left: 1rem !important; }
  .ps-sm-4 { padding-left: 1.5rem !important; }
  .ps-sm-5 { padding-left: 3rem !important; }
  .pt-sm-1 { padding-top: 0.25rem !important; }
  .pt-sm-2 { padding-top: 0.5rem !important; }
  .pt-sm-3 { padding-top: 1rem !important; }
  .pt-sm-4 { padding-top: 1.5rem !important; }
  .pt-sm-5 { padding-top: 3rem !important; }
  .px-sm-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
  .px-sm-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
  .px-sm-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
  .px-sm-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
  .px-sm-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
  .py-sm-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-sm-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-sm-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-sm-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-sm-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

@media (min-width: 768px) {
  .m-md-1 { margin: 0.25rem !important; }
  .m-md-2 { margin: 0.5rem !important; }
  .m-md-3 { margin: 1rem !important; }
  .m-md-4 { margin: 1.5rem !important; }
  .m-md-5 { margin: 3rem !important; }
  .mb-md-1 { margin-bottom: 0.25rem !important; }
  .mb-md-2 { margin-bottom: 0.5rem !important; }
  .mb-md-3 { margin-bottom: 1rem !important; }
  .mb-md-4 { margin-bottom: 1.5rem !important; }
  .mb-md-5 { margin-bottom: 3rem !important; }
  .me-md-1 { margin-right: 0.25rem !important; }
  .me-md-2 { margin-right: 0.5rem !important; }
  .me-md-3 { margin-right: 1rem !important; }
  .me-md-4 { margin-right: 1.5rem !important; }
  .me-md-5 { margin-right: 3rem !important; }
  .ms-md-1 { margin-left: 0.25rem !important; }
  .ms-md-2 { margin-left: 0.5rem !important; }
  .ms-md-3 { margin-left: 1rem !important; }
  .ms-md-4 { margin-left: 1.5rem !important; }
  .ms-md-5 { margin-left: 3rem !important; }
  .mt-md-1 { margin-top: 0.25rem !important; }
  .mt-md-2 { margin-top: 0.5rem !important; }
  .mt-md-3 { margin-top: 1rem !important; }
  .mt-md-4 { margin-top: 1.5rem !important; }
  .mt-md-5 { margin-top: 3rem !important; }
  .mx-md-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
  .mx-md-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
  .mx-md-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
  .mx-md-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
  .mx-md-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
  .my-md-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-md-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-md-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-md-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-md-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .p-md-1 { padding: 0.25rem !important; }
  .p-md-2 { padding: 0.5rem !important; }
  .p-md-3 { padding: 1rem !important; }
  .p-md-4 { padding: 1.5rem !important; }
  .p-md-5 { padding: 3rem !important; }
  .pb-md-1 { padding-bottom: 0.25rem !important; }
  .pb-md-2 { padding-bottom: 0.5rem !important; }
  .pb-md-3 { padding-bottom: 1rem !important; }
  .pb-md-4 { padding-bottom: 1.5rem !important; }
  .pb-md-5 { padding-bottom: 3rem !important; }
  .pe-md-1 { padding-right: 0.25rem !important; }
  .pe-md-2 { padding-right: 0.5rem !important; }
  .pe-md-3 { padding-right: 1rem !important; }
  .pe-md-4 { padding-right: 1.5rem !important; }
  .pe-md-5 { padding-right: 3rem !important; }
  .ps-md-1 { padding-left: 0.25rem !important; }
  .ps-md-2 { padding-left: 0.5rem !important; }
  .ps-md-3 { padding-left: 1rem !important; }
  .ps-md-4 { padding-left: 1.5rem !important; }
  .ps-md-5 { padding-left: 3rem !important; }
  .pt-md-1 { padding-top: 0.25rem !important; }
  .pt-md-2 { padding-top: 0.5rem !important; }
  .pt-md-3 { padding-top: 1rem !important; }
  .pt-md-4 { padding-top: 1.5rem !important; }
  .pt-md-5 { padding-top: 3rem !important; }
  .px-md-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
  .px-md-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
  .px-md-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
  .px-md-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
  .px-md-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
  .py-md-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-md-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-md-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

@media (min-width: 992px) {
  .m-lg-1 { margin: 0.25rem !important; }
  .m-lg-2 { margin: 0.5rem !important; }
  .m-lg-3 { margin: 1rem !important; }
  .m-lg-4 { margin: 1.5rem !important; }
  .m-lg-5 { margin: 3rem !important; }
  .mb-lg-1 { margin-bottom: 0.25rem !important; }
  .mb-lg-2 { margin-bottom: 0.5rem !important; }
  .mb-lg-3 { margin-bottom: 1rem !important; }
  .mb-lg-4 { margin-bottom: 1.5rem !important; }
  .mb-lg-5 { margin-bottom: 3rem !important; }
  .me-lg-1 { margin-right: 0.25rem !important; }
  .me-lg-2 { margin-right: 0.5rem !important; }
  .me-lg-3 { margin-right: 1rem !important; }
  .me-lg-4 { margin-right: 1.5rem !important; }
  .me-lg-5 { margin-right: 3rem !important; }
  .ms-lg-1 { margin-left: 0.25rem !important; }
  .ms-lg-2 { margin-left: 0.5rem !important; }
  .ms-lg-3 { margin-left: 1rem !important; }
  .ms-lg-4 { margin-left: 1.5rem !important; }
  .ms-lg-5 { margin-left: 3rem !important; }
  .mt-lg-1 { margin-top: 0.25rem !important; }
  .mt-lg-2 { margin-top: 0.5rem !important; }
  .mt-lg-3 { margin-top: 1rem !important; }
  .mt-lg-4 { margin-top: 1.5rem !important; }
  .mt-lg-5 { margin-top: 3rem !important; }
  .mx-lg-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
  .mx-lg-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
  .mx-lg-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
  .mx-lg-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
  .mx-lg-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
  .my-lg-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-lg-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-lg-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-lg-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-lg-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .p-lg-1 { padding: 0.25rem !important; }
  .p-lg-2 { padding: 0.5rem !important; }
  .p-lg-3 { padding: 1rem !important; }
  .p-lg-4 { padding: 1.5rem !important; }
  .p-lg-5 { padding: 3rem !important; }
  .pb-lg-1 { padding-bottom: 0.25rem !important; }
  .pb-lg-2 { padding-bottom: 0.5rem !important; }
  .pb-lg-3 { padding-bottom: 1rem !important; }
  .pb-lg-4 { padding-bottom: 1.5rem !important; }
  .pb-lg-5 { padding-bottom: 3rem !important; }
  .pe-lg-1 { padding-right: 0.25rem !important; }
  .pe-lg-2 { padding-right: 0.5rem !important; }
  .pe-lg-3 { padding-right: 1rem !important; }
  .pe-lg-4 { padding-right: 1.5rem !important; }
  .pe-lg-5 { padding-right: 3rem !important; }
  .ps-lg-1 { padding-left: 0.25rem !important; }
  .ps-lg-2 { padding-left: 0.5rem !important; }
  .ps-lg-3 { padding-left: 1rem !important; }
  .ps-lg-4 { padding-left: 1.5rem !important; }
  .ps-lg-5 { padding-left: 3rem !important; }
  .pt-lg-1 { padding-top: 0.25rem !important; }
  .pt-lg-2 { padding-top: 0.5rem !important; }
  .pt-lg-3 { padding-top: 1rem !important; }
  .pt-lg-4 { padding-top: 1.5rem !important; }
  .pt-lg-5 { padding-top: 3rem !important; }
  .px-lg-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
  .px-lg-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
  .px-lg-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
  .px-lg-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
  .px-lg-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
  .py-lg-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-lg-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-lg-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-lg-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-lg-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

@media (min-width: 1200px) {
  .m-xl-1 { margin: 0.25rem !important; }
  .m-xl-2 { margin: 0.5rem !important; }
  .m-xl-3 { margin: 1rem !important; }
  .m-xl-4 { margin: 1.5rem !important; }
  .m-xl-5 { margin: 3rem !important; }
  .mb-xl-1 { margin-bottom: 0.25rem !important; }
  .mb-xl-2 { margin-bottom: 0.5rem !important; }
  .mb-xl-3 { margin-bottom: 1rem !important; }
  .mb-xl-4 { margin-bottom: 1.5rem !important; }
  .mb-xl-5 { margin-bottom: 3rem !important; }
  .me-xl-1 { margin-right: 0.25rem !important; }
  .me-xl-2 { margin-right: 0.5rem !important; }
  .me-xl-3 { margin-right: 1rem !important; }
  .me-xl-4 { margin-right: 1.5rem !important; }
  .me-xl-5 { margin-right: 3rem !important; }
  .ms-xl-1 { margin-left: 0.25rem !important; }
  .ms-xl-2 { margin-left: 0.5rem !important; }
  .ms-xl-3 { margin-left: 1rem !important; }
  .ms-xl-4 { margin-left: 1.5rem !important; }
  .ms-xl-5 { margin-left: 3rem !important; }
  .mt-xl-1 { margin-top: 0.25rem !important; }
  .mt-xl-2 { margin-top: 0.5rem !important; }
  .mt-xl-3 { margin-top: 1rem !important; }
  .mt-xl-4 { margin-top: 1.5rem !important; }
  .mt-xl-5 { margin-top: 3rem !important; }
  .mx-xl-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
  .mx-xl-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
  .mx-xl-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
  .mx-xl-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
  .mx-xl-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
  .my-xl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-xl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-xl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-xl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-xl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .p-xl-1 { padding: 0.25rem !important; }
  .p-xl-2 { padding: 0.5rem !important; }
  .p-xl-3 { padding: 1rem !important; }
  .p-xl-4 { padding: 1.5rem !important; }
  .p-xl-5 { padding: 3rem !important; }
  .pb-xl-1 { padding-bottom: 0.25rem !important; }
  .pb-xl-2 { padding-bottom: 0.5rem !important; }
  .pb-xl-3 { padding-bottom: 1rem !important; }
  .pb-xl-4 { padding-bottom: 1.5rem !important; }
  .pb-xl-5 { padding-bottom: 3rem !important; }
  .pe-xl-1 { padding-right: 0.25rem !important; }
  .pe-xl-2 { padding-right: 0.5rem !important; }
  .pe-xl-3 { padding-right: 1rem !important; }
  .pe-xl-4 { padding-right: 1.5rem !important; }
  .pe-xl-5 { padding-right: 3rem !important; }
  .ps-xl-1 { padding-left: 0.25rem !important; }
  .ps-xl-2 { padding-left: 0.5rem !important; }
  .ps-xl-3 { padding-left: 1rem !important; }
  .ps-xl-4 { padding-left: 1.5rem !important; }
  .ps-xl-5 { padding-left: 3rem !important; }
  .pt-xl-1 { padding-top: 0.25rem !important; }
  .pt-xl-2 { padding-top: 0.5rem !important; }
  .pt-xl-3 { padding-top: 1rem !important; }
  .pt-xl-4 { padding-top: 1.5rem !important; }
  .pt-xl-5 { padding-top: 3rem !important; }
  .px-xl-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
  .px-xl-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
  .px-xl-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
  .px-xl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
  .px-xl-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
  .py-xl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-xl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-xl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-xl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-xl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

@media (min-width: 1400px) {
  .m-xxl-1 { margin: 0.25rem !important; }
  .m-xxl-2 { margin: 0.5rem !important; }
  .m-xxl-3 { margin: 1rem !important; }
  .m-xxl-4 { margin: 1.5rem !important; }
  .m-xxl-5 { margin: 3rem !important; }
  .mb-xxl-1 { margin-bottom: 0.25rem !important; }
  .mb-xxl-2 { margin-bottom: 0.5rem !important; }
  .mb-xxl-3 { margin-bottom: 1rem !important; }
  .mb-xxl-4 { margin-bottom: 1.5rem !important; }
  .mb-xxl-5 { margin-bottom: 3rem !important; }
  .me-xxl-1 { margin-right: 0.25rem !important; }
  .me-xxl-2 { margin-right: 0.5rem !important; }
  .me-xxl-3 { margin-right: 1rem !important; }
  .me-xxl-4 { margin-right: 1.5rem !important; }
  .me-xxl-5 { margin-right: 3rem !important; }
  .ms-xxl-1 { margin-left: 0.25rem !important; }
  .ms-xxl-2 { margin-left: 0.5rem !important; }
  .ms-xxl-3 { margin-left: 1rem !important; }
  .ms-xxl-4 { margin-left: 1.5rem !important; }
  .ms-xxl-5 { margin-left: 3rem !important; }
  .mt-xxl-1 { margin-top: 0.25rem !important; }
  .mt-xxl-2 { margin-top: 0.5rem !important; }
  .mt-xxl-3 { margin-top: 1rem !important; }
  .mt-xxl-4 { margin-top: 1.5rem !important; }
  .mt-xxl-5 { margin-top: 3rem !important; }
  .mx-xxl-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
  .mx-xxl-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
  .mx-xxl-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
  .mx-xxl-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
  .mx-xxl-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
  .my-xxl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-xxl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-xxl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-xxl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-xxl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .p-xxl-1 { padding: 0.25rem !important; }
  .p-xxl-2 { padding: 0.5rem !important; }
  .p-xxl-3 { padding: 1rem !important; }
  .p-xxl-4 { padding: 1.5rem !important; }
  .p-xxl-5 { padding: 3rem !important; }
  .pb-xxl-1 { padding-bottom: 0.25rem !important; }
  .pb-xxl-2 { padding-bottom: 0.5rem !important; }
  .pb-xxl-3 { padding-bottom: 1rem !important; }
  .pb-xxl-4 { padding-bottom: 1.5rem !important; }
  .pb-xxl-5 { padding-bottom: 3rem !important; }
  .pe-xxl-1 { padding-right: 0.25rem !important; }
  .pe-xxl-2 { padding-right: 0.5rem !important; }
  .pe-xxl-3 { padding-right: 1rem !important; }
  .pe-xxl-4 { padding-right: 1.5rem !important; }
  .pe-xxl-5 { padding-right: 3rem !important; }
  .ps-xxl-1 { padding-left: 0.25rem !important; }
  .ps-xxl-2 { padding-left: 0.5rem !important; }
  .ps-xxl-3 { padding-left: 1rem !important; }
  .ps-xxl-4 { padding-left: 1.5rem !important; }
  .ps-xxl-5 { padding-left: 3rem !important; }
  .pt-xxl-1 { padding-top: 0.25rem !important; }
  .pt-xxl-2 { padding-top: 0.5rem !important; }
  .pt-xxl-3 { padding-top: 1rem !important; }
  .pt-xxl-4 { padding-top: 1.5rem !important; }
  .pt-xxl-5 { padding-top: 3rem !important; }
  .px-xxl-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
  .px-xxl-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
  .px-xxl-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
  .px-xxl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
  .px-xxl-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
  .py-xxl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-xxl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-xxl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-xxl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-xxl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* END PARYTET BS4 -> BS5 */