#spel_theme_builder_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  &.show-popup {
    opacity: 1;
    visibility: visible;
  }
}

.spel_theme_builder_wrapper {
  &.spel-modal {
    &.spel-fade {
      transition: opacity 0.15s linear;
    }

    .modal-dialog {
      width: 500px;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      transition: all 0.3s ease;

      &.modal-dialog-centered {
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem);
      }
    }

    form {
      width: 100%;

      .modal-content {
        position: relative;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 0.3rem;
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

        &.show-popup {
          opacity: 1;
          transform: scale(1);
        }
        .modal-title {
          margin: 0;
          line-height: 1.5;
        }

        .modal-close {
          background: transparent;
          border: none;
          font-size: 20px;
          cursor: pointer;

          &:hover {
            color: red;
          }
        }

        .modal-header,
        .modal-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px;
          border-bottom: 1px solid #e9ecef;
        }

        .modal-footer {
          border-top: 1px solid #e9ecef;
        }

        .modal-body {
          position: relative;
          flex: 1 1 auto;
          padding: 1rem;

          .input-group {
            margin-bottom: 1rem;
          }
        }

        .form-control {
          display: block;
          width: 100%;
          padding: 0.375rem 0.75rem;
          font-size: 1rem;
          line-height: 1.5;
          color: #495057;
          background-color: #fff;
          background-clip: padding-box;
          border: 1px solid #ced4da;
          border-radius: 0.25rem;
          transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .btn {
          &.btn-default {
            color: #333;
            background-color: #fff;
            border-color: #ccc;

            &:hover {
              color: #333;
              background-color: #e6e6e6;
              border-color: #adadad;
            }
          }

          &.btn-primary {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;

            &:hover {
              color: #fff;
              background-color: #0056b3;
              border-color: #004085;
            }
          }
        }

        .switch-group {
          display: flex;
          align-items: center;

          .admin-input-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 25px;

            input {
              opacity: 0;
              width: 0;
              height: 0;
            }

            .admin-control-label {
              position: absolute;
              cursor: pointer;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: #ccc;
              transition: 0.4s;
              border-radius: 25px;

              &:before {
                position: absolute;
                content: "";
                height: 21px;
                width: 21px;
                left: 2px;
                bottom: 2px;
                background-color: white;
                transition: 0.4s;
                border-radius: 50%;
              }
            }

            input:checked + .admin-control-label {
              background-color: #2196F3;

              &:before {
                transform: translateX(25px);
              }
            }
          }
        }

      }

    }


  }
}