&.enrol-container {
  @extend  .d-flex ;
  @extend  .flex-column ;
  background-color: $gray-100;
  min-height: 100vh;
  height: 100%;
  margin: 0;
  .enrol-header {
    @extend  .filled ;
    background-color: $enrol-bg-color;
    .enrol-header-wrapper {
      @extend  .container ;
      .enrol-header-inner {
        @extend  .d-flex ;
        @extend  .justify-content-between ;
        @extend  .align-items-stretch ;
        align-items: center;
        .enrol-header-left {
          @extend  .d-flex ;
          @extend  .align-items-center ;
          @extend  .mr-3 ;
          .enrol-action-back {
            @extend  .d-lg-none ;
            float: left;
            .btn {
              height: 50px;
              width: 60px;
              border-radius: 0;
            }
          }
          .enrol-logo-1 {
            float: left;
          }
          .enrol-logo-2 {
            float: right;
          }
          .enrol-text {
            color: $white;
            white-space: nowrap;
            margin-left: 5px;
          }
          @include media-breakpoint-down(lg) {
            .enrol-logo-2 {
              display: none;
            }
          }
        }
        .enrol-header-right {
          .enrol-action-home {
            .btn {
              @extend .my-0;
              background-color: rgba(19, 19, 19, 0.5);
              height: 60px;
              width: 60px;
              border-radius: 0;
              color: $white;
            }
          }
        }
      }
      .fa-icon {
        height: 24px;
        width: 24px;
        vertical-align: middle;
      }
    }
  }
  .enrol-content {
    @extend  .d-flex ;
    @extend  .flex-column ;
    flex: 1 0 auto;
    overflow: auto;
    min-width: 0;
    .enrol-content-wrapper {
      &.basic {
        @extend  .container ;
      }
      &.fullscreen {
        @extend  .container-fluid ;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .enrol-progress {
        @extend  .mb-4 ;
        min-height: 71px;
      }
      .enrol-info {
        @extend  .p-2 ;
        @extend  .text-center ;
        width: 150px;
        background-color: $yellow;
        color: $black;
        transition: visibility 0s linear 0.33s, opacity 0.33s linear;
        position: fixed;
        top: 0;
        left: 50%;
        z-index: 100000;
      }
      .content {
        @extend  .d-flex ;
        .enrol-banner {
          @extend  .d-none ;
          @extend  .d-lg-block ;
          background-size: cover;
          height: 100vh;
          flex: 0.8;
          .enrol-banner-brand {
            @extend  .d-flex ;
            @extend  .flex-column ;
            position: relative;
            left: 50%;
            top: 45%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            .logo {
              @extend  .d-flex ;
              @extend  .justify-content-center ;
              @extend  .mb-4 ;
              img {
                width: 120px;
                height: 140px;
              }
            }
            .text {
              @extend  .d-flex ;
              @extend  .justify-content-center ;
              h1 {
                color: $white;
              }
            }
          }
          .enrol-footer-wrapper {
            @extend  .d-flex ;
            @extend  .flex-column ;
            position: absolute;
            bottom: 20px;
            left: 20px;
            .enrol-copyright, enrol-bottom-menu {
              font-size: $font-size-sm;
              color: $white;
            }
            .navbar {
              padding-left: 0;
              padding-right: 0;
              padding-bottom: 5px;
              .nav-item .nav-link {
                padding: 0 5px 0 5px !important;
                border-left: solid 1px $bottom-menu-color;
                color: $white;
                &:hover {
                  color: $pink;
                }
              }
              .nav-item {
                &:first-child {
                  .nav-link {
                    padding: 0 5px 0 0 !important;
                    border-left: none;
                  }
                }
              }
            }
          }
        }
        .enrol-personal-data-wrapper {
          @extend  .d-flex ;
          @extend  .justify-content-center ;
          @extend  .align-items-center ;
          flex: 1;
          .enrol-personal-data-step {
            flex-basis: 500px;
            padding: 10px;
            & > div {
              @extend .mb-3
            }
            .enrol-proceed-btn {
              @extend  .align-self-end ;
            }

            .preferred-language-dropdown {
              .selected-tag {
                .text-badge {
                  min-width: 2rem;
                }
              }
            }
          }
          .enrol-resume-model {
            .enrol-resume-status-icon {
              .fa-icon {
                height: 38px;
                width: 38px;
                vertical-align: middle;
              }
            }
          }
          .enrol-personal-data {
            .tab-pane {
              outline: 0
            }
          }
        }
        .enrol-product-selection-wrapper {
          @extend  .mb-4 ;
          .eshop-products {
            margin-left: 0 !important;
            margin-right: 0 !important;
          }
          .custom-select {
            background-size: $font-size-base * 1;
            padding-right: $font-size-base * 1.6 !important;
          }
          .custom-control-label {
            @extend  .rounded-1 ;
            $icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.02 21.31'%3E%3Cpath fill='#{$gray-600}' d='M8.53,17a8.59,8.59,0,0,1-1.84-.2A8.51,8.51,0,0,1,3.92,1.35a8.51,8.51,0,0,1,12.9,9A8.52,8.52,0,0,1,8.53,17ZM8.5,2.2a6.31,6.31,0,0,0-5.3,9.71h0A6.31,6.31,0,1,0,9.86,2.35,6.37,6.37,0,0,0,8.5,2.2Z M15.54,21.31a1.1,1.1,0,0,1-.93-.51l-2.94-4.6A1.1,1.1,0,1,1,13.52,15l2.94,4.6a1.1,1.1,0,0,1-.93,1.69Z'/%3E%3C/svg%3E");
            background-image: $icon !important;
            background-size: $font-size-base * 1;
            padding-right: $font-size-base * 1.6 !important;
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
          }
          .product-container {
            .selected-item-list {
              max-height: 300px;

              @include media-breakpoint-down(lg) {
                max-height: 100%
              }
            }
          }

        }
        .enrol-personal-data-wrapper {
          @extend  .d-flex ;
          flex: 1;
          .enrol-personal-data {
            @extend  .p-4 ;
            @include media-breakpoint-down(sm) {
              padding: 0 !important;
            }
            .enrol-section-label {
              text-align: left;
            }
            .enrol-section-content {
              @extend  .d-flex ;
            }
          }
          .enrol-card-content {
            .enrol-card-title {
              background-color: #f7f7f7;
            }
          }
        }
        .enrol-size-selection-wrapper {
          @extend  .d-flex ;
          flex: 1;
        }
        .enrol-review-order-wrapper {
          @extend  .d-flex ;
          flex: 1;
        }
        .enrol-payment-wrapper {
          @extend  .d-flex ;
          flex: 1;
        }
        .enrol-fifth-step-wrapper {
          @extend  .d-flex ;
          flex: 1;
          .enrol-fifth-step {
            @extend  .p-4 ;
            @include media-breakpoint-down(sm) {
              padding: 0 !important;
            }
          }
          .enrol-section-label {
            text-align: left !important;
          }
          .enrol-placement-model {
            .placement-status-icon {
              .fa-icon {
                height: 38px;
                width: 38px;
                vertical-align: middle;
              }
            }
          }
          .enrol-placement-info {
            h6 {
              color: $red !important;
            }
          }
          .sponsor-input {
            @include media-breakpoint-down(sm) {
              .input-group-text {
                display:none;
              }
            }

          }
        }
        .enrol-last-step-wrapper {
          @extend  .d-flex ;
          flex: 1;
          .enrol-last-step {
            @extend  .p-4 ;
            @include media-breakpoint-down(sm) {
              padding: 0 !important;
            }
          }
        }
      }
    }
    // ** global ** //
    .enrol-main-title {
      color: $gray-500;
      font-weight: $font-weight-bold-semi;
      font-size: $font-size-base * 1.2;
    }
    .enrol-section {
      @extend  .mt-4 ;
      @extend  .mb-4 ;
      .enrol-section-header {
        @extend  .d-flex ;
        @extend  .flex-nowrap ;
        .enrol-section-count {
          @extend  .mr-3 ;
          border-radius: 1.8em;
          color: $primary;
          display: inline-block;
          line-height: 1.9em;
          text-align: center;
          width: 2em;
          border-color: $primary;
          border-style: solid;
          border-width: 1px;
          font-size: $font-size-base * .7;
        }
        .enrol-section-title {
          color: $gray-800;
          font-weight: $font-weight-bold-extra;
          font-size: $font-size-base * 1;
        }
      }
      .enrol-section-content {
        @extend  .mt-4 ;
        .enrol-controls-holder {
          @extend  .mb-3 ;
          @extend  .mt-3 ;
          @extend  .d-flex ;
          @extend  .align-items-center ;
          .enrol-section-label {
            &.required {
              &:after {
                content: '*';
                color: $red;
              }
            }
            @include media-breakpoint-down(sm) {
              text-align: left !important;
            }
          }
          .enrol-section-controls {
            input[type="*"] {
              @extend  .rounded-1 ;
            }
            .custom-select {
              $caret: $custom-select-size-0-indicator;
              background-image: $caret !important;
              background-size: $font-size-base * .8;
              padding-right: $font-size-base * 1.6 !important;
            }
            .choose-box {
              text-transform: lowercase;
              .custom-control-label {
                &::first-letter {
                  text-transform: uppercase;
                }
              }
              .enrol-section-controls {
                .custom-control-label {
                  &::before, &::after {
                    top: calc(50% - 0.5rem);
                  }
                }
              }
            }
            .guide-text {
              text-transform: lowercase;
              &::first-letter {
                text-transform: uppercase;
              }
            }
          }
        }
      }
    }
    .verified-text {
      font-weight: $font-weight-bold-extra;
      color: $info-green !important;
      margin: 10px;
      @include media-breakpoint-up(lg) {
        position: absolute;
        right: -70px;
        margin: 0;
      }
    }
    .form-control {
      &.invalid {
        &.validated {
          border-color: $danger !important;
        }
      }
    }
    .enrol-section-controls-errors {
      :before {
        content: '**'
      }
      :after {
        content: '';
      }
    }
    .enrol-section-controls-errors {
      span {
        display: block;
      }
      .invalid {
        &.validated {
          color: $danger !important;
          word-wrap: break-word;
        }
      }
    }
  }
  .enrol-footer {
    @extend  .filled ;
    flex-shrink: 0;
    .enrol-footer-wrapper {
      @extend  .container ;
      .enrol-header-inner {
        @extend  .d-flex ;
        @extend  .flex-column ;
        @extend  .mt-2 ;
        @extend  .mb-2 ;
        .enrol-copyright, enrol-bottom-menu {
          font-size: $font-size-sm;
          color: $enrol-copyright-text-color;
        }
        .enrol-footer-menu {
          .navbar {
            @extend  .mb-1 ;
            padding: 0 !important;
            .nav-link {
              padding: 0 5px 0 5px !important;
              border-left: solid 1px $bottom-menu-color;
              color: $primary;
              &:hover {
                color: $pink;
              }
              @include media-breakpoint-down(sm) {
                border-left: none !important;
                text-align: left;
                padding-left: 0px !important;
              }
            }
            .nav-item {
              &:first-child {
                .nav-link {
                  padding: 0 5px 0 0 !important;
                  border-left: none;
                }
              }
            }
          }
        }
      }
    }
  }
}
