@font-face {
  font-family: 'dubaiB';
  src: url("~assets/admin/fonts/dubai-font-webfonts/bold/Dubai-Bold.eot"),
  url("~assets/admin/fonts/dubai-font-webfonts/bold/Dubai-Bold.ttf"),
  url("~assets/admin/fonts/dubai-font-webfonts/bold/Dubai-Bold.woff");
}

@font-face {
  font-family: 'dubaiL';
  src: url("~assets/admin/fonts/dubai-font-webfonts/light/Dubai-Light.eot"),
  url("~assets/admin/fonts/dubai-font-webfonts/light/Dubai-Light.ttf"),
  url("~assets/admin/fonts/dubai-font-webfonts/light/Dubai-Light.woff");
}

@font-face {
  font-family: 'dubaiM';
  src: url("~assets/admin/fonts/dubai-font-webfonts/medium/Dubai-Medium.eot"),
  url("~assets/admin/fonts/dubai-font-webfonts/medium/Dubai-Medium.ttf"),
  url("~assets/admin/fonts/dubai-font-webfonts/medium/Dubai-Medium.woff");
}

@font-face {
  font-family: 'dubaiR';
  src: url("~assets/admin/fonts/dubai-font-webfonts/regular/Dubai-Regular.eot"),
  url("~assets/admin/fonts/dubai-font-webfonts/regular/Dubai-Regular.ttf"),
  url("~assets/admin/fonts/dubai-font-webfonts/regular/Dubai-Regular.woff");
}

/////////////////////////////////////// mixins
@mixin boxSizing($p) {
  box-sizing: $p;
  -webkit-box-sizing: $p;
  -moz-box-sizing: $p;
}

@mixin borderRadius($p) {
  border-radius: $p;
  -webkit-border-radius: $p;
  -moz-border-radius: $p;
}

@mixin boxShadow($p) {
  box-shadow: $p;
  -webkit-box-shadow: $p;
  -moz-box-shadow: $p;
}

@mixin transform($p) {
  transform: $p;
  -webkit-transform: $p;
  -moz-transform: $p;
  -ms-transform: $p;
  -o-transform: $p;
}

@mixin transition($p) {
  transition: $p;
  -webkit-transition: $p;
  -moz-transition: $p;
  -ms-transition: $p;
  -o-transition: $p;
}

%appearance {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
}

%transition {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

////////////////////////////////////// variables
$header: rgba(#1B407C, 1);
$sidebar: rgba(#424242e3, 1);
$headerLogoTextColor: #fff;
$headerFontColor: #fff;
$asideTxt: #fff;
$asideIcon: #fff;
$bg: rgba(lightgray, 0.1);
$borders: rgba(#000, 0.1);
$menuGroup: #4f4f4f;
$usernameColor: #fff;
$titleBg: rgba(#424242e3, 1);
$titleColor: #fff;
$panelBg: #fff;
////////////////////////////////////// globals


////////////////////////////////////// layouts
.admin {
  direction: rtl;
  font-family: 'dubaiR', sans-serif;
  height: 100vh;
  overflow: hidden;

  h1, h2, h3, h4, h5, h6, a, p, span, b {
    font-family: 'dubaiR', sans-serif;
  }

  * {
    @include boxSizing(border-box);
  }

  .admin--content {
    padding-top: 60px;
    height: calc(100vh - 55px);
    flex-basis: calc(100% - 300px);
    background: $bg;
    direction: rtl !important;
    text-align: right;
    overflow-y: auto;
    position: relative;

    .admin-title-bar {
      width: calc(100vw - 285px);
      height: 55px;
      background: $titleBg;
      color: $titleColor;
      padding: 0 15px;
      position: fixed;
      top: 56px;
      left: 15px;
      z-index: 5;

      h2 {
        margin-left: auto;
        font-size: 25px !important;
      }

      button {
        margin-right: 10px;
        color: $titleColor;

        span {
          color: $titleColor;
        }
      }

      a {
        color: inherit;
      }
    }

    .admin-panel {
      background: $panelBg;
      @include borderRadius(5px);
      @include boxShadow(0 2px 4px rgba(#000, 0.4));
      padding: 50px 20px;
      text-align: right;
      direction: rtl;
    }

    table {
      tr {
        direction: rtl;
        text-align: right;

        td {
          direction: rtl;
          text-align: right;
        }

        th {
          direction: rtl;
          text-align: right;
        }
      }
    }
  }

  .admin--sidebar {
    min-height: calc(100vh - 55px);
    background: $sidebar;
    flex-basis: 300px;
    border-left: 1px solid $borders;

    ul {
      width: 100%;

      li {
        width: 100%;
        border-bottom: 1px solid $borders;
        cursor: pointer;
        position: relative;

        a {
          display: inline-block;
          padding: 20px;
          color: $asideTxt;

          i {
            color: $asideIcon;
            margin-left: 10px;
          }

          span {
            color: $asideIcon;
          }

          .badge {
            display: inline-block;
            width: 23px;
            height: 23px;
            padding: 5px;
            background: red;
            color: #fff;
            font-size: 14px;
            text-align: center;
            @include borderRadius(5px);
            position: absolute;
            top: 50%;
            left: 10px;
            @include transform(translateY(-50%));
          }
        }

        .menu-group {
          background: $menuGroup;
        }
      }
    }

    .admin-user {
      padding: 20px 15px;
      color: $usernameColor;

      h2 {
        font-size: 25px !important;
        margin-right: 10px;
      }
    }

    .admin-language {
      width: 100%;

      select {
        width: 100%;
        border: 1px solid $borders;
        background: $sidebar;
        color: #fff;
        cursor: pointer;
        padding-right: 15px;

        option {
          background: $bg;
        }
      }
    }
  }

  .admin--header {
    background: $header;
    border-bottom: 1px solid $borders;
    color: $headerFontColor;

    .headerSubDIV {
      height: 55px;
      display: flex;
      align-items: center;

      &.left {
        justify-content: flex-end;

        .logout {
          @extend %appearance;
          @extend %transition;
          cursor: pointer;
          font-size: 20px;
          color: inherit;

          &:hover {
            color: red;
          }
        }
      }

      &.right {
        justify-content: flex-start;

        .customer {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: inherit;

          .logo {
            display: inline-block;
            width: auto;
            margin: 0 15px 0 0;

            img {
              height: 40px;
            }
          }

          .name {
            display: inline-block;
            margin-right: 10px;
            font-size: 20px !important;
            font-weight: bold;

            p {
              color: $headerLogoTextColor;
            }
          }
        }
      }
    }
  }

  .admin--home {
    text-align: center;
  }

}

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


//////////////////////////////////////////////////////////////////////////////////////////////////////// element ui rtl fix
html:lang(fa) {
  .el-tag {
    /*margin-bottom: 10px!important;*/
  }

  .text-area {
    textarea {
      height: 100px;
    }
  }

  .el-popup-parent--hidden {
    padding-right: 0 !important;
  }

  .el-tag .el-icon-close {
    right: auto !important;
    left: -5px !important;
  }

  .el-table .el-table__body-wrapper .el-table__row .is-left {
    text-align: left !important;
  }

  .wrapper {
    min-height: 100vh;
  }

  .el-form-item__label {
    float: right !important;
    text-align: right !important;
  }

  .el-form-item__content {
    margin-left: 0 !important;
    margin-right: 120px !important;
  }

  @media (max-width: 768px) {
    .el-form-item__content {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }

  .secondTitle {
    margin-top: 50px;
  }

  .err {
    color: red;
    font-size: 13px;
  }

  .el-upload__input {
    display: none !important;
  }

  .el-message-box__title, .el-message-box__message {
    direction: rtl !important;
    text-align: right !important;
  }

  .el-message-box__message {
    padding-left: 12px !important;
    padding-right: 36px !important;
  }

  .el-message-box__btns {
    text-align: left !important;
  }

  .el-message-box__headerbtn {
    right: auto !important;
    left: 15px !important;
  }

  .el-message-box__btns button:nth-child(2) {
    margin-left: 0 !important;
    margin-right: 10px !important;
  }

  .el-message-box__status {
    right: 0 !important;
  }

  .el-table td, .el-table th {
    text-align: right !important;
  }

  .el-upload__input {
    display: none !important;
  }

  .el-checkbox__label {
    padding-left: 0 !important;
    padding-right: 10px !important;
  }

  .el-message__icon {
    margin-right: 0 !important;
    margin-left: 10px !important;
  }

  .sidebar-subnav {
    background: rgba(0, 0, 0, 0.05) !important;
  }

  .sidebar > .nav > li {
    border-bottom: 1px solid #eee !important;
  }

  .brand-logo p {
    margin-top: 6px !important;
  }

  .brand-logo-collapsed svg {
    fill: #fff !important;
  }

  .nav-floating {
    background: #fff !important;
  }

  .el-dialog__headerbtn {
    right: auto !important;
    left: 20px !important;
  }

  .el-radio__label {
    padding-right: 10px !important;
  }

  .el-scrollbar__wrap {
    margin-right: 0 !important;
    margin-left: -17px !important;
  }
}