@import "../../variables-layout";

@import "../../../_vendor/node_modules/bootstrap/scss/functions";
@import "../../../_vendor/node_modules/bootstrap/scss/variables";
@import "../../../_vendor/node_modules/bootstrap/scss/mixins";

@import "../../scss-variables";
@import "../../_theme/variables-layout";

html body {
  .ce_rsce_actionmodal {
    margin: 0px !important;


    .modal-header {
      border-bottom: 0px;
      padding-bottom: 0px;
    }

    .modal--image {
      position: relative;

      &.without-padding {
        margin: calc(-1 * var(--bs-modal-padding)) calc(-1 * var(--bs-modal-padding)) 0 calc(-1 * var(--bs-modal-padding));
      }

      .modal-image--wrapper {
        min-height: rfs-value(400px);
      }

      .image--content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        color: var(--bs-body-color-inverse);
        padding: 0px var(--bs-modal-padding);

        .row {
          height: 100%;

          .left--col {


            .modal-image--big-headline {
              white-space: nowrap;

              span {
                display: block;
                line-height: 1;

                font-weight: $font-weight-bold;
                @include font-size(50px);

                //white-space: nowrap;

                @include media-breakpoint-up(xl) {
                  @include font-size(65px);
                }

                @include media-breakpoint-down(sm) {
                  font-size: rfs-value(50px) !important;
                  text-align: center;
                }
              }
            }
          }

          .right--col {

            .modal-image--text-wrapper {
              padding: .75rem;
              background-color: rgba(0, 0, 0, .75);
              font-weight: $font-weight-bold;
              margin: 0 0 0 auto;

              span {
                display: block;
                font-size: rfs-value(30px);
                margin-bottom: .5rem;
                line-height: 1.2;
              }

              p {

              }

            }
          }
        }
      }
    }


    .modal--progress {
      .progressbar--images {
        img {
          max-height: rfs-value(35px);
        }
      }
    }


    .modal-footer {
      border-top: 0px;
      padding-top: 0px;

      .ce--buttons {
        flex: 1;
      }

      img {
        max-height: 50px;
      }
    }
  }
}