.modal-backdrop {
  width: 100%;
  height: 100%;
  background-color: rgba(38, 38, 38, .9);
  --bs-backdrop-opacity: .9;
}

#sliding-popup {

  .modal {
    font-family: "Inter", sans-serif;
    color: #262626;
    display: block;
    text-align: left;

    .modal-dialog {
      max-width: inherit;
      justify-content: center;

      .modal-content {
        min-width: 675px;
        border-radius: 6px;
        padding: 30px;
        border: 0;
        max-width: 675px;

        ul {
          list-style: none;
          margin: 0 0 30px 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 20px;

          li {
          }

        }

        .modal-header {
          border-bottom: 0;
          margin-bottom: 15px;
          padding: 0;
          display: flex;
          align-items: center;

          .btn-close {
            opacity: 1;
            box-shadow: none;
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4IDYuNUw2IDE4LjUiIHN0cm9rZT0iIzI2MjYyNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTYgNi41TDE4IDE4LjUiIHN0cm9rZT0iIzI2MjYyNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
            background-repeat: no-repeat;
            width: 24px;
            height: 24px;
            --bs-btn-close-bg: none;
          }

          .modal-title {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
            padding: 0;
            width: 100%;
          }

        }

        .modal-body {
          padding: 0;
          margin: 0;

          .modal-subtitle {
            font-size: 14px;
            font-weight: 600;

            span {
              font-size: 12px;
              font-weight: 400;
            }

          }

          p {
            font-size: 12px;
            line-height: 150%;
            margin: 0 0 30px 0;
            font-weight: 500;
          }

          a {
            color: #262626;
          }

          .form-check {
            padding-left: 30px;

            .form-check-label {
              font-size: 12px;
              opacity: 1;
            }

            .form-check-input[type=checkbox] {
              background: #ffffff;
              border: 1px solid #b3b3b3;
              border-radius: 2px;
              height: 18px;
              position: relative;
              width: 18px;
              margin-top: 0;
              margin-left: -30px;

              &:focus {
                border: 1px solid #b3b3b3;
                box-shadow: none;
                outline: none;
              }

              &:checked {
                background-color: #ffffff;
                background-position: center center;
                background-repeat: no-repeat;
                border: 1px solid #b3b3b3;
                --bs-form-check-bg-image: none;

                &:after {
                  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDExIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDQuMjgxMDFMNCA3LjI4MTAxTDEwIDEuMjgxMDEiIHN0cm9rZT0iI0QwMTgxQiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
                  bottom: 0;
                  content: "";
                  height: 9px;
                  left: 0;
                  margin: auto;
                  position: absolute;
                  right: 0;
                  top: 0;
                  width: 11px;
                }
              }

            }

          }

        }

        .modal-footer {
          padding: 0;
          border-top: 0;
          justify-content: center;
          align-items: stretch;
          gap: 30px;
          flex-wrap: nowrap;

          .eu-cookie-compliance-categories-buttons {
            width: 100%;
          }

          .btn {
            font-size: 15px;
            height: 44px;
            border: 1px solid #262626;
            width: 100%;
            border-radius: 8px;
            font-weight: 600;
            transition: none;
            margin: 0;

            &.manage {
              color: #262626;
              background: #ffffff;

              &:hover {
                border: 1px solid #646464;
                color: #646464;
              }

            }

            &.accept {
              background: #262626;
              color: #ffffff;

              &:hover {
                background: #646464;
                border: 1px solid #646464;
              }

            }

          }

        }

      }

    }

    .primaryLayer {

      &.hidden {
        display: none;
      }

    }

    .secondaryLayer {

      &.hidden {
        display: none;
      }

    }
  }

}

@media (max-width: 768px) {

  #sliding-popup {

    .modal-dialog-centered {
      align-items: flex-end;
      padding: 0;
      margin: 0;
    }

    .modal {
      .modal-dialog {
        .modal-content {
          margin-bottom: 0;
          min-width: inherit;
          width: 100%;
          padding: 20px 10px 10px 10px;
          border-radius: 0;
          max-width: inherit;

          ul {
            margin-bottom: 0;
          }

          .modal-header {

            .modal-title {
              font-size: 15px;
            }

          }

          .modal-body {
            overflow: scroll;
            max-height: 100%;
            margin-bottom: 20px;

            &::-webkit-scrollbar {
              background: #ffffff;
              border-radius: 2px;
              height: 100%;
              width: 4px;

            }

            &::-webkit-scrollbar-thumb {
              background: #cecfd2;
              background-clip: content-box;
              border-radius: 2px;
            }

            &::selection {
              background: #cecfd2;
              color: #ffffff;
            }

            p {
              margin-bottom: 10px;
            }

          }

          .modal-footer {
            gap: 10px;
            flex-direction: column;

            .btn {
              height: 36px;
              margin: 0;
              font-size: 14px;
            }

          }

          .secondaryLayer {

            .modal-body {
              margin-bottom: 10px;
            }

          }

        }
      }

    }

  }

}