.wrapper {
  .sidebar-mini.sidebar-collapse .main-header {
    margin-right: 70px;
  }

  &.arabic-lang {
    .main-content-wrapper {
      padding: 15px 35px 15px 15px;
    }
    .sidebar-mini.sidebar-collapse .main-header {
      margin-right: 70px;
    }
  }
  .main-content-wrapper {
    padding: 15px 15px 15px 34px;
    margin-right: auto;
    margin-left: auto;

    .box-wrapper {
      padding: 10px;
      border-radius: 7px;
      box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.07);
      background-color: white;
      animation: fadeIn 1s both;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Content Wrapper - contains the main content
 */
.content-wrapper,
.main-footer {
  -webkit-transition: -webkit-transform 0.3s ease-in-out,
    margin 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  margin-left: 230px;
  z-index: 820;
}

.layout-top-nav .content-wrapper,
.layout-top-nav .main-footer {
  margin-left: 0;
}

@media (max-width: 767px) {
  .content-wrapper,
  .main-footer {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .sidebar-collapse .content-wrapper,
  .sidebar-collapse .main-footer {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  // .sidebar-open .content-wrapper,
  // .sidebar-open .main-footer {
  //   transform: translate(230px, 0);
  // }
  // .sidebar-open .wrapper.arabic-lang .content-wrapper,
  // .sidebar-open .wrapper.arabic-lang .main-footer {
  //   transform: translate(-230px, 0);
  // }
  .sidebar-mini .wrapper.arabic-lang .content-wrapper {
    margin-right: 0 !important;
  }
  .wrapper.arabic-lang .main-header {
    padding: 15px 15px 0 15px;
  }
  .wrapper.arabic-lang .main-content-wrapper {
    padding: 15px 15px 15px 34px;
  }
  .sidebar-mini.sidebar-collapse .wrapper.arabic-lang .content-wrapper {
    margin-right: 0 !important;
  }
  .wrapper.arabic-lang .main-content-wrapper {
    padding: 15px 15px 15px 15px;
  }
  .sidebar-mini .wrapper.arabic-lang .main-footer {
    margin-right: 0;
  }
}

.content-wrapper {
  min-height: 100%;
  background-color: #f4f5f7;
  z-index: 800;
}

.main-footer {
  background: #fff;
  padding: 15px;
  color: #444;
  border-top: 1px solid #d2d6de;
}

/* Fixed layout */
.fixed .main-header,
.fixed .main-sidebar,
.fixed .left-side {
  position: fixed;
}

.fixed .main-header {
  top: 0;
  right: 0;
  left: 0;
}

.fixed .content-wrapper,
.fixed .right-side {
  padding-top: 50px;
}

@media (max-width: 767px) {
  .fixed .content-wrapper,
  .fixed .right-side {
    padding-top: 100px;
  }
}
@media (max-width: 600px) {
  .wrapper .main-content-wrapper {
    padding: 15px 15px 15px 15px;
  }
}
.fixed.layout-boxed .wrapper {
  max-width: 100%;
}

.fixed .wrapper {
  overflow: hidden;
}

.hold-transition .content-wrapper,
.hold-transition .right-side,
.hold-transition .main-footer,
.hold-transition .main-sidebar,
.hold-transition .left-side,
.hold-transition .menu-open .fa-angle-left {
  /* Fix for IE */
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.main-preloader {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 100%;
  height: 100%;
  z-index: 1030;
  .lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid $primary-color;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: $primary-color transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
