.bp-element-search-courses {
  &.layout-1 {
      .title {
          margin: 2px;
      }
      .search-button {
          font-size: 18px;
          &::before{
              content: "\f4a4";
              font-family: Ionicons;
          }
      }
      .search-form {
          position: fixed;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          visibility: hidden;
          transition: all 0.5s;
          z-index: 99;
          background: rgba(0, 0, 0, 0.8);
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          &.open {
              opacity: 1;
              visibility: visible;
              .form-search .search-field {
                  opacity: 1;
                  visibility: visible;
                  transform: scale3d(1, 1, 1);
                  transition-duration: 1s;
              }
          }
          &.loading .form-search:after {
              content: "\f29a";
              font-family: Ionicons;
              font-size: 40px;
              position: absolute;
              right: 0;
              top: 20px;
              color: #fff;
              display: inline-block;
              width: 60px;
              height: 60px;
              line-height: 60px;
              animation: spin 2s linear infinite;
              transition: all 0.5s;
          }
      }
      .close-form {
          position: absolute;
          right: 50px;
          top: 100px;
          color: #f0f0f0;
          cursor: pointer;
          transition: all 0.5s;
          &::before{
              content: "\f12a";
              font-size: 20px;
              font-family: Ionicons;
          }
          &:hover {
              color: red;
          }
      }
      .form-search {
          width: 80%;
          position: relative;
          &:after {
              display: none;
          }
          .search-field {
              width: 100%;
              height: 100px;
              padding: 20px 0;
              background: transparent;
              font-size: 60px;
              border: 0;
              visibility: hidden;
              opacity: 0;
              color: #fff;
              border-bottom: 4px solid #2575FC;
              transform: scale3d(0, 1, 1);
              transition: all 0.3s;
              transform-origin: 0 50% center;
          }
          .search-notice {
              display: inline-block;
              float: right;
              margin-top: 5px;
              color: #f0f0f0;
          }
      }
      .list-search {
          padding-left: 0;
          list-style: none;
          display: inline-block;
          width: 80%;
          margin: 0 auto;
          transition: all 0.5s;
          li {
              padding: 10px 0;
              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
              font-size: 20px;
              display: block;
              letter-spacing: 0.05em;
              a {
                  color: rgba(255, 255, 255, 0.6);
                  transition: all 0.3s;
                  &:hover {
                      color: #ffffff;
                  }
              }
          }
      }
  }
}