:root {
  --orange-main: #f58a3f;
  --red-main: #bc2828;
  --green-main: #29c133;
  --bg-blue-light: #ddebf5;
  --blue-light: #007db2;
  --blue-dark: #001a32;
  --gray-border: #828f9b;
  --white: #ffffff;
  --white-hover: #e2e2e2;
  --hero-bg: rgba(10, 10, 10, 0.5);
}
@font-face {
  font-family: Futura-PT-Book;
  src: url(/themes/contrib/bootstrap/fonts/PT_Futura_Book.woff2);
}
@font-face {
  font-family: Futura-PT-Book;
  src: url(/themes/contrib/bootstrap/fonts/PT_Futura_Bold.woff2);
  font-weight: bold;
}
body {
  font-family: Futura-PT-Book;
}
p {
  font-size: 18px;
}
/* Default button styling */
.button.btn-primary {
  background-color: var(--blue-light);
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1.1rem;
  padding: 0.6rem;
  border: 0;
  border-radius: 0;
}
#edit-cancel {
  margin-left: 20px;
  color: red;
}
/* Table styling */
.table-responsive {
  .views-field a {
    display: flex;
  }
  td.is-active {
    background-color: #e8f4ff;
  }
  .tablesort {
    margin-top: 6px;
  }
  .tablesort.tablesort--desc {
    background-image: url(/core/misc/icons/787878/twistie-up.svg);
  }
  .tablesort.tablesort--asc {
    background-image: url(/core/misc/icons/787878/twistie-down.svg);
  }
}

/* Header start */
#navbar-main {
  height: 5rem;
  padding: 0;
  color: var(--white);
  display: flex;
  flex-wrap: nowrap;

  a {
    color: var(--white);
  }
  .navbar-brand {
    height: 5rem;
    padding: 0rem;
    margin: 0 2rem;
    display: flex;
    align-items: center;

    /* make the text invisible */
    color: transparent;
    user-select: none;

    img {
      height: 55%;
      width: 100%;
      min-width: 100%;
      object-fit: contain;
    }
  }

  .sidebar-toggle-container {
    width: 5rem;
    height: 100%;

    display: flex;
    justify-content: end;

    background-color: var(--blue-dark);
    border-bottom: 1px solid var(--blue-dark);
    button {
      width: 100%;
      height: 100%;
      padding: 0;

      display: flex;
      justify-content: center;
      align-items: center;

      background-color: var(--blue-dark);
      border: none;
      transition: width 0.3s ease;
      .arrow-icon {
        height: 2.5rem;
        transition: rotate 0.3s ease;
      }
    }

    button.active {
      width: 6rem;
      transition: width 0.3s ease;

      .arrow-icon {
        rotate: 90deg;
        transition: rotate 0.3s ease;
      }
    }
  }

  .nav-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 0 2rem 0 auto;
  }

  .account-menu {
    position: relative;
    margin: 0 0 0 auto;
    padding-right: 10px;
    .avatar {
      height: 2.5rem;
      width: 2.5rem;
      border-radius: 50%;
      background-color: var(--white);
    }
    .login-btn {
      display: flex;
      gap: 1rem;
      align-items: center;
      padding: 0.25rem 0.5rem;

      border: 3px solid var(--white);
      font-size: 1.5rem;
      font-weight: bold;
      img {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
        background-color: var(--white);
      }
    }
    .login-dropdown-btn.mobile {
      display: none;
    }

    .account-btn {
      background-color: transparent;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 0.5rem;

      color: var(--white);
      font-size: 1.6rem;
      font-weight: bold;
      vertical-align: middle;

      border: none;
      cursor: pointer;
      align-items: center;

      .avatar {
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
        background-color: var(--white);
      }
      .arrow-icon {
        height: 2rem;
        width: 2rem;
        fill: var(--white);
        rotate: 180deg;
      }
    }

    .dropdown-menu {
      right: 0;
      top: 100%;
      display: none;
      list-style: none;
      margin: 0.75rem 0 0;
      padding: 0;
      z-index: 10;
      width: 100%;

      border: none;
      border-radius: 0;
      background-color: var(--blue-dark);
      .dropdown-wrapper {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .mobile-details {
          display: none;
        }
        a {
          font-size: 1.5rem;
          padding: 1rem 1rem;
          text-decoration: none;
        }
        a:hover {
          background-color: var(--blue-dark);
          text-decoration: underline;
        }
      }
    }
  }
  #block-bootstrap-sass-cart {
    border-left: 2px solid white;
    padding-left: 10px;
    .cart-block--contents {
      background-color: var(--blue-dark);
      border: 2px solid var(--blue-dark);
      width: max-content;
      padding: 0.5rem;
      .view-commerce-cart-block {
        background-color: var(--blue-dark);
        font-size: 1.25rem;
        table.table {
          color: var(--white);
          --bs-table-color: var(--white);
          --bs-table-striped-color: var(--white);
          --bs-table-hover-color: var(--white);
          background-color: var(--blue-dark);
          --bs-table-bg: var(--blue-dark);
        }
      }
      .cart-block--contents__links a {
        background-color: var(--blue-dark);
        border: 2px solid var(--white);
        display: block;
        padding: 4px;
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
      }
    }
  }
}

/* Header end */

/* Sidebar start */
#sidebar_first {
  width: 16rem;
  padding: 0;
  overflow: hidden;

  background-image: linear-gradient(
    to bottom,
    var(--blue-light),
    var(--blue-dark)
  );

  color: var(--white);
  font-weight: bold;
  font-size: 1.5rem;
  transition: width 0.3s ease;
  #block-bootstrap-sass-main-menu {
    border: 0;
    padding: 0;
  }
  #block-bootstrap-sass-languageswitcher {
    border: 0;
    padding: 0;
    h2 {
      margin: 0 2rem;
      padding-left: 16px;
      text-shadow: none;
    }
    .links.nav.links-inline {
      display: flex;
      flex-direction: column;
    }
    span {
      margin: 0 2rem;
      font-size: 1.2rem;
      font-weight: normal;
      a {
        color: #fff;
      }
    }
    span:hover {
      text-decoration: underline;
      text-decoration-color: #fff;
    }
  }
  .user-groups {
    width: 100%;
    background-color: var(--orange-main);
    color: var(--white);
    z-index: 1;
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      li {
        button.group-btn {
          padding: 1rem 1rem 1rem 3rem;
          width: 100%;
          color: var(--white);
          font-weight: bold;
          text-wrap: nowrap;
          background-color: var(--orange-main);
          border: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
          display: flex;
          justify-content: space-between;
          align-items: center;

          .arrow-icon {
            height: 1.5rem;
            rotate: 180deg;
            transition: rotate 0.3s ease;
          }
          .club-icon {
            height: 1.5rem;
            display: none;
          }
        }
        button.group-btn:hover {
          text-decoration: underline;
        }

        button.group-btn.active {
          .arrow-icon {
            rotate: 270deg;
            transition: rotate 0.3s ease;
          }
        }

        .dropdown-menu {
          position: relative;
          display: none;
          background-color: transparent;
          border: none;
          border-radius: 0;
          &.is-open {
            display: flex;
          }

          .link-container {
            padding: 0.5rem 3rem;
            a {
              color: var(--white);
              text-decoration: none;
              font-size: 1.5rem;
              img {
                height: 3rem;

                display: none;
              }
            }
            a:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

  .nav-item {
    a {
      margin: 0 4rem;
      color: var(--white);
    }
    a:hover {
      text-decoration: underline;
    }
    .menu-icon img {
      display: none;
      height: 2rem;
    }
    .menu-icon hr {
      display: none;
      width: 3rem;
      margin: 0.25rem 0 0;
      border: solid 2px var(--white);
      opacity: 1;
    }
  }
  .nav-item.active a {
    text-decoration: underline;
  }
}

#sidebar_first.collapsed {
  width: 5rem;
  padding: 0;
  overflow: hidden;
  transition: width 0.3s ease;

  .navbar-nav {
    margin: 0;
  }
  .nav-item {
    .nav-link {
      margin: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      .menu-icon img {
        display: block;
        height: 3rem;
        max-width: 5.5rem;
      }
      .menu-title {
        display: none;
      }
      .menu-icon hr {
        display: block;
        opacity: 0;
      }
    }
    .nav-link:hover {
      .menu-icon hr {
        display: block;
        opacity: 1;
      }
    }
  }
  .nav-item.active .nav-link {
    .menu-icon hr {
      display: block;
      opacity: 1;
    }
  }

  .user-groups ul li {
    button.group-btn {
      padding: 0.75rem 0;
      width: 100%;
      justify-content: center;
      align-items: center;

      .arrow-icon {
        display: none;
      }
      span {
        display: none;
      }
      .club-icon {
        height: 3rem;
        display: block;
      }
    }
    .dropdown-menu {
      width: 5rem;
      .link-container {
        padding: 0.5rem 0;
        width: 100%;
        a {
          display: flex;
          justify-content: center;
          width: 5rem;
          span {
            display: none;
          }
          img {
            display: block;
          }
        }
      }
    }
  }
}

/*Sidebar end */

/* Footer */
.site-footer {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 3rem;
  padding: 5rem 10rem 5rem 16rem;

  color: var(--white);
  background-color: var(--blue-dark) !important;
  .title {
    font-size: 3rem;
    font-weight: bold;
    text-wrap: nowrap;
    margin: 0;
  }
  .contact-details {
    p {
      font-size: 1.5rem;
      text-wrap: nowrap;
      margin: 0;

      display: flex;
      justify-content: start;
      align-items: center;
    }
    p img {
      height: 1.6rem;
      width: 1.6rem;
      margin-right: 1rem;
    }
  }
  .logo-container {
    height: 100%;
    margin-right: 0;
    margin-left: auto;
    img {
      height: 8rem;
    }
  }
}

/* Footer end */

/* Main content */
#content {
  padding: 20px 30px;
}
/* Main content end*/

/* User-register-form */
.main-content:has(.user-register-form) {
  background-color: var(--bg-blue-light);

  .title {
    color: var(--blue-light);
    text-align: center;
    font-weight: bold;
  }

  nav {
    display: none;
  }
}

.main-content .section:has(.user-register-form) {
  background-color: var(--white);
  padding-top: 2rem;
  margin: 3rem;
}

.user-register-form {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1rem 10rem;
  padding: 0rem 6rem 3rem 6rem;
  color: var(--blue-light);
  font-family: Calibri, sans-serif;
  font-size: 1.5rem;
}
.register-account-header {
  text-align: center;
  color: var(--blue-light);
  font-weight: bold;
}
.user-register-form input {
  border-radius: 0px;
  border: 3px var(--blue-light) solid;
  padding: 0.5rem;
  font-size: 1.5rem;
}

.user-register-form .password-field {
  width: 100%;
}

.user-register-form .password-confirm {
  width: 100%;
}

.user-register-form .password-parent {
  max-width: 100%;
  overflow: visible;
}
.user-register-form select {
  border-radius: 0px;
  border: none;
  background-color: var(--bg-blue-light);

  font-weight: bold;
  font-size: 1.5rem;
  max-width: 15rem;
}

.user-register-form .description {
  display: none;
}

.user-register-form .form-actions {
  grid-column: span 2;
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}

.user-register-form .form-actions button {
  background-color: var(--blue-light);
  border-radius: 0;
  border: none;
  color: var(--white);
  font-weight: bold;
  font-size: 2rem;
  line-height: 2rem;
  padding: 1rem 10rem 1rem 10rem;
}

/* user-register-form end */

/* user-login-form */
.main-content:has(.user-login-form) {
  display: flex;
  justify-content: center;

  background-color: var(--bg-blue-light);

  .title {
    color: var(--blue-light);
    text-align: center;
    font-weight: bold;
  }

  nav {
    display: none;
  }
}

.main-content .section:has(.user-login-form) {
  background-color: var(--white);
  padding: 3rem 3rem;
  margin: 5rem 0rem;
  max-width: 35rem;
}

.user-login-form {
  display: flex;
  flex-direction: column;
  align-items: center;

  color: var(--blue-light);
  font-family: Calibri, sans-serif;
  font-size: 1.5rem;

  input {
    border-radius: 0px;
    border: 3px var(--blue-light) solid;
    padding: 0.5rem;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .description {
    display: none;
  }

  .form-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 0 !important;
  }

  .form-actions button {
    padding: 0.5rem;
    width: 100%;
    line-height: var(--bs-body-line-height);
    background-color: var(--orange-main);
    border-radius: 0;
    border: none;

    color: var(--white);
    font-weight: bold;
    font-size: 2rem;
  }

  .password-forget-button {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--blue-light);
  }

  .register-button {
    padding: 0.5rem;
    width: 100%;

    background-color: var(--blue-light);
    border-radius: 0;
    border: none;

    color: var(--white);
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
  }

  hr.solid {
    border-top: 3px solid var(--blue-light);
    border-radius: 5px;
    opacity: 1;
    width: 5rem;
    margin: 2rem 0;
  }
}
/* user-login-form end */

/* main page */
#main-page {
  display: flex;

  #content {
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: 50% 50%;

    .hero {
      height: 26rem;
      grid-column: span 2;

      background-image: url(/themes/contrib/bootstrap/subthemes/bootstrap_sass/images/judo.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      .text-container {
        height: 100%;
        width: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;

        padding: 4rem;

        background-color: var(--hero-bg);
        color: var(--white);

        h1 {
          font-size: 3rem;
          font-weight: bold;
        }

        p {
          font-size: 2rem;
        }

        a {
          background-color: var(--orange-main);
          color: var(--white);
          font-size: 1.5rem;
          line-height: 1.5rem;
          font-weight: bold;
          padding: 1rem 2rem;
        }
      }
    }
  }
}

/* main page end*/

/* Blocks */
.text-list {
  margin: 6rem 2rem 4rem;

  h2 {
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 0.5rem;
    margin: 0;
    color: var(--blue-light);
    border-bottom: var(--blue-light) 3px solid;
  }

  p {
    margin: 0;
    padding: 0;
  }
  .item-list ul li {
    padding: 0;
  }

  .list-content {
    line-height: 1.5rem;

    .views-exposed-form .d-flex .js-form-item {
      display: flex;
      align-items: center;
      margin: 1rem 1rem 1rem 2rem;
      gap: 1rem;
      label {
        font-size: 1.25rem;
        font-weight: bold;
      }
      input {
        border: 1px solid var(--gray-border);
        border-radius: 0;
      }
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li a {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 1rem 4rem 1rem 2rem;

        border-bottom: 2px solid #cacaca;
        color: var(--blue-light);
        font-size: 1.5rem;
        font-weight: bold;

        .date {
          margin-right: 8rem;
          text-wrap: nowrap;
        }

        .title {
          color: #000;
          overflow: hidden;
        }

        .location {
          font-weight: lighter;
        }
      }
      li a:hover {
        background-color: var(--white-hover);
      }
    }
  }
}

.colored-list {
  margin: 5rem 2rem 4rem;
  h2 {
    display: none;
  }
  .list-content {
    background-color: var(--blue-light);
    padding: 1rem 2rem;
    h2.title {
      display: block;
      font-size: 2rem;
      font-weight: bold;
      padding-bottom: 0.5rem;
      margin: 0;
      color: var(--white);
      border-bottom: var(--white) 3px solid;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    li {
      display: flex;
      justify-content: start;
      padding: 1rem 0;

      border-bottom: 2px solid var(--white);
      color: var(--white);

      .details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: var(--white);

        .title-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: start;
        }
        p {
          font-size: 1.5rem;
          line-height: 1.5rem;
          font-weight: normal;
          margin: 0;
        }
        h2 {
          display: block;
          font-weight: bold;
          font-size: 1.5rem;
          margin: 0;
        }
      }

      hr {
        display: none;
      }

      /* Currently used for frontpage news*/
      .news-details {
        display: flex;
        flex-direction: column;
        padding: 0 0 0 1rem;

        p {
          font-size: 1.25rem;
          line-height: 1.25rem;
          font-weight: normal;
        }
        h2 {
          display: block;
          font-weight: bold;
          font-size: 1.5rem;
        }
        a {
          margin-top: auto;
          border: 4px solid var(--white);
          padding: 0.5rem 1rem;
          color: var(--white);
          font-size: 1.5rem;
          font-weight: bold;
          width: fit-content;
        }
      }

      .img-wrapper {
        height: 14rem;
        max-height: 14rem;
        min-width: 18rem;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
    }
    ul li:last-child {
      border-bottom: none;
    }
  }
}

/* per page styling */
#main-page {
  .events-wrapper.text-list {
    h2 {
      color: var(--orange-main);
      border-bottom: var(--orange-main) 3px solid;
    }

    ul li a {
      color: var(--orange-main);
    }

    .more-link a {
      background-color: var(--orange-main);
    }
  }

  .results-wrapper {
    .list-content {
      background-color: var(--blue-dark);
      ul li {
        display: flex;
        flex-direction: column;
        border: none;
        padding: 1rem 0;

        .divider {
          display: block;
          width: 4rem;
          border: 1px var(--white) solid;
          margin: 2rem 0 0 0;
        }
      }
      ul li:last-child {
        .divider {
          display: none;
        }
      }
    }
    .more-link a {
      background-color: var(--blue-dark);
    }
  }
}
/* per page styling end*/

.more-link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  a {
    background-color: var(--blue-light);
    color: var(--white);
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: bold;
    padding: 1rem;
  }
}
/* Blocks end*/

/* Competitions page */

#comp-hero-banner {
  display: flex;
  background: #659dcf;
  background: linear-gradient(
    180deg,
    rgba(101, 157, 207, 1) 0%,
    rgba(0, 119, 177, 1) 100%
  );
  padding: 40px 20px 20px 20px;
  hr {
    width: 40px;
    margin: 0.7rem auto;
    height: 2px;
    background-color: #fff;
    opacity: 1;
  }
  .comp-hero-date {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
  .comp-hero-location {
    line-height: 12px;
  }
}
#comp-hero-content {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #fff;

  h1,
  .comp-hero-date,
  .comp-hero-registered-sum {
    font-weight: bold;
  }
}

#comp-single {
  font-size: 1.3rem;

  line-height: 1.7rem;
}
.comp-single-button {
  text-align: center;
  border: 0;
  border-radius: 0;
  a {
    padding: 0.4rem 2rem;
    color: var(--white);
    font-size: 1.3rem;
    line-height: 1.3rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
  }
}
.comp-single-button.comp-register-btn {
  background-color: var(--orange-main);
  height: 50px;
  display: block;
  margin: 20px auto 10px auto;
  a {
    padding: 0.6rem 2rem;
  }
}
.comp-single-button.comp-edit-button {
  margin-bottom: 6px;
  background-color: var(--bg-blue-light);
  a {
    color: #000;
  }
}
#comp-single-content {
  .comp-info-header-row {
    border-bottom: 2px solid var(--blue-light);
    display: flex;
    justify-content: space-between;
    h2 {
      font-weight: bold;
      color: var(--blue-light);
      padding-top: 6px;
    }
  }

  .field__label {
    font-weight: bold;
  }
  .comp-info-content-row {
    display: flex;
    padding-top: 6px;
  }
  .comp-info-col {
    width: 50%;
    .info-col-title {
      font-size: 1.4rem;
      font-weight: bold;
    }
    .active-comp-cats {
      margin-top: 10px;
    }
    .cat-heading {
      background-color: var(--blue-light);
      color: var(--white);
      padding: 12px 10px;
    }
    .weight-group {
      background-color: var(--bg-blue-light);
      padding-left: 10px;
      padding-right: 10px;
    }
    .weight-group:first-child {
      padding-top: 8px;
    }
    .weight-group:last-child {
      padding-bottom: 8px;
    }
    .field--name-field-registration-end-date {
    }
  }
  .comp-info-col-1 > .field {
    border-bottom: 1px solid #bebdc0;
    max-width: 70%;
    padding: 6px;
  }
  .comp-description {
    padding-top: 40px;
  }
  .comp-registered-title {
    padding-top: 40px;
    color: var(--blue-light);
    font-weight: bold;
    border-bottom: 2px solid var(--blue-light);
    padding-bottom: 14px;
  }
}

/* Competition create page */
#edit-field-competition-location-0-value {
}
/* Checkout */
.commerce-checkout-flow #edit-payment-process-offsite-payment-preferred-bank {
  .form-switch {
    flex: initial;
    padding-left: 20px;
  }
  .form-switch:first-child {
    padding-left: 0;
  }
  .image-radios__item input + label {
    padding: 5px;
  }
  .image-radios__item input:checked + label {
    outline: 2px solid var(--orange-main);
  }
  img {
    max-height: 40px;
  }
}

/* Purchase Licences */
#ejl-license-purchase-licenses-form {
  display: grid;
  grid-template-columns: 1fr auto;
  h1 {
    color: var(--blue-light);
    font-size: 2rem;
    font-weight: bold;

    grid-column: span 2;
  }
  .licence-info {
    grid-column: span 2;

    display: flex;
    justify-content: space-between;
    padding: 1rem;

    font-size: 1.25rem;
    line-height: unset;
    border-bottom: 1px solid var(--gray-border);

    h3 {
      font-size: 1.25rem;
      font-weight: bold;
      line-height: unset;
      margin: 0;
    }
    p {
      margin: 0;
    }
  }
  .license-container {
    grid-column: span 2;
  }
  table {
    font-size: 1.25rem;
    thead {
      display: none;
    }
    tbody {
      tr {
        td {
          padding: 1rem 0;
          --bs-table-bg-type: none;
          border-color: var(--gray-border);
          border-bottom-width: 1px;
          .js-form-type-checkbox {
            margin: 0 !important;
          }
        }
        td:first-child {
          padding: 1rem;
          font-weight: bold;
          width: 25rem;
        }

        td:last-child {
          padding: 1rem;
          width: 1rem;
          text-align: center;
          span {
            margin-left: 0.5rem;
            color: var(--green-main);
          }
        }
      }
    }
  }

  #edit-submit {
    color: var(--orange-main);
    font-weight: bold;
    font-size: 1.25rem;
    border: 2px solid var(--orange-main);
    padding: 1rem 2rem;
    background-color: var(--white);
  }

  #edit-total-container {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right: 1.5rem;
    .total-price {
      font-size: 1.25rem;
      font-weight: bold;
    }
  }
}
/* Purchase Licences end */

/* cart */
.cart-form {
  .view-header {
    color: var(--blue-light);
    font-size: 2rem;
    font-weight: bold;
  }
  form {
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: 1.25rem;

    .table-responsive {
      grid-column: span 2;
      table {
        --bs-table-border-color: none;
        --bs-table-bg-type: none;
        border: none;
        margin: 2rem 0 2rem 0;
        th {
          padding: 0;
        }
        tr {
          td {
            --bs-table-bg-type: none;

            padding: 2rem 0;
          }
        }
      }
    }

    .views-field-purchased-entity div {
      display: flex;
      gap: 1rem;
      div {
        display: flex;
        gap: 0.25rem;
      }
      .field--name-title {
        font-weight: bold;
      }
      .field--name-field-license-year {
        color: var(--blue-light);
      }
      .field--type-commerce-price {
        display: none;
      }
    }
    .views-field-unit-price__number {
      font-weight: bold;
    }
    .order-total-line__subtotal {
      display: none;
    }

    .field--type-commerce-price {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: end;
      .order-total-line {
        padding: 0 1rem 0 0;
      }
    }

    #edit-actions {
      display: flex;
      justify-content: end;
      margin-bottom: 0 !important;
    }

    #edit-submit {
      display: none;
    }
    #edit-checkout {
      color: var(--orange-main);
      font-weight: bold;
      font-size: 1.25rem;
      border: 2px solid var(--orange-main);
      padding: 1rem 2rem;
      background-color: var(--white);
    }
  }
}
.cart-empty-page {
  font-size: 1.5rem;
}

#edit-payment-information {
  legend {
    color: var(--orange-main);
    font-weight: bold;
    border-bottom: 1px solid var(--gray-border);
  }

  select {
    border: 1px solid var(--gray-border);
    border-radius: 0;
  }
  input:not(.form-check-input) {
    border: 1px solid var(--gray-border);
    border-radius: 0;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }

  .field {
    display: flex;
    justify-content: space-between;
    .given-name {
      font-weight: bold;
    }
    .family-name {
      font-weight: bold;
    }
    .field__label {
      font-weight: bold;
    }
  }

  #edit-payment-information-billing-information-edit-button {
    margin-top: 1rem;
  }
  #edit-payment-information-billing-information-edit-button:hover {
    background-color: var(--white-hover);
  }
}

.layout-checkout-form {
  h3 {
    font-weight: bold;
    font-size: 1.5rem;
  }
  #edit-actions-next {
    color: var(--orange-main);
    font-weight: bold;
    font-size: 1.25rem;
    border: 2px solid var(--orange-main);
    padding: 1rem 2rem;
    background-color: var(--white);
  }
}

.view-commerce-checkout-order-summary {
  background-color: var(--bg-blue-light);
  padding: 1rem;
  table td {
    background-color: var(--bg-blue-light);
    --bs-table-striped-bg: var(--bg-blue-light);
    --bs-table-bg: var(--bg-blue-light);
    --bs-table-hover-bg: var(--bg-blue-light);

    border-color: var(--gray-border);
    border-bottom-width: 1px;

    .field--type-commerce-price {
      display: none;
    }
    .field--name-field-license-year {
      display: flex;
      gap: 0.5rem;
    }
  }
  table td.views-field-total-price__number {
    text-align: end;
  }
}

#edit-payment-process-offsite-payment-payment-method--wrapper {
  display: none;
}
#edit-payment-process-offsite-payment-preferred-bank--wrapper {
  legend {
    font-weight: bold;
  }
}
#edit-payment-process-offsite-payment-actions-submit {
  color: var(--orange-main);
  font-weight: bold;
  font-size: 1.25rem;
  border: 2px solid var(--orange-main);
  padding: 1rem 2rem;
  background-color: var(--white);
}

#content:has(.checkout-complete) {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-blue-light);
  color: var(--blue-light);
  p {
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
  }
  a {
    color: var(--orange-main);
    font-size: 1.5rem;
  }
}

/* cart end */
/* User profile page */
.aw-user-profile-info-row {
  /*display: flex;
  justify-content: space-between;*/
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  .views-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: center;
    .views-label {
      font-size: 1.1rem;
    }
    .field-content {
      font-weight: bold;
      background-color: var(--bg-blue-light);
    }
    .views-label,
    .field-content {
      border: 1px solid #bbb;
      padding: 6px;
      min-height: 38px;
    }
  }

  .views-field.views-field-user-picture {
    grid-row-start: 1;
    grid-row-end: 3;
    margin-right: 30px;
    .views-label,
    .field-content {
      border: 0;
      padding: 0;
      background-color: transparent;
    }
  }
  .views-field.views-field-operations {
    grid-column-start: 1;
    grid-row-start: 3;
    margin-top: 30px;
    max-width: 150px;
    margin-left: auto;
    margin-right: auto;
    .field-content {
      padding: 0;
      border: 0;
    }
    .dropbutton-widget {
      border: 2px;
      border-radius: 0;
      margin: 0;
      a {
        padding: 6px;
        font-weight: bold;
        background-color: var(--bg-blue-light);
        color: #000;
        font-size: 1.2rem;
      }
    }
  }
  .views-field.join-club {
    grid-column-start: 2;
    grid-row-start: 3;
    margin-top: 30px;
    .field-content {
      background-color: transparent;
      border: 2px solid var(--orange-main);
      margin-left: auto;
      margin-right: auto;
      padding: 0;
      transition-duration: 0.2s;
      a {
        padding: 6px 20px;
        color: var(--orange-main);
        font-size: 1.2rem;
        display: block;
      }
    }
    .field-content:hover {
      background-color: var(--orange-main);
      a {
        color: #fff;
      }
    }
  }
  .views-field.views-field-user-picture,
  .views-field.views-field-field-first-name,
  .views-field.views-field-field-last-name {
    border: 0;
  }
}
.aw-profile-view-family-members {
  margin-top: 30px;
  .family-members-section {
    h2 {
      color: var(--blue-light);
      font-weight: bold;
    }
  }
  .add-child-button {
    border: 2px solid var(--blue-light);
    width: 140px;
    text-align: center;
    a {
      padding: 6px 12px;
      display: block;
      font-weight: bold;
    }
  }
  .view-empty {
    margin-top: 20px;
  }
  .aw-family-members-table {
    text-align: center;
    margin-top: 20px;
    tbody .views-field-operations {
      padding: 0;
      .dropbutton-widget {
        border: 2px;
        border-radius: 0;
        margin: 0;
        a {
          padding: 6px;
          font-weight: bold;
          background-color: var(--bg-blue-light);
          color: #000;
          font-size: 1.2rem;
        }
      }
    }
  }
}
/* User profile page end */
/* Child register page */
#register-child-user-add-child-form {
  #edit-actions {
    margin-top: 30px;
  }
}
#user-form #edit-delete {
  float: right;
}

/* all clubs view */
.all-clubs-view {
  display: grid;
  grid-template-columns: auto auto;
  .view-header {
    color: var(--blue-light);
    font-size: 2rem;
    font-weight: bold;
    p {
      font-size: 2rem;
    }
  }
  .view-filters {
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .views-exposed-form {
    height: 100%;
    div {
      justify-content: end;
      align-items: center;
      gap: 1rem;
      height: 100%;

      select {
        height: 100%;
        border-radius: 0;
        border: 1px solid var(--gray-border);
      }
      input {
        height: 100%;
        border-radius: 0;
        border: 1px solid var(--gray-border);
      }
      .js-form-item {
        margin: 0 !important;
      }
      .form-actions {
        margin: 0 !important;
        button {
          height: 100%;
          font-size: 1.5rem;
        }
      }
      .form-item-field-club-country-target-id {
        display: flex;
        align-items: center;
        gap: 1rem;

        text-wrap: nowrap;
        font-size: 1.5rem;
      }
    }
  }
  .view-content {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    row-gap: 2rem;
    margin-top: 2rem;

    .club-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;

      border-left: 1px solid var(--gray-border);
      border-right: 1px solid var(--gray-border);

      .club-link {
        color: #000;
        .views-field-label {
          color: var(--blue-light);
          font-size: 1.25rem;
          font-weight: bold;
        }
        .views-field-field-club-logo {
          height: 10rem;
          width: 100%;
          margin-bottom: 1rem;
          .field-content {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              max-width: 100%;
              max-height: 100%;
              object-fit: contain;
            }
          }
        }
      }
      .views-field-field-club-homepage a {
        color: #000;
      }
      .views-field-view-group-1 {
        display: none;
      }
    }
    .club-item:hover {
      background-color: var(--white-hover);
    }
  }
  .view-content > :nth-child(4n + 1) {
    border-left: none;
  }
  .view-content > :nth-child(4n) {
    border-right: none;
  }
  nav[aria-label="pagination-heading"] {
    margin: 4rem 0 2rem;
    grid-column: span 2;
    ul {
      display: flex;
      justify-content: end;
      gap: 0.5rem;
      li .page-link {
        border-radius: 0;
        min-width: 3rem;
        text-align: center;
        font-size: 1.5rem;
        border: 1px solid var(--gray-border);
      }
    }
  }
}

/* all clubs view end */

/* club details */
#content:has(.club-container) {
  padding: 0;
}
.club-container {
  padding: 2rem 0;

  h2 {
    font-size: 1.75rem;
    font-weight: bold;
  }
  p {
    font-size: 1.25rem;
  }

  div.section-container {
    padding: 0 2rem;
  }
  .club-single-header {
    display: flex;
    justify-content: space-between;
    .club-single-heading {
      display: flex;
    }
    h1 {
      color: var(--blue-light);
      font-weight: bold;
      font-size: 2.5rem;
      display: flex;
    }
    .edit-button {
      margin-left: 1rem;
      display: flex;
      align-items: center;
      height: 40px;
      background-color: var(--bg-blue-light);
      border: 0;
    }
    a {
      padding: 0.4rem 2rem;
      color: #000;
      font-size: 1.1rem;
      line-height: 1.1rem;
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 1px;
      img {
        height: 2.5rem;
        width: auto;
      }
    }
    .join-club-button {
      background-color: var(--orange-main);
      height: 50px;
      display: block;
      border: 2px solid var(--orange-main);
      a {
        color: var(--white);
        font-size: 1.3rem;
        line-height: 1.3rem;
        text-transform: uppercase;
        font-weight: bold;
        padding: 0.4rem 2rem;
      }
    }
    .manage-membership-button {
      background-color: var(--bg-blue-light);
      height: 40px;
      display: block;
      border: 2px solid var(--bg-blue-light);
      a {
        color: var(--blue-light);
        font-size: 1.1rem;
        line-height: 1.1rem;
        text-transform: uppercase;
        font-weight: bold;
        padding: 0.2rem 0.5rem;
      }
    }
  }
  .club-details {
    display: flex;
    margin: 2rem 0 5rem;
    .field--name-field-club-logo {
      margin: 0 4rem 0 0;

      img {
        height: auto;
        width: 12rem;
        margin: 0;
      }
    }
    .container {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    .contact {
      font-size: 1.25rem;
      h2 {
        font-size: 2rem;
        color: var(--blue-light);
        font-weight: bold;
      }
    }
  }

  .related-people {
    h2 {
      margin: 0;
    }
    .member-container {
      display: grid;
      grid-template-columns: repeat(3, max-content);
      column-gap: 4rem;
      margin-top: 3rem;
      font-size: 1.5rem;

      span {
        margin: 1rem 0;
      }
      .name {
        font-weight: bold;
        margin-left: 2rem;
      }
      .email {
        font-weight: normal;
      }
      .role {
        color: var(--blue-light);
      }

      .email.owner {
        font-weight: bold;
      }
      .role.owner {
        font-weight: bold;
      }

      .border {
        grid-column: 1 / 5;
        border-bottom: 1px solid var(--gray-border) !important;
      }
    }
  }
  .club-competitions {
    margin-top: 2rem;

    table tbody {
      tr {
        background-color: var(--white);
        border-color: var(--gray-border);
        td {
          font-size: 1.25rem;
          font-weight: bold;
          padding: 2rem 0;
          background-color: var(--white);
        }
        td:first-child {
          padding-left: 2rem;
        }
        td:last-child {
          padding-right: 2rem;
        }
        td.views-field-field-competition-start-date {
          color: var(--blue-light);
        }
        td.views-field-title a {
          color: #000;
        }
        td.views-field-field-competition-location {
          font-weight: normal;
          color: var(--blue-light);
        }
        td.views-field-registration-count {
          color: var(--orange-main);
        }
      }
      tr:nth-of-type(2n + 1) td {
        --bs-table-bg-type: var(--white);
      }
    }
    tr:hover {
      background-color: var(--white);
    }
  }
}

/* club details end*/
/* Club members page */
.view-club-members table td.views-field-approve-membership-request a {
  padding: 4px 10px;
  border: 2px solid var(--orange-main);
  background-color: #fff;
}

.membership-status--pending .status-label {
  background-color: var(--green-main);
  color: white;
  border-radius: 0;
  border: 2px solid var(--green-main);
}
.membership-status .form-actions .button {
  padding: 6px 20px;
  color: var(--orange-main);
  font-size: 1.2rem;
  display: block;
  font-weight: bold;
  line-height: 1.5rem;
  background-color: transparent;
  border: 2px solid var(--orange-main);
  margin-left: auto;
  margin-right: auto;
  transition-duration: 0.2s;
}
.group-membership-cancel-request-form button {
  background-color: var(--red-main) !important;
  color: #fff !important;
  font-weight: normal !important;
  font-size: 1rem !important;
  border: 2px solid var(--red-main) !important;
}
#edit-roles--wrapper {
  font-size: 1.2rem;
  #edit-roles--wrapper--description {
    color: #000 !important;
  }
}
/* Club members page end */
/* DAN exam registration webform */
#webform-submission-dan-exam-2025-application-add-form {
  font-size: 1.1rem;
}
#edit-belt-payment-info .webform-flex,
#edit-belt-changes-tables .webform-flex,
#edit-refree-table .webform-flex {
  max-width: 270px;
}
/* 
Responsive rules 
Using Bootstrap base brakepoints 
*/

/* XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
  .site-footer {
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 1rem;

    .logo-container {
      margin-left: 0;
    }
  }
  #main-page #content {
    display: flex;
    flex-direction: column;

    .hero {
      height: fit-content;

      .text-container {
        align-items: start;
        padding: 2rem;
        h2 {
          font-size: 2rem;
        }
        p {
          font-size: 1.5rem;
        }
        a {
          font-size: 1.5rem;
        }
      }
    }
    .text-list {
      margin: 3rem 0 2rem;
      h2 {
        display: flex;
        justify-content: center;
        font-size: 1.5rem;
        padding: 0 1rem 1rem;
      }
      .list-content {
        ul li a {
          padding: 1rem 0;
          margin: 0 1rem;

          flex-direction: column;
          align-items: start;
          justify-content: center;
          gap: 0.5rem;

          .container {
            padding: 0;
            margin: 0;
          }
        }
      }
    }
    .colored-list {
      margin: 0;
      padding: 2rem 0;
      .list-content {
        padding: 1rem;
        .title {
          border: none;
          display: flex;
          justify-content: center;
          font-size: 1.5rem;
        }
      }
      .item-list ul li {
        .divider {
          display: none;
        }
        a {
          flex-direction: column-reverse;
          justify-content: center;
          align-items: start;
          gap: 0.5rem;
          padding: 0 0 1rem;

          border-bottom: 1px solid var(--white);

          p {
            font-weight: bold;
          }
          .title-container {
            p {
              font-weight: normal;
            }
          }
        }
      }
    }
    .news-wrapper.colored-list {
      background-color: var(--blue-light);

      .list-content {
        padding: 1rem;
        li {
          flex-direction: column;
          gap: 1rem;
          .news-details {
            padding: 0;
            align-items: center;
            text-align: center;

            a {
              border: 2px solid var(--white);
            }
          }

          .img-wrapper {
            height: auto;
            width: auto;
            max-height: none;
            aspect-ratio: 16/9;
          }
        }
      }
      .more-link a {
        border: 2px solid var(--white);
      }
    }
    .results-wrapper.colored-list {
      background-color: var(--blue-dark);
      .more-link a {
        border: 2px solid var(--white);
      }
    }
  }

  .all-clubs-view {
    display: flex;
    flex-direction: column;

    .view-filters {
      justify-content: start;
      align-items: start;
      .views-exposed-form {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        width: 100%;
        div.flex-wrap {
          flex-direction: column;
          justify-content: start;
          align-items: center;
          width: 100%;
          .js-form-item {
            width: 100%;
          }
          .form-item-field-club-country-target-id {
            flex-direction: column;
            align-items: start;
          }
        }
      }
    }
    .view-content {
      grid-template-columns: repeat(1, 100%);
      row-gap: 0;
      .club-item {
        border: none;
        border-bottom: 1px solid var(--gray-border);
        text-align: left;
        .club-link {
          display: grid;
          grid-template-columns: repeat(2, 50%);
          .views-field-field-club-logo {
            margin: 0;
            grid-row: span 4;
            height: 5rem;
          }
        }
      }
    }
    nav[aria-label="pagination-heading"] ul {
      justify-content: center;
    }
  }
  .club-container {
    .club-single-header {
      flex-direction: column;
      justify-content: start;
    }
    .club-details {
      flex-direction: column;
      .container {
        flex-direction: column-reverse;
        gap: 3rem;
        margin-top: 2rem;
      }
    }
    .related-people .member-container {
      grid-template-columns: auto;
      font-size: 1.25rem;
      .border {
        grid-column: 1 / -1;
        margin: 0.25rem 0;
      }
      .name {
        margin: 0;
        font-weight: bold;
      }
      .email {
        font-weight: normal;
        margin: 0;
      }
      .role {
        margin: 0;
        color: var(--blue-light);
      }
    }
    div.club-competitions {
      padding: 0;
      h2 {
        text-align: center;
        border-bottom: 4px solid #000;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
      }
      .views-element-container {
        margin: 0 2rem;
      }
      table {
        tbody {
          tr {
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid var(--gray-border);
            padding: 1rem 0;
            td {
              padding: 0;
              border: none;
              line-height: 1.5rem;
            }
            td:first-child {
              padding-left: 0;
            }
            td:last-child {
              padding-right: 0;
            }
            td:nth-child(2) {
            }
          }
        }
      }
    }
  }

  .user-register-form {
    display: flex;
    flex-direction: column;
    padding: 0 1rem 3rem;
    font-size: 1.25rem;

    select {
      width: 100%;
      max-width: none;
      font-size: 1.25rem;
    }
    input {
      font-size: 1.25rem;
    }
    .form-actions {
      width: 100%;
      button {
        width: 100%;
        padding: 1rem;
        font-size: 1.5rem;
        line-height: 1.5rem;
      }
    }
  }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
  #navbar-main {
    position: fixed;
    width: 100vw;
    z-index: 10;
    justify-content: space-between;
    .navbar-brand {
      margin: 0;
    }
    .nav-content {
      width: 5rem;
      margin: 0;
      display: flex;
      justify-content: center;
      .account-btn {
        .username {
          display: none;
        }
        .arrow-icon {
          display: none;
        }
      }
    }

    .account-menu {
      .login-btn {
        display: none;
      }
      .login-dropdown-btn.mobile {
        display: block;
        border: none;
        background: none;
      }
      .dropdown-menu {
        position: fixed; /* or absolute, depending on your layout */
        top: 5rem;
        left: 0;
        width: 100vw;
        height: calc(100vh - 5rem);
        margin: 0;
        .dropdown-wrapper {
          .login-btn {
            display: flex;
          }
          a {
            text-align: center;
          }
          .mobile-details {
            display: grid;
            grid-template-columns: auto auto auto;
            align-items: center;
            justify-content: center;
            .avatar {
              margin-right: 1rem;
            }
            .username {
              font-size: 2rem;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  /* Sidebar toggle is inverted for mobile  */
  #sidebar_first {
    position: fixed;
    /* will be bugged if admin is logged in */
    top: 5rem;
    width: 0;
    height: 100%;
    z-index: 10;

    background-color: var(--blue-light);
    background-image: none;
    #block-bootstrap-sass-languageswitcher {
      span {
        margin: 0 1rem;
      }
    }
    .section {
      height: 100%;
    }
    nav {
      display: flex;
      flex-direction: column;
      justify-content: start;
      margin: 0;
    }

    .navbar-nav {
      padding: 0.5rem 0;
    }

    .nav-link {
      margin: 0;
      padding: 0.5rem 0 0.5rem 2rem;
      width: 100%;
      display: flex;
      justify-content: start !important;
      .menu-icon img {
        display: none !important;
        height: 3rem;
        max-width: 5.5rem;
      }
      .menu-title {
        display: block !important;
      }
      .menu-icon hr {
        display: none !important;
        opacity: 0;
      }
    }
    .nav-link:hover {
      .menu-icon hr {
        display: none !important;
        opacity: 1;
      }
    }

    .user-groups {
      .group-btn {
        padding: 1rem 1rem 1rem 2rem !important;
        justify-content: start !important;
        span {
          display: inline !important;
        }
        .arrow-icon {
          display: none !important;
        }
        .club-icon {
          display: none !important;
        }
      }
      .dropdown-menu {
        display: flex !important;
        flex-direction: column;
        text-wrap: nowrap;
        &.is-open {
          display: flex;
        }

        .link-container {
          padding: 0.5rem 2rem !important;
          a {
            justify-content: left !important;
            width: 5rem;
            span {
              display: block !important;
            }
            img {
              display: none !important;
            }
          }
        }
      }
    }
  }

  #sidebar_first.collapsed {
    width: 100%;
    height: 100%;
  }
  main#content {
    margin: 5rem 0 0;
  }
  .site-footer {
    padding: 5rem 2rem;

    .title {
      font-size: 2rem;
    }
    .contact-details {
      p {
        font-size: 1.5rem;
      }
    }
  }

  /* Login Page */
  .main-content .section:has(.user-login-form) {
    padding: 2rem;
    margin: 2rem 0;
    max-width: none;
  }
  .main-content .section:has(.user-register-form) {
    padding-top: 2rem;
    margin: 2rem 0;
  }

  /* Purchase Licences */
  .text-list .list-content {
    .views-exposed-form .d-flex {
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: start;
      #edit-actions {
        align-self: flex-start;
      }
      .js-form-item {
        margin: 0.5rem 0 !important;
        flex-direction: column;
        align-items: start;
        gap: 0.5rem;
      }
    }
  }
  /* Purchase Licences end*/
  #ejl-license-purchase-licenses-form {
    display: block;
    .licence-info {
      flex-direction: column;
      justify-content: start;
    }
    #edit-total-container {
      justify-content: start;
    }
    table {
      tbody {
        tr {
          td:nth-child(2) {
            font-size: 1rem;
          }
        }
      }
    }
  }
  /* cart */
  .cart-form {
    form {
      display: grid;
      grid-template-columns: 1fr auto;
      font-size: 1rem;

      .table-responsive {
        grid-column: span 2;
        table {
          th {
            display: none;
          }
          tr {
            display: grid;
            grid-template-columns: 33% 33% 33%;
            border-bottom: 1px solid #000;

            td {
              --bs-table-bg-type: none;
              border: none;
              padding: 0.25rem 0;
            }
            .views-field-purchased-entity {
              grid-column: span 3;
            }
            td.views-field-unit-price__number {
              display: flex;
              justify-content: end;
              align-items: center;
              padding: 0 0.5rem;
            }
            td.views-field-remove-button {
              display: flex;
              justify-content: end;
              align-items: center;
            }
            td.views-field-purchased-entity div {
              display: flex;
              justify-content: space-between;
              .field--type-commerce-price {
                display: none;
              }
            }
          }
        }
      }
    }
  }

  #edit-payment-information {
    .field {
      flex-direction: column;
    }
  }

  .commerce-checkout-flow #edit-payment-process-offsite-payment-preferred-bank {
    flex-direction: column;
    gap: 0.5rem;
    & .form-switch {
      padding: 0;
    }
  }

  /* cart end*/
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
  #navbar-main {
    height: 4rem;
    .sidebar-toggle-container {
      width: 4rem;
    }
    .navbar-brand {
      height: 4rem;
    }
    .nav-content {
      width: 4rem;
    }
    .account-menu {
      .dropdown-menu {
        top: 4rem;
      }
    }
  }
  main#content {
    margin: 4rem 0 0;
  }
  #sidebar_first {
    top: 4rem !important;
  }
  #main-page #content {
    .hero {
      background-size: 200%;
    }
  }

  /* login page */
  .user-login-form {
    font-size: 1.25rem;
    .form-actions button {
      font-size: 1.5rem;
      padding: 0.25rem;
    }
    .register-button {
      padding: 0.25rem;
      font-size: 1.5rem;
    }
  }
  /* login page end */

  /* regiter page */
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
  #content {
    padding: 20px 16px;
  }
  #navbar-main {
    height: 4rem;

    .navbar-brand {
      height: 3rem;
    }
    .nav-content {
      width: 3rem;
      margin: 0 1rem 0 0;
    }
  }
  #comp-hero-banner {
    padding: 20px 10px 10px 10px;
    h1,
    .comp-hero-date,
    .comp-hero-registered-sum {
      font-weight: bold;
    }
  }
  #comp-single-content {
    padding-left: 0;
    padding-right: 0;
    .comp-info-header-row {
      margin-top: 10px;
    }
    .comp-info-content-row {
      flex-wrap: wrap;
      .comp-info-col {
        width: 100%;
      }
      .comp-info-col-2 {
        margin-top: 20px;
      }
    }
  }
  .aw-user-profile-info-row {
    display: flex;
    flex-direction: column;
  }
  .text-list {
    margin: 2rem 1rem 2rem;
    .list-content {
      .views-exposed-form .d-flex .js-form-item {
        margin: 0.5rem 0 !important;
        flex-direction: column;
        align-items: start;
        gap: 0.5rem;
      }
      ul {
        li a {
          padding: 0.5rem;
          .date {
            margin-right: 1rem;
          }
        }
      }
    }
  }
}
@media (max-width: 380px) {
  #comp-hero-banner {
    h1,
    .comp-hero-date,
    .comp-hero-registered-sum {
      font-size: 1.4rem;
    }
  }
  .text-list {
    margin: 1rem 0rem 1rem;
    .list-content {
      ul {
        li a {
          padding: 0.5rem 0.5rem 0.5rem 0.5rem;
          .date {
            margin-right: 0rem;
          }
        }
      }
    }
  }
}