.focus-login {
   .focus-content {
      max-width: 100%;
      width: 830px;
      display: flex;
      padding: 0;
   }

   .focus-login-content {
      padding: 70px 30px 40px;
      width: calc(100% - 340px);
      position: relative;
   }

   .focus-login-side {
      position: relative;
      padding: 58px 40px 50px;
      background-color: $black;
      width: 340px;
      border-radius: 0 $border-radius-base $border-radius-base 0;
      overflow: hidden;

      .register-text {
         display: none;
      }

      > img {
         position: absolute;
         left: 0;
         top: 0;
         opacity: .5;

         @supports (object-fit: cover) {
            width: 100%;
            height: 100%;
            object-fit: cover;
         }
      }

      > div {
         position: relative;
         z-index: 1;
      }

      h4 {
         color: $white;
         font-weight: $font-weight-semibold;
         line-height: $line-height-sm;
         margin-bottom: 25px;
      }

      .h2 {
         color: $white;
         margin-bottom: 10px;
      }

      ul {
         @include list-triangle;

         margin-bottom: 2rem;

         li {
            color: $white;
            margin-bottom: 6px;
            padding-left: 26px;

            &::before {
               content: $icons-check;
               color: $green;
               font-size: 14px;
               top: 5px;
            }
         }
      }

      .btn-primary {
         &::after {
            @include fonticon;

            content: $icons-user;
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
         }
      }
   }

   .logo-wrapper {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      .logo {
         margin-bottom: 24px;
      }

      p {
         margin-bottom: 12px;
      }
   }

   .focus-close {
      position: absolute;
      right: 18px;
      top: 18px;
   }

   .btn {
      width: 100%;
   }

   .form-group {
      margin-bottom: 10px;
      position: relative;

      .password-reset {
         position: absolute;
         top: 50%;
         right: 12px;
         color: $black;
         transform: translateY(-50%);
      }
   }

   /* safari password autofill bugfix */
   .form-control {
      display: none;
      border-radius: $border-radius-base;
   }

   &.active .form-control {
      display: block;
   }

   .oauth-login {
      margin-top: 14px;

      > p {
         margin-bottom: 12px;
      }
   }

   .oauth-buttons {
      margin: 0;

      .btn {
         width: 100%;
         max-width: calc(50% - 5px);
         padding-right: 48px;
         margin: 0;
      }
   }

   @media screen and (max-width: 859px) {
      .focus-content {
         width: 490px;
         flex-wrap: wrap;
      }

      .focus-login-content {
         width: 100%;
         padding-bottom: 0;
      }

      .focus-login-side {
         width: 100%;
         background-color: $white;
         padding: 20px;
         border-radius: $border-radius-base;

         > img {
            display: none;
         }

         .focus-login-side-content {
            display: none;
         }

         .register-text {
            display: block;
            text-align: center;
            margin-bottom: 12px;
         }

         .h2 {
            font-size: $font-size-h4;
            color: $black;
            font-weight: $font-weight-semibold;
            text-align: center;
            margin-bottom: 4px;
         }

         .btn {
            @include button-variant($white, $black, $black);
         }
      }
   }

   @media screen and (max-width: $sm - 1) {
      .focus-login-content {
         padding: 50px 15px 0;
      }

      .oauth-buttons {
         margin: 0;

         .btn {
            max-width: 100%;
            padding-right: 48px;
            margin-bottom: 10px;
         }
      }
   }
}
