// Here you can add other styles
.copy-right {
  direction: ltr !important;

  .company {
    color: #000;
    font-weight: bold;

    &:hover {
      text-decoration: none;
      color: #000;
    }
  }
}

pre {
  background: #000 !important;
  color: green !important;
  direction: ltr !important;
  text-align: left !important;
  padding: 20px !important;
  font-size: 20px !important;
}

.c-app {
  .custom-subheader {
    align-items: center;
    width: 100%;
    position: fixed;
    top: $header-height;
    left: 0;
    z-index: 10;
    transition: width $layout-transition-speed;
    -webkit-transition: width $layout-transition-speed;
    -moz-transition: width $layout-transition-speed;
    -ms-transition: width $layout-transition-speed;
    -o-transition: width $layout-transition-speed;

    &.sideBarFull {
      width: calc(100% - #{$sidebar-width});
    }

    &.sideBarMinimized {
      width: calc(100% - #{$sidebar-minimized-width});
    }

    &.sideBarClose {
      width: 100%;
    }

    @media (max-width: 992px) {
      width: 100% !important;
    }
  }

  .form-group {
    &.err {
      .col-form-label {
        color: red !important;
      }

      .form-control {
        border-color: red !important;
      }

      .form-text {
        color: red !important;
      }
    }
  }

  .homePageTemplate {
    $elementsBG: rgba(#000, 0.7);

    .imgBox {
      position: relative;
      cursor: pointer;

      &:hover {
        .elementTemp {
          opacity: 1;
          z-index: 5;
        }
      }

      .relativePos {
        height: 100%;
      }

      img {
        width: 100%;
      }

      .elementTemp {
        width: 100%;
        height: 100%;
        background: $elementsBG;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0;
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;

        .txtBox {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          text-align: center;

          .list {
            display: flex;
            align-items: stretch;
          }

          h2 {
            margin-bottom: 15px;
          }

          h2, .description {
            color: #fff;
          }

          a {
            color: red;
          }
        }
      }
    }


    .s1 {
      margin-bottom: 50px;

    }

    .s2 {

    }

    .s4 {
      margin-bottom: 40px;
    }

    .s5 {
      margin-bottom: 30px;
    }

    aside {
      section {
        margin-bottom: 30px;
      }

      .imgBox {
        .elementTemp {
          .txtBox {
            width: 100%;

            h2 {
              font-size: 17px;
              margin-bottom: 5px;
            }

            .description {
              font-size: 13px !important;
            }

            .list {
              padding: 3px;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: center;

              .el-select {
                flex-basis: 100%;
                margin-bottom: 5px;
              }
            }
          }
        }
      }

      .s1-side {

      }
    }
  }
}


.btn-primary{
  background-color: #fff;

  &:hover{
    border-color: $border-panel;
  }
}