@font-face {
  font-family: "dana";
  src: url("../fonts/dana-demibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "dana";
  src: url("../fonts/dana-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "dana";
  src: url("../fonts/dana-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "dana";
  src: url("../fonts/dana-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "dana";
  src: url("../fonts/dana-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "dana";
  src: url("../fonts/dana-thin.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "dana";
  src: url("../fonts/dana-ultrabold.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "trebucbd";
  src: url("../fonts/trebucbd.eot");
  src: local("trebucbd"), url("../fonts/trebucbd.woff") format("woff"), url("../fonts/trebucbd.ttf") format("truetype");
}

/* css reset */
* {
  direction: rtl;
  font-family: "dana";
}

body {
  line-height: 1;
}

.panel {
  direction: rtl;
}

.panel div,
.panel span,
.panel applet,
.panel object,
.panel iframe,
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.panel h5,
.panel h6,
.panel p,
.panel blockquote,
.panel pre,
.panel a,
.panel abbr,
.panel acronym,
.panel address,
.panel big,
.panel cite,
.panel code,
.panel del,
.panel dfn,
.panel em,
.panel img,
.panel ins,
.panel kbd,
.panel q,
.panel s,
.panel samp,
.panel small,
.panel strike,
.panel strong,
.panel sub,
.panel sup,
.panel tt,
.panel var,
.panel b,
.panel u,
.panel i,
.panel center,
.panel dl,
.panel dt,
.panel dd,
.panel ol,
.panel ul,
.panel li,
.panel fieldset,
.panel form,
.panel label,
.panel legend,
.panel caption,
.panel tfoot,
.panel article,
.panel aside,
.panel canvas,
.panel details,
.panel embed,
.panel figure,
.panel figcaption,
.panel footer,
.panel header,
.panel hgroup,
.panel menu,
.panel nav,
.panel output,
.panel ruby,
.panel section,
.panel summary,
.panel time,
.panel mark,
.panel audio,
.panel video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "dana";
}

.panel article,
.panel aside,
.panel details,
.panel figcaption,
.panel figure,
.panel footer,
.panel header,
.panel hgroup,
.panel menu,
.panel nav,
.panel section {
  display: block;
}

.panel ol,
.panel ul {
  list-style: none;
}

.panel blockquote,
.panel q {
  quotes: none;
}

.panel blockquote:before,
.panel blockquote:after,
.panel q:before,
.panel q:after {
  content: "";
  content: none;
}

.panel a {
  color: var(--common-text);
  text-decoration: none;
}

.panel a:hover {
  color: unset;
}

.panel input {
  -webkit-box-shadow: 0 0 0 0 !important;
          box-shadow: 0 0 0 0 !important;
}

.panel .rtl {
  direction: rtl;
}

.panel .ltr {
  direction: ltr;
}

.panel .overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  visibility: hidden;
}

@media screen and (max-width: 992px) {
  .panel .overlay.active {
    visibility: visible;
    opacity: 1;
  }
}

.panel .asideMenu {
  padding: 24px 0;
  position: fixed;
  top: 0;
  bottom: 0;
  max-height: 100vh;
  width: 100px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  right: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  z-index: 1;
  overflow: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.panel .asideMenu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

@media screen and (max-width: 992px) {
  .panel .asideMenu {
    z-index: 9;
    width: 225px;
    right: -225px;
  }
}

.panel .asideMenu.active {
  width: 250px;
}

.panel .asideMenu.active .menu .itemMenu .iconText .text,
.panel .asideMenu.active .menu .arrowDown {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 992px) {
  .panel .asideMenu.active {
    right: 0;
  }
}

.panel .asideMenu.active .logo img {
  display: block;
}

.panel .asideMenu.active .logo .smLogo {
  display: none;
}

.panel .asideMenu:not(.active) {
  overflow: unset;
}

.panel .asideMenu:not(.active) .options,
.panel .asideMenu:not(.active) .name,
.panel .asideMenu:not(.active) .role {
  display: none;
}

.panel .asideMenu:not(.active) li {
  position: relative;
}

.panel .asideMenu:not(.active) li:hover, .panel .asideMenu:not(.active) li.active {
  background-color: #1a2033;
}

.panel .asideMenu:not(.active) li:hover > ul, .panel .asideMenu:not(.active) li.active > ul {
  display: block;
  position: absolute;
  border-right: 1px solid #1a2033;
  right: 46px;
  background: #272e48;
  padding: 16px;
  top: 0;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 160px;
  border-radius: 5px 0 0 5px;
}

@media screen and (max-width: 576px) {
  .panel .asideMenu:not(.active) li:hover > ul, .panel .asideMenu:not(.active) li.active > ul {
    font-size: var(--font-size-14);
  }
}

.panel .asideMenu:not(.active) li:hover > ul > li:first-child, .panel .asideMenu:not(.active) li.active > ul > li:first-child {
  margin-top: 0px;
}

.panel .asideMenu:not(.active) li:hover > ul > li:last-child, .panel .asideMenu:not(.active) li.active > ul > li:last-child {
  margin-bottom: 0px;
}

.panel .asideMenu:not(.active) li:hover > ul > li:hover, .panel .asideMenu:not(.active) li.active > ul > li:hover {
  background-color: unset;
}

.panel .asideMenu:not(.active) .itemMenu {
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
}

.panel .asideMenu:not(.active) .itemMenu .iconText .text {
  display: none;
}

.panel .asideMenu:not(.active) .itemMenu > .arrowDown {
  display: none;
}

.panel .asideMenu .logo img {
  display: none;
}

.panel .asideMenu .logo .smLogo {
  display: block;
}

.panel .asideMenu .avatar {
  position: relative;
  margin-top: 24px;
}

.panel .asideMenu .avatar .image img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.panel .asideMenu .avatar .online {
  position: absolute;
  top: 0px;
  border-radius: 50%;
  left: 0px;
  background-color: #10b759;
  width: 14px;
  height: 14px;
  border: 2px solid #272e48;
}

.panel .asideMenu .name {
  color: #fff;
  margin-top: 24px;
  line-height: 30px;
}

.panel .asideMenu .role {
  color: #9f9f9f;
  line-height: 20px;
  font-size: 12px;
  margin-top: 4px;
}

.panel .asideMenu .options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 24px;
}

.panel .asideMenu .options a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 47px;
  height: 37px;
}

.panel .asideMenu .options .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 4px;
  border-radius: 4px;
}

.panel .asideMenu .options .item img {
  width: 15px;
  height: 15px;
}

.panel .asideMenu .options .user {
  background-color: rgba(34, 185, 255, 0.3);
}

.panel .asideMenu .options .setting {
  background-color: rgba(16, 183, 89, 0.3);
}

.panel .asideMenu .options .exit {
  background-color: rgba(255, 63, 63, 0.3);
}

.panel .asideMenu .menu {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 70px;
}

@media screen and (max-width: 576px) {
  .panel .asideMenu .menu {
    font-size: var(--font-size-14);
  }
}

.panel .asideMenu .menu .activeSub {
  color: #fff;
  font-weight: 500;
}

.panel .asideMenu .menu .arrowDown {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.panel .asideMenu .menu li > ul {
  height: 0;
  overflow: hidden;
  margin-right: 54px;
  padding-right: 12px;
}

.panel .asideMenu .menu li > ul > li {
  margin: 16px 0;
  position: relative;
}

.panel .asideMenu .menu li > ul > li:first-child {
  margin-top: 0px;
}

.panel .asideMenu .menu li > ul > li:last-child {
  margin-bottom: 12px;
}

.panel .asideMenu .menu li > ul > li a {
  font-size: 14px;
  padding: 8px 0;
  color: #cccccc;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.panel .asideMenu .menu li > ul > li a:hover {
  color: #fff;
}

.panel .asideMenu .menu li.active .arrowDown {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.panel .asideMenu .menu li.active > ul {
  height: auto;
}

.panel .asideMenu .menu .itemMenu {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 42px;
  padding: 8px 24px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

@media screen and (max-width: 1440px) {
  .panel .asideMenu .menu .itemMenu {
    height: 44px;
  }
}

.panel .asideMenu .menu .itemMenu .iconText img {
  height: 24px;
}

.panel .asideMenu .menu .itemMenu .arrowDown img {
  width: 10px;
}

.panel .asideMenu .menu .itemMenu .iconText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.panel .asideMenu .menu .itemMenu .iconText .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.panel .asideMenu .menu .itemMenu .iconText .text {
  margin-right: 12px;
  font-weight: 500;
  font-size: 14px;
  color: #bbbbbb;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
}

.panel .asideMenu .menu .itemMenu:hover .iconText .text {
  color: #fff;
}

.panel .asideMenu .menu .itemMenu.active .iconText .text {
  color: #fff;
}

.panel .asideMenu .menu #menuDynamic {
  position: absolute;
  top: 70px;
  right: -20px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.panel .asideMenu .date {
  display: none;
}

@media screen and (max-width: 576px) {
  .panel .asideMenu .date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    bottom: 24px;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .panel .asideMenu .date > div {
    margin: 3px;
  }
}

.panel .MainContent {
  min-height: 100vh;
  position: relative;
  padding-right: 100px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  background-color: #182139;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  right: 0px;
}

@media screen and (max-width: 992px) {
  .panel .MainContent {
    padding-right: 0px;
  }
}

.panel .MainContent.active {
  padding-right: 250px;
}

.panel .MainContent header {
  padding: 16px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 992px) {
  .panel .MainContent header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #272e48;
    z-index: 7;
  }
}

.panel .MainContent header .menu__serach {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 40%;
}

@media screen and (max-width: 1200px) {
  .panel .MainContent header .menu__serach {
    width: 50%;
  }
}

.panel .MainContent header .menu__serach .menubar {
  border-radius: 4px;
  width: 40px;
  height: 35px;
  background-color: #272e48;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}

.panel .MainContent header .menu__serach .menubar:hover {
  background-color: #313852;
}

.panel .MainContent header .menu__serach .menubar img {
  width: 18px;
  height: 18px;
}

.panel .MainContent header .menu__serach form {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-right: 16px;
}

.panel .MainContent header .menu__serach form .inputSerach {
  background-color: #343f5c;
  border-radius: 5px;
  height: 36px;
  padding: 4px 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.panel .MainContent header .menu__serach form .inputSerach:hover {
  background-color: #313852;
}

.panel .MainContent header .menu__serach form .inputSerach .btnSerach {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  outline: none;
  border: 0;
  background-color: transparent;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.panel .MainContent header .menu__serach form .inputSerach input {
  background: transparent;
  color: #c3c3c3;
  border: 0;
  outline: none;
  padding: 2px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.panel .MainContent header .menu__serach form .inputSerach img {
  width: 18px;
  height: 18px;
}

.panel .MainContent header .someGeneralOptions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.panel .MainContent header .someGeneralOptions .subPlatform {
  position: absolute;
  will-change: transform;
  top: 0px;
  left: 0px;
  -webkit-transform: translate3d(0px, 35px, 0px);
          transform: translate3d(0px, 35px, 0px);
  border: none;
  background-color: #313852;
  border-top: 1px solid #3b425c !important;
  color: #c7c7c7;
  visibility: hidden;
  opacity: 0;
  width: 300px;
  border-radius: 5px;
}

.panel .MainContent header .someGeneralOptions .subPlatform h6 {
  color: #c7c7c7;
  font-size: 14px;
}

.panel .MainContent header .someGeneralOptions .subPlatform .border {
  border-color: #3b425c !important;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  border-radius: 8px;
}

.panel .MainContent header .someGeneralOptions .subPlatform.active {
  margin-top: 0;
  visibility: visible;
  opacity: 1;
  height: auto;
}

.panel .MainContent header .someGeneralOptions .subMessage,
.panel .MainContent header .someGeneralOptions .subNotif {
  position: absolute;
  will-change: transform;
  top: 0px;
  left: 0px;
  -webkit-transform: translate3d(0px, 35px, 0px);
          transform: translate3d(0px, 35px, 0px);
  border: none;
  background-color: #313852;
  border-top: 1px solid #3b425c !important;
  color: #c7c7c7;
  visibility: hidden;
  opacity: 0;
  width: 300px;
  border-radius: 5px;
}

.panel .MainContent header .someGeneralOptions .subMessage.active,
.panel .MainContent header .someGeneralOptions .subNotif.active {
  margin-top: 0;
  visibility: visible;
  opacity: 1;
  height: auto;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group {
  cursor: auto;
  max-height: 300px;
  overflow: auto;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group::-webkit-scrollbar,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group::-webkit-scrollbar-thumb,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group::-webkit-scrollbar-thumb {
  background-color: #515872;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group::-webkit-scrollbar-track,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group::-webkit-scrollbar-track {
  background-color: transparent;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group .text-divider,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group .text-divider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group .text-divider::after,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group .text-divider::after {
  content: "";
  display: block;
  height: 1px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #3b425c;
  margin-right: 10px;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group li a,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group li a {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #313852;
  margin: 12px;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group li a img,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group li a img {
  width: 28px;
  height: 28px;
  margin-left: 16px;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group li a p,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group li a p {
  font-size: 14px;
  margin-bottom: 12px !important;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group li a .small,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group li a .small {
  font-size: 12px;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group li a .mr-2,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group li a .mr-2 {
  margin: 0 !important;
  margin-left: 8px !important;
}

.panel .MainContent header .someGeneralOptions .subMessage ul.list-group .pl-3,
.panel .MainContent header .someGeneralOptions .subNotif ul.list-group .pl-3 {
  padding-right: 16px !important;
}

.panel .MainContent header .someGeneralOptions .subMessage .bgImage,
.panel .MainContent header .someGeneralOptions .subNotif .bgImage {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.panel .MainContent header .someGeneralOptions .subMessage .bgImage small,
.panel .MainContent header .someGeneralOptions .subNotif .bgImage small {
  position: relative;
  z-index: 1;
  color: #c7c7c7;
  font-size: 12px;
  font-weight: 400;
}

.panel .MainContent header .someGeneralOptions .subMessage .bgImage h6,
.panel .MainContent header .someGeneralOptions .subNotif .bgImage h6 {
  position: relative;
  z-index: 1;
  color: #eee;
  margin-bottom: 8px !important;
}

.panel .MainContent header .someGeneralOptions .subMessage .bgImage::before,
.panel .MainContent header .someGeneralOptions .subNotif .bgImage::before {
  content: " ";
  background-color: #00000090;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.panel .MainContent header .someGeneralOptions .item {
  position: relative;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 16px;
}

.panel .MainContent header .someGeneralOptions .item img {
  width: 18px;
  height: 18px;
}

.panel .MainContent header .someGeneralOptions .item > .circle {
  position: absolute;
  width: 6px;
  height: 6px;
  left: -5px;
  border-radius: 50%;
  top: -5px;
  background: #ff3f3f;
}
/*# sourceMappingURL=panelStyle.css.map */