@charset "UTF-8";
/*$dir :rtl; //right
$dirplus :ltr; //left
$right :right; //right
$left :left; //left
$color :left;*/
/*
#192734 >> $PrimaryBG
#fff >> $PrimaryColor
#15202b >> $SecondBG
#d7d7d7 >> $SecondColor
#ffda57 >> $ThirdColor

*/
/*
$bodyBG: #f8f8f8;
$TriangleBG:none ;
$HeaderBG: #fff;

$PrimaryBG: #fff;
$SecondBG: #efefef;
$ThirdBG: #243b51;
$FourBG: #fff;

$FourBG: #f9f9f9;

$PrimaryColor: #000;
$PrimaryColor_: #1d1d1d;
$PrimaryColor__: #494949;
$SecondColor: #4c4c4c;
//الاحمر
$ThirdColor: #ff6060;
$FourColor: #080808;
$FiveColor: #636363;
$SixColor: #c1c1c1;



$PrimaryShadow: rgba(0, 0,0,.05);


$PrimaryBorder: #dfdfdf;


$TutorialBG: #f8f8f8;
$TutorialBG_: #efefef;

$nameLogo: #4b4b4b;
$selectCompany: #f7f7f7;
$imgWelcome:1;
$loadinPagebarSec: #ffbcbc;
$lineProgressAnalyse: linear-gradient(to right, #ff6060, #f04b4b, #f03b3b);
$chartLine: #ff6060;
$numSearchActivity: #ff4d51;
$chartBarLine: #45b1ff;*/
/*/**/
@font-face {
  font-family: "Helvetica Neue W23 for SKY Reg";
  font-weight: 100;
  font-style: normal;
  src: url("/../Assets/Fonts/HelveticaNeue-Reg.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "ge ss unique light";
  src: url("/../Assets/Fonts/GE_SS_Unique_Light.ttf") format("truetype");
}
@font-face {
  font-family: "carre";
  src: url("/../Assets/Fonts/Carre.ttf") format("truetype");
}
@font-face {
  font-family: "tachkili font ttf";
  src: url("/../Assets/Fonts/Tachkili_Font_TTF.otf") format("opentype");
}
@font-face {
  font-family: "abel-regular";
  src: url("/../Assets/Fonts/abel-regular.ttf") format("truetype");
}
@font-face {
  font-family: "fontawesome-webfont";
  src: url("/../Assets/Fonts/fontawesome-webfont.ttf") format("truetype");
}
@font-face {
  font-family: "jersey-m54";
  src: url("/../Assets/Fonts/Jersey-M54.ttf") format("truetype");
}
@font-face {
  font-family: "liberal";
  src: url("/../Assets/Fonts/Liberal.woff2") format("woff2");
}
@font-face {
  font-family: "digital";
  src: url("/../Assets/Fonts/digital-7.ttf") format("truetype");
}
.num {
  font-family: "Jersey M54";
}

.numCurvy {
  font-family: Cursive;
}

.noneScroll {
  overflow: hidden;
}

* {
  font-family: "abel-regular", "ge ss unique light";
  /*font-size: 14px;*/
  outline: none;
  box-sizing: border-box;
}

.transform, .link::before {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 25px;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}

.iconsO {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: "liga";
  -moz-osx-font-smoothing: grayscale;
}

/*body {
    background: #f8f8f8;
    padding: 0;
    margin: 0;
    direction: rtl;
}*/
a {
  text-decoration: none;
  color: inherit;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.transform, .link::before {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.transform-1 {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.num {
  font-family: "carre";
}

.click {
  cursor: pointer;
}

/*body {
    padding: 0;
    margin: 0;
    direction: ltr;
    text-align: left;
    background: #f8f8f8;
    background: #15202B;
}
*/
.rotate-90 {
  ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate-180 {
  ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotate-270 {
  ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: inherit;
}

::-moz-placeholder { /* Firefox 19+ */
  color: inherit;
}

:-ms-input-placeholder { /* IE 10+ */
  color: inherit;
}

:-moz-placeholder { /* Firefox 18- */
  color: inherit;
}

/********** التقسيم **********/
.cardA-split-4 {
  display: flex;
  /*margin-top: 20px;*/
}

.item-cardA-split-2 {
  width: 50%;
  padding: 5px;
}

.cardA-split-1 {
  width: 100%;
}

.cardA-split-3 {
  display: flex;
  /*margin-top: 25px;*/
  flex-wrap: wrap;
}

.item-cardA-split-1 {
  width: 25%;
  /*background: #fff;*/
  /*min-height: 300px;*/
  padding: 5px;
  min-width: 245px;
}

.item-cardA-split-3 {
  width: 75%;
  /*background: #715050;*/
  /*min-height: 300px;*/
  padding: 5px;
}

.item-cardA-split-4 {
  width: 100%;
  /*! min-height: 300px; */
  padding: 5px;
}

.cardA-split-2 {
  display: flex;
  /*margin-top: 25px;*/
}

.container-card {
  /*    min-height: 215px;
  */
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #192734;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px #15202b;
  border-radius: 10px;
}

.header-container-card {
  border-bottom: 1px solid #243b51;
  margin-bottom: 5px;
  line-height: 45px;
}

hr {
  border: 0;
  height: 0;
  padding: 0;
  border-bottom: 1px dashed #243b51;
  /* box-shadow: 0 1px 0 RGBA(11, 11, 11, 0.4); */
  clear: both;
  margin: 0;
}

br {
  display: block;
  width: 100%;
  height: 10px;
  margin: 5px;
}

p {
  margin: 0;
}

a {
  color: initial;
  text-decoration: none;
  color: #45b1ff;
}

a:hover {
  color: #ffda57;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.7;
}

::-moz-placeholder {
  color: inherit;
  opacity: 0.7;
}

::-ms-placeholder {
  color: inherit;
  opacity: 0.7;
}

::placeholder {
  color: inherit;
  opacity: 0.7;
}

.transform, .link::before {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.num {
  font-family: "jersey-m54";
}

.link {
  color: initial;
  text-decoration: none;
  color: #ffcb58;
  padding-left: 10px;
  padding-right: 10px;
  background: rgba(0, 0, 0, 0.15);
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  position: relative;
}

.link::before {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 4px;
}

.link:hover {
  color: #58ceff;
}

.link:hover::before {
  width: 2px;
  background: #45b1ff;
  border-radius: 5px;
}

/**********   **********/
.header {
  /*background: rgba(16, 26, 36, 0.9);*/
  height: 60px;
}

.logo {
  float: left;
  margin-left: 10px;
}

.nameLogo {
  color: #5ed9ff;
  font-size: 35px;
  font-family: Cursive;
  display: inline-block;
  vertical-align: middle;
}

.img-logo {
  display: inline-block;
  vertical-align: top;
  width: 40px;
  height: 40px;
  margin-top: 10px;
  margin-left: 10px;
}

.firs-g {
  color: #f7dc00;
  font-size: 43px;
  font-family: Cursive;
}

/********  Body   ********/
body {
  padding: 0;
  margin: 0;
  background: #101a24;
  color: #ccc;
}

.body-site {
  margin-left: 20px;
  /* display: flex; */
  width: calc(100% - 40px);
  margin-right: 20px;
  max-width: calc(100% - 235px);
}

.master-page {
  display: flex;
}

.master-NavMenu {
  width: 45px;
}

.master-NavMenu-act {
  width: 235px;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #192734;
  box-shadow: 0 0 15px #101a24;
}

.navbar {
  height: 56px;
  background: #15202b;
  text-align: center;
  line-height: 53px;
  color: #f7dc00;
  font-size: 30px;
}

.navbar-toggler {
  background: #101a24;
  border: 0;
  float: left;
  width: 35px;
  height: 35px;
  padding: 0;
  text-align: center;
  line-height: 53px;
  color: #243b51;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 13px;
  margin-left: 5px;
}

.navbar-toggler:hover {
  background: #f7dc00;
  color: #101a24;
}

.navbar-toggler-icon {
  font-size: 28px;
  text-align: center;
}

.navbar-brand {
  font-size: 22px;
  color: #f7dc00;
}

.ul-parent-navbar {
  padding: 0;
  margin: 0;
  color: #ccc;
  position: fixed;
  top: 58px;
  width: 200px;
  bottom: 0;
  overflow-y: auto;
}

.type-item-navbar {
  font-size: 30px;
  background: #15202b;
  font-size: 25px;
  border-bottom: 1px solid #192734;
  cursor: pointer;
  height: 40px;
  overflow: hidden;
  position: relative;
}

.type-item-navbar:hover {
  background: #45b1ff;
}

.type-item-navbar-act {
  color: #45b1ff;
  cursor: default;
}

.type-item-navbar-act .icon-item-navbar {
  color: #45b1ff;
}

.noti-item-navbar {
  position: absolute;
  right: 10px;
  top: 10px;
  background: #ff4d51;
  font-size: 14px;
  border-radius: 50%;
  padding-left: 5px;
  padding-right: 5px;
  color: #fff;
  box-shadow: 0 0 4px #ff4d51;
}

.name-item-navbar {
  font-size: 20px;
  font-family: unset;
  margin-left: 10px;
  vertical-align: middle;
}

.icon-item-navbar {
  font-size: 22px;
  color: #243b51;
  vertical-align: middle;
  margin-left: 7px;
}

.type-item-navbar:hover .name-item-navbar {
  color: #243b51;
}

.type-item-navbar:hover .name-item-navbar {
  color: #243b51;
}

.inforowo-ul li {
  font-family: monospace;
  font-size: 15px;
}

.ul-navbar {
  padding: 0px;
  margin: 0;
  display: none;
}

.ul-navbar-act {
  display: block;
}

.page-item-navbar {
  line-height: 40px;
  /* padding-left: 10px;*/
  /* background: #15202b; */
  border-bottom: 1px solid #15202c;
  color: #000;
  font-size: 30px;
}

.nav-link {
  color: #ccc;
  font-size: 20px;
  /**/
  display: block;
}

.icon-nav-link {
  font-size: 18px;
  color: #fec107;
}

.page-item-navbar:hover {
  background: #f7dc00;
}

.page-item-navbar > .nav-link {
  padding-left: 10px;
}

.page-item-navbar-act, .page-item-navbar-act:hover {
  background: #f7dc00;
  cursor: default;
}

.page-item-navbar:hover .nav-link, .page-item-navbar-act .nav-link {
  color: #243b51;
}

.page-item-navbar:hover .icon-nav-link, .page-item-navbar-act .icon-nav-link {
  color: #243b51;
}

.collapse {
  width: 45px;
  overflow: hidden;
}

.collapse .ul-parent-navbar {
  width: 45px;
}

.collapse .name-item-navbar {
  display: none;
}

.collapse .name-nav-link {
  display: none;
}

.collapse .navbar-brand {
  display: none;
}

.ul-headerbar {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

.page-item-headerbar {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #192734;
  padding: 5px;
  border-radius: 7px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-item-headerbar:hover {
  background: #fec107;
  color: #262626;
}

.page-item-headerbar:hover .icon-nav-link {
  color: #262626;
}

.page-item-headerbar:hover .nav-link {
  color: #262626;
}

.num-nav-link {
  margin-left: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background: #101a24;
  border-radius: 5px;
  margin-right: -10px;
  color: #516b86;
  font-size: 14px;
  line-height: 28px;
  vertical-align: top;
  height: 25px;
}

.page-item-headerbar:hover .num-nav-link {
  background: #ffd75e;
  color: #192734;
}

.dot-status-nav-link {
  margin-left: 5px;
  margin-right: -5px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.11);
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background: #516a85;
  border-radius: 50%;
  margin-top: -4px;
}

.btn-item-headerbar {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #fff;
  padding: 5px;
  border-radius: 7px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 35px;
  cursor: pointer;
}

.icon-nav-btn {
  font-size: 19px;
  margin-right: 5px;
}

.btn-item-headerbar:hover {
  background: #fec107;
  color: #262626;
}

/********  slide   ********/
.side-site {
  position: fixed;
  left: 10px;
  top: 65px;
  width: 60px;
  border-radius: 10px;
  color: #ccc;
  background: #101a24;
  bottom: 10px;
  border-radius: 4px;
}

.list-slide {
  list-style: none;
  padding: 0;
  text-align: center;
}

.list-slide li {
  font-size: 35px;
  /* padding-left: 10px; */
  cursor: pointer;
  /* width: 95%; */
  margin: auto;
  /* border-radius: 10px; */
  line-height: 60px;
  height: 55px;
  border-bottom: 1px solid #15202b;
  position: relative;
}

.list-slide li:hover {
  background: #f7d90f;
  color: #000;
}

.name-li-side {
  display: none;
  font-size: 17px;
  position: absolute;
  left: 61px;
  width: max-content;
  background: #f7d90f;
  /* border-left: 1px solid #15202b; */
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 0 20px;
  height: 35px;
  top: 0px;
  line-height: 34px;
}

.list-slide li:hover .name-li-side {
  display: block;
}

/**********   **********/
/*********    الصفحات      ***********/
main {
  margin-right: 201px;
  text-align: center;
  margin-top: 100px;
}

.main-act {
  margin-right: 0px;
}

main-p {
  margin-right: 30px;
}

.rowanly {
  margin: 10px;
  margin-bottom: 40px;
  color: #fdfdfd;
  font-size: 0;
  direction: rtl;
}

.colsanly {
  width: 25%;
  height: 95px;
  cursor: default;
  display: inline-block;
  vertical-align: top;
  min-width: 230px;
}

.contcolsanly {
  margin: 5px;
  font-size: 0;
  direction: rtl;
  height: 90px;
  padding: 10px;
  border: 1px dashed #111;
  /* box-sizing: border-box; */
}

.iconin {
  font-size: 60px;
  display: inline-block;
  vertical-align: top;
  width: 25%;
  opacity: 0.7;
  margin-top: 20px;
}

.wordin {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

.wordup {
  font-size: 30px;
  height: 45px;
}

.big-wordup {
  font-size: 30px;
  height: 35px;
  line-height: 41px;
}

.small-wordup {
  font-size: 13px;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  height: 20px;
}

.head-tool-static {
  text-align: left;
}

.bg-blue {
  background: #059bff;
  color: #fff;
}

.bg-yellow {
  background: #fec107;
  color: #243b51;
}

.bg-green {
  background: #01c853;
  color: #fff;
}

.bg-red {
  background: #c30620;
  color: #fff;
}

.bg-orang {
  background: #ce5101;
  color: #fff;
}

.bg-bnaf {
  background: #a90cef;
  color: #fff;
}

.tabs {
  margin: 10px;
  font-size: 0px;
  margin-bottom: 50px;
  text-align: center;
}

.tabhide, .windowhide {
  display: none;
}

.win-defualt {
  display: initial;
}

.row-1 {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  min-width: 280px;
}

.row-2 {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  /*min-height: 450px;*/
  min-width: 280px;
}

.row-3 {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  /*min-height: 450px;*/
  min-width: 280px;
}

.row-4 {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  /*min-height: 450px;*/
  min-width: 280px;
}

.controw {
  background: #192734;
  border: 1px solid #192734;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 5px;
  /*    direction: rtl;
  */
  min-width: 270px;
  padding-bottom: 10px;
  border-radius: 15px;
}

.controw-fix {
  height: 492px;
  height: 532px;
}

.bodyrow-scroll {
  direction: ltr;
}

.bodyrow-dir {
  direction: rtl;
}

.headrow {
  min-height: 35px;
  color: #fcfcfc;
  position: relative;
  line-height: 23px;
  display: block;
  font-size: 0;
  background: #101a24;
  /*    text-align: right;
  */
  border-radius: 15px 15px 0 0;
}

.rowheone {
  text-align: left;
  /* float: right; */
  display: inline-block;
  width: 50%;
  line-height: 30px;
}

.nameherow {
  font-size: 25px;
  font-weight: 600;
  margin-left: 10px;
  margin-right: 10px;
  line-height: 40px;
}

.rowhetow {
  /* float: left; */
  display: inline-block;
  width: 50%;
  text-align: right;
}

.colrohe {
  display: inline-block;
  vertical-align: middle;
  /* float: left; */
  margin-right: 10px;
  margin-top: 0;
  clear: unset;
  line-height: 45px;
  height: 35px;
}

.iconrohe {
  float: left;
  color: #717171;
  cursor: pointer;
  font-size: 21px;
}

.iconrohe:hover {
  color: #fcfcfc;
}

.bodyrow {
  margin-top: 15px;
  text-align: center;
}

.menurow {
  min-width: 100px;
  background: #151515;
  top: 25px;
  position: absolute;
  left: 10px;
  box-shadow: 0px 0px 4px #151515;
  display: none;
  z-index: 1;
}

.havemenurow:hover > .menurow, .menurow:hover {
  display: block;
}

.rowmenro {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;
  cursor: pointer;
  color: #9f9f9f;
}

.rowmenro:hover {
  background: #2d2d2d;
  color: #fdfdfd;
}

.rowmenp {
  padding: 0px;
}

.rowmenp .hrrowmen {
  border: 0px;
  height: 0px;
  padding: 0;
  border-bottom: 1px solid RGBA(38, 38, 38, 0.6);
  box-shadow: 0 1px 0 RGBA(0, 0, 0, 0.4);
  margin: 0;
}

.fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  overflow: auto;
  direction: ltr;
  z-index: 109;
  width: auto;
  background: #101a24;
}

.tbcpanel {
  width: 100%;
  color: #cecece;
  border-collapse: collapse;
  text-align: right;
}

.tbcpanel > thead {
  height: 40px;
}

.tb-min > thead {
  height: 30px;
}

.thtrcpanel {
  min-height: 40px;
}

.thtdcpanel {
  font-size: 17px;
  font-weight: 600;
  padding-right: 10px;
  padding-left: 10px;
}

.tb-min > thead > tr > td {
  font-size: 13px;
}

.trcpanel {
  border-top: 1px solid #192734;
  min-height: 30px;
  line-height: 30px;
  cursor: default;
}

.trcpanel:hover {
  background: #363636;
}

.tbcpanel > tbody > tr > td {
  padding-right: 10px;
  padding-left: 10px;
}

.tdimg {
  width: 70px;
}

.tdimg-min {
  width: 25px;
}

.tdimg > img, .tdimg-min > img {
  width: 95%;
  display: inline-block;
  vertical-align: middle;
}

.tdname {
  font-weight: 600;
}

.tdicon {
  text-align: center;
}

.tdicon > i {
  vertical-align: middle;
  text-align: center;
}

.tdabout {
  color: #656565;
}

.focus-blue, .focus-red, .focus-yellow, .focus-green, .focus-rosasy {
  border-radius: 20px;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  color: #fcfcfc;
  line-height: 19px;
  display: inline-block;
  min-height: 20px;
  font-size: 12px;
  height: 20px;
  vertical-align: middle;
}

.focus-blue {
  background: #059bff;
}

.focus-red {
  background: #c30620;
}

.focus-yellow {
  background: #fec107;
}

.focus-green {
  background: #01c853;
}

.focus-rosasy {
  background: #777;
}

.focus-rosasy {
  background: #777;
}

.nano > .nano-pane > .nano-slider {
  background: #059bff;
}

/*.txt-date {
    width: 75px;
    background: #212121;
    border: 0;
    border-bottom: 3px solid #243b51;
    text-align: center;
    color: #243b51;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

.txt-date:focus {
    border-bottom: 3px solid #059bff;
    color: #059bff;
}*/
.alert-server {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 20px;
  line-height: 35px;
  margin-top: 15px;
  margin-bottom: 15px;
  color: #ffffff;
  font-size: 19px;
  box-shadow: rgb(255, 77, 81) 0px 0px 4px;
  background: rgb(255, 77, 81);
  font-family: monospace;
}

.fixFloat-Side {
  position: fixed;
  top: 10px;
  bottom: 10px;
  right: 5px;
  overflow-y: auto;
}

.pin-floatSide {
  font-size: 19px;
  margin-left: 10px;
  color: #70859a;
  cursor: pointer;
  width: 30px;
  text-align: center;
}

.act-pin-floatSide {
  color: #00bcd4;
  font-weight: 600;
}

.pin-floatSide:hover {
  color: #ff9800;
}

.numherow {
  background: #4ab01b;
  padding-left: 10px;
  padding-right: 10px;
}

/******  جداول موافقة وحذف ********/
.card {
  margin: 2px;
}

.title-card {
  text-align: right;
  padding-right: 5%;
  color: #909090;
  font-size: 17px;
  background: #383838;
  display: inline-block;
  text-align: center;
  margin: 0;
  padding: 0;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 0 20px;
  margin-top: 20px;
  margin-bottom: 1px;
  float: right;
}

.btnfilter {
  display: inline-block;
  margin: 5px;
  padding-left: 15px;
  padding-right: 15px;
  background: #101a24;
  cursor: pointer;
  box-shadow: 0 0 4px #243b51;
  min-width: 100px;
  height: 35px;
  line-height: 35px;
  border-radius: 20px;
}

.btnfilter:hover {
  background: #03a9f4;
  color: #fff;
  border-bottom: 0px solid rgb(69, 69, 69);
}

table > tbody > tr > .namecobl {
  text-align: right;
}

.hedtr {
  color: #70859a;
}

.idcobl {
  padding-left: 7px;
  padding-right: 7px;
  color: #70859a;
}

.border-row {
  min-height: 2px;
  background: #575757;
}

.focus-td {
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  height: 20px;
  line-height: 22px;
  display: inline-block;
}

.focus-td-blue {
  background: #059bff;
  color: #fff;
}

.focus-td-yellow {
  background: #fec107;
  color: #664b4b;
}

.table-card tbody tr:nth-child(2n+1) {
  background: #272727;
}

.fs-key {
  line-height: 15px;
  display: inline-block;
  border-bottom: 1px dotted #01c853;
}

.contenttable {
  height: 26px;
  line-height: 25px;
  overflow: hidden;
  text-align: right;
  cursor: pointer;
  padding-right: 5px;
  padding-left: 5px;
  max-width: 480px;
}

.showcontblogcom {
  height: auto;
}

.name-prop {
  color: #607d8b;
  background: #101a24;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  border: 1px dashed #243b51;
}

.ultb {
  list-style: none;
  color: #607d8b;
  margin: 0;
  margin-top: 3px;
  padding: 10px;
  word-break: break-all;
}

.ultb li {
  margin-top: 4px;
  margin-bottom: 4px;
}

.value-prop {
  max-height: 80px;
  max-width: 210px;
  overflow: hidden;
}

.value-prop:hover {
  max-height: auto;
  overflow: inherit;
}

.oktd {
  cursor: pointer;
  font-size: 18px;
  display: inline-block;
  vertical-align: top;
  margin-top: 4px;
}

.oktd:hover {
  color: #00ff1e;
}

.ortd, .deltd {
  color: #ccc;
  font-size: 19px;
}

.ortd:hover {
  color: #04a2ec;
  cursor: pointer;
}

.deltd {
  cursor: pointer;
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
}

.deltd:hover {
  color: #ff9a63;
}

.viewtd {
  color: #ffc107;
}

.statue-item {
  color: #414141;
}

.publish-item, .active-item-act {
  color: #01c853;
  opacity: 0.5;
  cursor: pointer;
}

.active-item-reo {
  color: #fec107;
  opacity: 0.5;
  cursor: pointer;
}

.statue-item:hover {
  opacity: 1;
}

.MoreData {
  width: 80px;
  height: 80px;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #111;
  color: #9c9c9c;
  border-radius: 50%;
  line-height: 80px;
  font-size: 15px;
  text-align: center;
  box-shadow: 0 0 4px #2c2c2c;
  /* display: inline-block; */
  cursor: pointer;
  display: none;
  border: 1px dashed #484848;
}

.MoreData:hover {
  background: #059bff;
  color: #fff;
  border: 1px dashed #080808;
}

.timetd, .numtd {
  font-size: 11px;
}

.imgtd {
  height: 60px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 7px;
  margin: 5px;
}

.view-imgtd {
  display: inline-block;
  vertical-align: middle;
  border-radius: 7px;
  height: auto;
  max-width: calc(100% - 10px);
  margin-top: 5px;
  margin-bottom: 5px;
}

/*
.hedtr {
    background: #383639;
    border-bottom: 1px solid #383838;
}*/
.num-info-td {
  color: #606060;
  margin-top: -8px;
  vertical-align: text-bottom;
  font-size: 11px;
}

.more-pages {
  /*  background: #383838;*/
  font-size: 0;
  padding: 5px;
}

.pages-rows {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 100px);
  direction: rtl;
  height: 34px;
  overflow: hidden;
  margin-top: 7px;
}

.pages-rows:hover {
  height: auto;
}

.more-pages-about {
  display: inline-block;
  vertical-align: top;
  width: 90px;
  padding-left: 5px;
  padding-right: 5px;
  background: #15202b;
  border: 1px dashed #243b51;
  padding-bottom: 5px;
  padding-top: 5px;
}
.more-pages-about .lin-page-about, .more-pages-about .lin-item-about {
  font-size: 11px;
  line-height: 18px;
  height: 17px;
}
.more-pages-about .lin-page-about {
  border-bottom: 1px solid #1c2f40;
  color: #70859a;
}
.more-pages-about .lin-item-about {
  color: #f7dc00;
}

.pages-rows > li {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  background: #15202b;
  line-height: 28px;
  margin: 2px;
  border: 1px solid #1c2f40;
  color: #70859a;
  font-size: 18px;
  font-family: monospace;
  border-radius: 23px;
}

.pages-rows > .act-pages-rows {
  border: 1px dashed #101a24;
  color: #f3f3f3;
  cursor: pointer;
  background: #059bf0;
}

.pages-rows > li:hover {
  border: 1px dashed #101a24;
  color: #f8f8f8;
  cursor: pointer;
  background: #1fd1a2;
}

.page-row a {
  color: inherit;
}

.pages-rows > li.page-row-in, .pages-rows > li.page-row-in:hover {
  cursor: default;
  border: 1px dashed #101a24;
  color: #f3f3f3;
  background: #059bf0;
}

/*********    المدونة     *********/
input {
  z-index: 1;
  position: relative;
}

.rowdiv {
  color: #cbcbcb;
  min-width: 300px;
  min-height: 75px;
  /*display: initial;*/
  position: relative;
}

label:after {
  content: attr(for);
  position: absolute;
  left: 12px;
  top: -12px;
  color: #607d8b;
  border: 1px dashed #243b51;
  border-bottom: 0;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px 5px 0 0;
  min-width: 80px;
  font-family: monospace;
  line-height: 20px;
  background: #101a24;
}

.btndiv .btn {
  margin-top: 10px;
}

.name-row-radio {
  float: right;
  margin-right: 15px;
  font-size: 16px;
  color: #3888e1;
}

.col-row-radio {
  display: inline-block;
  vertical-align: top;
  margin-right: 16px;
  min-width: 60px;
  direction: rtl;
  background: #2c2c2c;
  border-radius: 20px;
  padding-right: 5px;
  padding-left: 5px;
  color: #b7b7b7;
  cursor: default;
  line-height: 31px;
  height: 30px;
}

.name-col-radio {
  display: inline-block;
  vertical-align: top;
}

.cho-col-radio {
  display: inline-block;
  vertical-align: top;
}

.cho-col-radio > * {
  cursor: pointer;
}

#toolsblog {
  position: fixed;
  width: 35px;
  margin-left: -1px;
}

.btnseditor {
  width: 95%;
  /*        background: #333;*/
  font-size: 0px;
  margin: 3px;
  padding: 0px;
  box-sizing: border-box;
  list-style: none;
  text-align: center;
}

.btnseditor > li, .ul-tool > li {
  min-width: 35px;
  border: 1px solid #bebebe;
  vertical-align: top;
  height: 35px;
  background: #ededed;
  line-height: 45px;
  font-size: 15px;
  color: #212121;
  cursor: pointer;
  border-bottom: 0;
  border-right: 0;
  cursor: pointer;
  border: 1px solid #243b51;
  background: #101a24;
  color: #f5f5f5;
  direction: rtl;
  border-radius: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.btnseditor > li i, .ul-tool > li i {
  cursor: pointer;
}

.ul-tool-top {
  bottom: auto;
  top: 0;
}

.btnseditor > li:hover, .ul-tool > li:hover {
  color: #ededed;
  background: #212121;
  background: #127cf3;
}

.more-ul {
  position: relative;
}

.ul-tool {
  padding: 0;
  list-style: none;
  display: inline-block;
  position: absolute;
  left: 34px;
  bottom: 0px;
  background: #101a24;
  color: #939393;
  min-width: 35px;
  text-align: center;
  /*border: 1px solid #444;*/
  display: none;
  /*top: -1px;*/
}

.more-ul:hover > .ul-tool {
  display: block;
}

.sec-ul {
  background: #101a24;
  color: #cfcfcf;
  border: 0px solid #444;
  margin: 3px;
  height: 25px;
  padding: 0;
  line-height: 36px;
  width: 68px;
}

.ul-tool-2 {
  width: 80px;
  /*right: 59px;*/
}

.ul-tool-2 > li {
  height: 32px;
}

.col-ul {
  margin-top: 2px;
}

.uploadfile {
  background: #101a24;
  color: #fff;
  margin: 5px;
  border: 0px solid #6e6e6e;
  padding: 5px;
}

.selectimgblog {
  width: 35px;
  border: 0px solid #444;
  vertical-align: top;
  height: 27px;
  background: #101a24;
  line-height: 27px;
  font-size: 19px;
  color: #939393;
  cursor: pointer;
  border-bottom: 0px;
  border-right: 0;
}

.selectimgblog:hover {
  color: #fff;
  background: #242424;
}

.htag {
  margin: 0px;
  height: 30px;
  padding-left: 0px;
  padding-right: 0px;
  font-weight: 600;
  font-family: initial;
}

.txtedit {
  margin-top: 5px;
  margin-bottom: 5px;
  border: 0px solid #243b51;
  background: #101a24;
  color: #60778d;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  width: 95%;
  text-align: left;
  /* margin-top: 0; */
  /*min-width: calc(100% - 12px);*/
  max-width: calc(100% - 12px);
  line-height: 40px;
  border-radius: 7px;
  font-size: 18px;
}

.txt-multi {
  border: 0px solid #243b51;
  background: #101a24;
  color: #60778d;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  width: calc(100% - 7px);
  max-width: calc(100% - 7px);
  min-height: 250px;
  resize: vertical;
  margin-top: 5px;
  line-height: 30px;
  border-radius: 7px;
  font-size: 18px;
}

.txtedit:focus, .txt-multi:focus {
  border: 0px solid #059bff;
  box-shadow: 0 0 4px #09f;
  color: #fff;
}

.coder {
  font-family: initial;
  font-size: 18px;
}

.text-editor-box {
  position: relative;
  /* overflow: hidden; */
  margin-bottom: 35px;
}

.txt-editor {
  overflow: hidden;
  padding-left: 0px;
  vertical-align: top;
  box-sizing: content-box;
}

.number-txt-blog {
  position: absolute;
  left: 0;
  width: 40px;
  text-align: center;
  background: #15202b;
  border-left: 0px solid #192734;
  color: #d7d7d7;
  border-top: 1px solid #192734;
  top: 5px;
  overflow: hidden;
  line-height: 20px;
  height: calc(100% - 47px);
  border-right: 1px solid #192734;
  list-style: none;
  padding: 0;
  border-radius: 0 14px 14px 0;
}

.number-txt-blog > li {
  box-shadow: 0px 1px 0px #192734;
  font-size: 15px;
  height: 25px;
  line-height: 25px;
  color: #60778d;
}

.number-txt-blog-source {
  border: 1px solid #fec107;
  background: #FEC107;
  color: #101a24;
}

.number-txt-blog-source > li {
  color: #101a24;
}

.number-txt-blog-source > li {
  box-shadow: 0 1px 0 #ddab15;
}

.bottom-editor-box {
  position: absolute;
  left: 0px;
  bottom: -30px;
  height: 30px;
  line-height: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
}

.item-bottom-editor {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  background: #15202b;
  color: #60778d;
  font-size: 20px;
  line-height: 41px;
  height: 30px;
  border: 1px solid #192734;
  border-radius: 7px;
  margin: 4px;
}

.source-code {
  width: 80px;
  cursor: pointer;
}

.tags-html {
  width: 40px;
  cursor: pointer;
}

.source-code:hover, .source-code-act, .tags-html:hover, .tags-html-act {
  background: #fec107;
  color: #514a4a;
  border: 1px solid #fec107;
}

.bodywritopblog {
  margin-right: 10px;
  margin-left: 35px;
}

.calctopic {
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  vertical-align: top;
  background: #243b51;
  border: 1px solid #243b51;
  border-bottom: 0;
  background: #192734;
  color: #60778d;
  cursor: default;
  margin-bottom: -10px;
  margin-top: 9px;
}

.txt-alt-file {
  background: #fcfcfc;
  border: 1px solid #cfcfcf;
  color: #202020;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
  margin-top: 5px;
}

.btn {
  border-radius: 21px;
  display: inline-block;
  vertical-align: top;
  /*        padding-left: 35px;
  padding-right: 15px;*/
  margin: 10px;
  min-width: 50px;
  box-shadow: 0px 0px 5px #393939;
  border: 0px;
  cursor: pointer;
  min-width: 70px;
  margin-top: 15px;
  margin-bottom: 15px;
  min-height: 35px;
  line-height: 37px;
  font-size: 23px;
  /*font-weight: 600;*/
  min-width: 115px;
  position: relative;
}

.btn:hover, .btn-icon:hover, .btn-gp:hover {
  background: #00bc31;
  color: #fff;
}

.btn-icon {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.btn-icon-up {
  width: 50px;
  height: 30px;
  line-height: 28px;
  font-size: 19px;
}

.btn-gp {
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
  height: 28px;
}

.btn-groups {
  display: inline-block;
  font-size: 0;
  margin: 15px;
}

.box-btn-groups {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  line-height: 27px;
}

.do-btn-groups {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.ch-btn-group {
  width: 60px;
  height: 30px;
  cursor: pointer;
}

.choose-box-btn {
  position: absolute;
  z-index: 1;
  background: #101a24;
  color: #fff;
  border: 1px solid #101a24;
  display: none;
  font-size: 14px;
  line-height: 27px;
  right: 0;
}

.ch-down-group {
  height: 28px;
  line-height: 23px;
  background: #2c8ccd;
  width: 25px;
  font-size: 14px;
  color: #89cefc;
  border-left: 2px solid #89cefc;
}

.ch-btn-group:hover {
  background: #f7dc00;
  color: #101a24;
}

.do-btn-groups:hover > .choose-box-btn {
  display: block;
}

.txt-edite-txt {
  width: calc(100% - 100px);
}

.btn-edite-txt, .btn-delete-txt {
  width: 86px;
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  background: #fec107;
  color: #353131;
  border: 1px dashed #827038;
  line-height: 30px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.btn-delete-txt {
  background: #c30620;
  color: rgba(254, 254, 254, 0.9);
  border: 1px dashed #6e2d2d;
}

.btn-edite-txt:hover, .btn-delete-txt:hover {
  background: #059bff;
  color: #fff;
  border: 1px dashed #101a24;
}

.selecttor {
  border: 0px solid #243b51;
  background: #101a24;
  color: #fff;
  margin-top: 5px;
  height: 40px;
  /*margin-top: 0;*/
  line-height: 45px;
  border-radius: 7px;
  font-size: 21px;
  padding-left: 10px;
  padding-right: 10px;
}

.main-option {
  color: #ffeb3b;
}

.child-option {
  color: #03a9f4;
}

.contblog {
  display: inline-block;
  width: calc(100% - 310px);
  min-width: 215px;
  vertical-align: top;
  min-width: 300px;
}

.sideblog {
  width: 300px;
  display: inline-block;
  vertical-align: top;
  /*   padding-top: 5px;
           border: 1px dashed #454545;
  */ /* background: #1a1a1a; */
}

.sideblog > .txtedit {
  margin: auto;
  margin-bottom: 5px;
  /*width: 100%;*/
}

.sideblog > .txt-multi {
  min-height: 100px;
}

.file-file {
  display: none;
}

.box-blog-file {
  margin-right: 36px;
  margin-top: -70px;
  border: 0 solid #ededed;
  cursor: default;
  width: 0;
  overflow: hidden;
  height: 0;
  position: absolute;
  bottom: -144px;
  height: 290px;
  z-index: -1;
  vertical-align: bottom;
}

.box-blog-file-act {
  width: 300px;
}

.cont-blog-file {
  /* max-height: 100%; */
  width: 100%;
  vertical-align: top;
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 0;
  border: 5px solid #ededed;
  background: #ededed;
  box-sizing: border-box;
}

.head-blog-file {
  max-height: 199px;
  overflow: hidden;
}

.blog-file {
  max-width: 100%;
  vertical-align: top;
  display: inline-block;
  max-height: 200px;
}

.tool-blog-file {
  line-height: 38px;
  height: 35px;
  background: #e4e4e4;
}

.wait-blog-file {
  position: absolute;
  bottom: 0px;
  width: 100%;
  color: #fff;
  background: #059bff;
  height: 30px;
  left: 0;
  display: none;
}

.cont-wait-blog-file {
  position: relative;
}

.cover-icon-file {
  color: #818181;
  height: 80px;
  line-height: 89px;
  font-size: 80px;
}

.cover-icon {
  background: #fff;
}

.act-cover-file {
  color: #13c828;
}

.loader-up-blog {
  height: 30px;
  width: 6px;
  /* box-shadow: 1px 1px 2px #13aa51; */
  background: rgba(244, 244, 244, 0.5);
  right: 0%;
  position: absolute;
  border-top: 3px solid #059bff;
  top: -3px;
  border-bottom: 3px solid #059bff;
  border-radius: 5px;
}

.name-wait-up-blog {
  position: absolute;
  width: 100%;
}

.loader-up-blog-run {
  animation: loader-blog 3s ease alternate infinite;
}

@keyframes loader-blog {
  0% {
    right: 0%;
  }
  100% {
    right: calc(100% - 6px);
  }
}
.box-writer {
  margin-top: 15px;
  margin-bottom: 15px;
}

.link-writer { /* display: inline-block; */
  margin: auto;
}

.user-writer {
  display: inline-flex;
  background: #15202b;
  color: #f7dc00;
  padding: 10px;
  border-radius: 20px;
  border: 2px solid #192734;
  min-width: 88%;
  margin: auto;
}

.img-writer {
  border-radius: 14%;
  margin-right: 15px;
  max-width: 70px;
  border: 2px solid #192734;
}

.info-writer {
  text-align: center;
  display: inline-grid;
  width: 100%;
}

.name-writer {
  font-size: 18px;
}

.data-writer {
  font-size: 13px;
  text-align: left;
  color: #60778d;
}

/*********    البحث      ***********/
.box-search {
  margin-right: 110px;
  border-radius: 20px;
  position: relative;
  width: 35%;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 10px;
}

.search-txt {
  border-radius: 20px;
  padding-left: 35px;
  padding-right: 35px;
  border: 1px dashed #233a4f;
  background: #192734;
  color: #d3d3d3;
  width: 100%;
  height: 35px;
  font-size: 20px;
  line-height: 21px;
}

.searchedit-txt {
  /*        padding-left: 35px;
  */
  padding-right: 35px;
}

.search-icon {
  position: absolute;
  right: 8px;
  top: 7px;
  font-size: 22px;
  color: #009688;
  z-index: 4;
}

.seconds-search {
  position: absolute;
  bottom: -19px;
  left: 15px;
  font-size: 11px;
  color: #212121;
  display: none;
  height: 15px;
  line-height: 17px;
  padding-right: 5px;
  border-radius: 20px;
  padding-left: 5px;
  background: #484848;
}

/*********    معاينة صور     *********/
.previmg {
  margin: auto;
  width: 150px;
  height: 150px;
  line-height: 150px;
  border-radius: 15px;
  border: 0px dashed #243b51;
  background: #101a24;
  color: #192734;
  font-size: 85px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.previmg-1 {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

.previmg-2 {
  width: 300px;
  height: 200px;
  line-height: 200px;
}

.previmg-4 {
  width: calc(100% - 15px);
}

.circle {
  border-radius: 50%;
}

.previmg-big {
  width: 98%;
  height: 350px;
  line-height: 350px;
}

.previmg:hover > .get-previmg {
  z-index: 30;
  position: relative;
  color: #059bff;
}

.get-previmg {
  cursor: pointer;
}

.previmg > .lnil {
  font-size: 70px;
}

.previmg-profile {
  float: right;
  margin-top: -135px;
  margin-right: 25px;
}

.contimgprvcont {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #101a24;
  top: 0;
  left: 0;
  display: none;
}

.imgprevshow {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

.item-checkIn {
  position: relative;
  color: #33db52;
}

.ok_input {
  top: 7px;
  position: absolute;
  left: 3px;
  display: none;
}

.note-row {
  background: #505050;
  /* width: 95%; */
  margin: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid #6e6e6e;
  color: #212121;
  border-radius: 20px;
  line-height: 32px;
  min-height: 32px;
  display: inline-block;
  padding-left: 20px;
  vertical-align: middle;
  color: #ddd;
}

.note-icon {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  color: #393939;
  margin-right: -3px;
  padding: 2px;
  background: #6e6e6e;
  border-radius: 50%;
  width: 30px;
}

.contain-file {
  line-height: 190px;
  border: 1px dashed #333;
  width: 98%;
  margin: auto;
  background: #181818;
  cursor: default;
  color: #333;
}

.iconup-file {
  font-size: 125px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.iconup-file:hover {
  color: #059bff;
}

.active-file {
  border: 1px dashed #01c853;
  background: #111;
  color: #01c853;
}

/************    نافذة الصورة    *************/
.divimg-buy {
  width: 200px;
  display: inline-block;
  height: 120px;
  overflow: hidden;
  position: relative;
}

.img-buy {
  width: 100%;
  height: 100%;
}

.mirror-balance {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  cursor: zoom-in;
  opacity: 0;
}

.mirror-balance:hover {
  opacity: 1;
}

#masterimgfull {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.25);
}

.imaboxpop {
  /* position: relative; */
  /* top: 50%; */
  /* transform: translate(-50%,-50%); */
  /* left: 41%; */
  /* max-width: 90%; */
  /* max-height: 95%; */
  text-align: center;
  vertical-align: middle;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  display: inline-block;
  overflow-y: scroll;
}

.comfullpic {
  cursor: pointer;
  max-width: 97%;
  /* max-height: 90%; */
  border-radius: 2px;
  background: #f6f6f6;
  border: 5px solid #9b9b9b;
  border-radius: 5px;
  box-shadow: 0 0 10px RGBA(0, 0, 0, 0.27);
  vertical-align: text-bottom;
  display: inline-block;
  /* max-height: 500px; */
}

.div-downmiror {
  text-align: center;
  background: #242424;
  border-top: 3px solid #243b51;
  direction: rtl;
}

/*********    Status     *********/
.main-status-box {
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  align-items: center;
  position: relative;
}

.status-box {
  display: inline-block;
  background: #192734;
  font-size: 0;
  padding-left: 5px;
  padding-right: 10px;
  border-radius: 5px;
  line-height: 30px;
  margin-bottom: 10px;
}

.dot-status-box {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background: #516a85;
  border-radius: 50%;
  margin-right: 5px;
}

.name-status-box {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  color: #49617a;
}

.icon-status-box {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  cursor: pointer;
  color: #516a84;
}

.icon-status-box:hover {
  color: #45b1ff;
}

.value-status-box {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  margin-left: 5px;
  margin-right: 5px;
  width: 80px;
  height: 25px;
  line-height: 25px;
}

.box-Clock {
  margin-right: 20px;
  margin-left: 20px;
  display: inline-block;
  background: #192734;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 10px;
  height: 52px;
  float: right;
  position: absolute;
  right: 0;
  top: -12px;
}

.number-Clock {
  font-family: "digital";
  font-size: 31px;
  color: #ffda57;
  line-height: 20px;
}

.item-Clock {
  display: inline-block;
  text-align: center;
  height: 45px;
  /* width: 35px; */
  background: #15202b;
  margin-top: 2px;
  padding: 4px;
  border-radius: 4px;
  padding-top: 5px;
  vertical-align: middle;
  /* margin-bottom: 10px; */
}

.item-Clock-pop {
  background: #009efd;
}

.item-Clock-pop > .number-Clock {
  color: #fff;
}

.dot-number-Clock {
  display: inline-block;
  vertical-align: middle;
  color: #15202b;
}

.name-Clock {
  line-height: 20px;
  color: #516b86;
}

.dot-active {
  color: #47cf73;
}

.dot-stoped {
  color: #ff4d51;
}

.dot-finished {
  color: #fec107;
}

.dot-active-bg {
  background: #47cf73;
}

.dot-stoped-bg {
  background: #ff4d51;
}

.dot-finished-bg {
  background: #fec107;
}

/*********    التذاكر     *********/
/*********     التاجات    *********/
.box-tag-suggest {
  border-top: 0;
  box-sizing: border-box;
  margin-bottom: 4px;
  max-height: 175px;
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 49px;
  border-radius: 7px;
  color: #ccc;
  z-index: 99;
  background: #15202b;
}

.close-tag-suggest {
  font-size: 13px;
  float: right;
  margin: 5px;
  background: #192734;
  padding: 3px;
  border-radius: 34%;
  color: #60778d;
  cursor: pointer;
}

.close-tag-suggest:hover {
  background: #60778d;
  color: #192734;
}

.ul-suggest {
  font-size: 17px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.li-suggest {
  line-height: 28px;
  border: 1px solid #192734;
  padding-right: 15px;
  padding-left: 10px;
  cursor: pointer;
  border-top: 0;
  background: #101a24;
  display: inline-flex;
  width: 100%;
}

.li-suggest:hover {
  border-bottom: 1px solid #f7dc00;
  background: #1b2938;
}

.imgdiv-tag-sug {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 5px;
}

.img-tag-sug {
  width: 100%;
}

.out-li-suggest {
  display: inline-flex;
  background: #f7dc00;
  margin: 3px;
  /* border: 1px solid #212121; */
  border-radius: 20px;
  line-height: 29px;
  height: 30px;
  overflow: hidden;
  direction: rtl;
  color: #192734;
}

.out-icon-tag-sug {
  background: #ff4d51;
  padding-left: 5px;
  padding-right: 5px;
  line-height: 46px;
  height: 40px;
  width: 38px;
  margin-right: 10px;
  color: #fcfcfc;
}

.out-delete-tag-sug {
  margin-right: 2px;
  margin-left: 10px;
  margin-top: 0px;
  color: #a4951c;
  cursor: pointer;
  line-height: 45px;
  height: 27px;
}

.out-delete-tag-sug:hover > .icons {
  color: #ff6767;
  cursor: pointer;
}

.out-ul-suggest {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  direction: ltr;
  text-align: center;
}

/*********   الفاحص    *********/
.row-checking {
  display: flex;
  vertical-align: middle;
  width: 95%;
  margin: auto;
  margin-top: auto;
  margin-top: 10px;
  box-shadow: 0 0 4px #243b51;
  height: 40px;
  line-height: 40px;
  background: #101a24;
  margin-right: 4%;
  border-radius: 4px;
}

.row-checking-act {
  border: 1px solid #fec107;
  background: #fec107;
  color: #232323;
}

.icon-checking {
  width: 50px;
  border-right: 0px solid #243b51;
  text-align: center;
  line-height: 48px;
  color: #243b51;
  cursor: default;
}

.wrong-checking {
  color: #c30620;
}

.ok-checking {
  color: #01c853;
}

.statu-checking {
  border-right: 1px solid #243b51;
  width: 125px;
  padding-right: 5px;
  padding-left: 5px;
  text-align: center;
  color: #243b51;
}

.name-checking {
  width: calc(100% - 200px);
  padding-right: 10px;
  padding-left: 10px;
  text-align: left;
  direction: ltr;
  border-right: 1px solid #243b51;
}

.list-checking {
  color: #ccc;
}

.list-checking li {
  position: relative;
}

.checking-prog, .checking-wait, .checking-done {
  position: absolute;
  right: 1%;
  top: 6px;
}

.checking-prog {
  color: #fec107;
}

.checking-wait {
  color: #243b51;
}

.checking-done {
  color: #059bff;
  color: #243b51;
}

.id-checking {
  padding-left: 10px;
  padding-right: 10px;
  width: 100px;
  text-align: left;
  border-right: 1px solid #243b51;
}

/*********    الجانب المساعد     *********/
.aside-helper {
  width: 320px;
  position: fixed;
  right: 0;
  top: 0px;
  bottom: 0;
  overflow-y: auto;
  background: #192734;
  border-right: 1px dashed #60778d;
  box-shadow: 0 0 5px #243b51;
  margin-right: -325px;
  /* padding: 5px; */
  z-index: 9;
}

.aside-helper-act {
  margin-right: 0;
}

.header-aside-helper {
  background: #15202b;
  height: 50px;
  border-bottom: 1px solid #243b51;
  text-align: left;
}

.close-aside-helper {
  color: #243b51;
  margin: 12px;
  font-size: 21px;
  cursor: pointer;
  vertical-align: middle;
}

.close-aside-helper:hover {
  color: #c30620;
}

.word-aside-helper {
  color: #60778d;
  line-height: 20px;
  display: inline-block;
  vertical-align: middle;
  background: #192734;
  line-height: 28px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 2px;
  cursor: default;
}

.item-aside-helper {
  padding: 5px;
  text-align: center;
}

/*********     Checkbox    *********/
.cbx {
  position: relative;
  display: block;
  float: left;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background-color: #606062;
  background-image: linear-gradient(#474749, #606062);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
}

.cbx svg {
  position: absolute;
  top: 3px;
  left: 3px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transform: translate3d(0, 0, 0);
}

.rdo {
  position: relative;
  display: block;
  /* float: left; */
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background-color: #00bcd4;
  background-image: linear-gradient(#405f7b, #3e5263);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
}

.rdo:after {
  content: "";
  position: absolute;
  display: block;
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: scale(0);
}

.checkbox {
  margin: auto;
  user-select: none;
}

.checkbox label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  cursor: pointer;
  width: 85px;
  text-align: right;
}

.checkbox input[type=checkbox],
.checkbox input[type=radio] {
  position: absolute;
  opacity: 0;
}

.checkbox input[type=radio]:checked + .rdo {
  background-color: #606062;
  background-image: linear-gradient(#059bff, #059bff);
}

.checkbox input[type=radio]:checked + .rdo:after {
  opacity: 1;
  transform: scale(1);
  transition: all 0.15s ease;
}

.checkbox input[type=checkbox]:checked + .cbx {
  background-color: #606062;
  background-image: linear-gradient(#059bff, #059bff);
}

.checkbox input[type=checkbox]:checked + .cbx svg {
  stroke-dashoffset: 0;
  transition: all 0.15s ease;
}

/********** صندوق التنبيه **********/
.box-alert {
  position: fixed;
  left: 20px;
  bottom: -350px;
  background: #1e1e1e;
  width: 300px;
  /*! height: 85px; */
  box-shadow: 0 0 5px #101a24;
  border-radius: 5px;
  overflow: hidden;
  border: 1px dashed #505050;
  /*! border: 2px solid #101a24; */
  border-right: 0;
  z-index: 999999;
}

.head-box-alert {
  text-align: right;
  display: flex;
  direction: rtl;
  line-height: 30px;
}

.loading-box-alert {
  font-size: 27px;
}

.iconh-box-alert {
  background: rgba(0, 0, 0, 0.2);
  width: 30px;
  text-align: center;
  margin-left: 5px;
  line-height: 30px;
  cursor: pointer;
}

.body-box-alert {
  display: flex;
  text-align: right;
  direction: rtl;
}

.icon-box-alert {
  height: 70px;
  width: 50px;
  line-height: 74px;
  text-align: left;
  margin-left: 0px;
  border-radius: 12px;
  margin-right: -18px;
  padding-left: 2px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.content-box-alert {
  color: #fff;
  line-height: 25px;
  padding: 10px;
  background: #242424;
  margin: 5px;
  border: 1px dashed #606060;
  font-size: 13px;
  width: 100%;
}

.iconing-box-alert {
  font-size: 30px;
}

.loading-box-alert {
  display: none;
}

.iconh-box-alert:hover {
  background: #353535;
}

.act-box-alert {
  bottom: 20px;
}

.green-alert .in-box-alert {
  border-right: 5px solid #01c853;
}

.green-alert .head-box-alert {
  background: #01c853;
  color: #f0f0f0;
}

.green-alert .icon-box-alert {
  background: #01c864;
  border: 2px solid #01c853;
  color: rgba(255, 255, 255, 0.85);
}

.smawy-alert .in-box-alert {
  border-right: 5px solid #059bff;
}

.smawy-alert .head-box-alert {
  background: #059bff;
  color: #f0f0f0;
}

.smawy-alert .icon-box-alert {
  background: #059bff;
  border: 2px solid #059bff;
  color: rgba(255, 255, 255, 0.85);
}

.red-alert .in-box-alert {
  border-right: 5px solid #c30620;
}

.red-alert .head-box-alert {
  background: #c30620;
  color: #f0f0f0;
}

.red-alert .icon-box-alert {
  background: #c30620;
  border: 2px solid #c30620;
  color: rgba(255, 255, 255, 0.85);
}

.yellow-alert .in-box-alert {
  border-right: 5px solid #fec107;
}

.yellow-alert .head-box-alert {
  background: #fec107;
  color: #2c2c2c;
}

.yellow-alert .icon-box-alert {
  background: #fec107;
  border: 2px solid #fec107;
  color: rgba(44, 44, 44, 0.85);
}

/********** عرض احد البينات **********/
.data-show {
  text-align: right;
  border: 1px dashed #474747;
  /*! padding: 5px; */
  margin: 5px;
  background: rgba(14, 14, 14, 0.3);
  border-radius: 2px;
}

.header-show {
  border-bottom: 1px dashed #474747;
  background: #141414;
  padding: 5px;
  color: #ccc;
}

.content-show {
  color: #c2c2c2;
  padding: 10px;
}

/*********    الصناديق     *********/
.tab-boxs {
  display: none;
}

.tabs-boxs {
  margin-top: -4px;
}

.tab-boxs-defualt {
  display: block;
}

.head-boxs {
  height: 40px;
  /*        border-bottom: 2px solid #243b51;*/
  position: relative;
  /* background: #eff3f5; */
  padding-top: 5px;
  overflow: hidden;
  text-align: left;
  padding-right: 8px;
  padding-left: 8px;
}

.item-btn-boxs {
  display: inline-block;
  vertical-align: top;
  /* background: #f9f9f9; */
  width: 130px;
  height: 35px;
  font-size: 18px;
  text-align: center;
  font-size: 18px;
  line-height: 30px;
  /* border-bottom: 1px solid #915fa8; */
  color: #b3b3b3;
  position: relative;
}

.btn-boxs {
  background-color: #101a24;
  border: 1px solid #243b51;
  border-radius: 8px 8px 0 0;
  bottom: 0;
  content: "";
  position: absolute;
  top: 0px;
  transform: perspective(14px) rotateX(6deg);
  /* transform-origin: bottom left; */
  width: 100%;
  margin-left: 10px;
  line-height: 38px;
  color: #fff;
  font-weight: 500;
  /* font-style: italic; */
  cursor: pointer;
  overflow: hidden;
  font-size: 17px;
}

.btn-boxs:hover, .act-btn-boxs {
  background: #059BFF;
  color: #F9F9F9;
  border: 1px solid #059bff;
}

.iframe-html {
  width: 100%;
  border: 0;
  height: 450px;
  border: 2px dashed #636363;
  border-radius: 3px;
  box-shadow: 0 0 6px #000;
}

/*********         *********/
/*********         *********/
/*********         *********/
/*********         *********/
/*********         *********/
/*********         *********/
/*********         *********/
/*********     Seo    *********/
.url-sitmap {
  background: #121212;
  border: 1px solid #243b51;
  width: 350px;
  margin: auto;
  color: #00901b;
}

.url-sitmap:hover {
  color: #CF4610;
}

/*.urlsitmap {
    width: 95%;
    border: 1px solid #454545;
    margin: auto;
}*/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/********** app  **********/
.loader-app {
  background: #15202b;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 9999999999;
  text-align: center;
  display: flex;
  width: 100%;
  height: 100%;
}

.name-loader-app {
  color: #2f4a64;
  font-size: 30px;
  height: 40px;
}

.container-loader-app {
  width: 310px;
  margin: auto;
  height: 310px;
}

.logo-loader-app {
  width: 150px;
}

.progress-loader-app {
  /* margin-top: 25px; */
  height: 80px;
}

.statue-loader-app {
  font-size: 30px;
  color: #6789ae;
}

.bg-triangle {
  position: fixed;
  opacity: 0.1;
  z-index: -1;
  left: 0px;
  background-image: url("/Pic/Svg/Dark/Subtle-Prism.svg");
  background-size: 100% 97%;
  right: 0;
  bottom: 0;
  top: 0;
  background-position: center;
  background-repeat: no-repeat;
}

/*/////////////-----  loader  -----////////////*/
.cover-loader {
  position: absolute;
  left: 0;
  right: 0;
  /* height: 100%; */
  bottom: 0;
  /* margin-bottom: -500px; */
  width: 100%;
  background: #192734;
  height: 0;
  overflow: hidden;
  z-index: 99;
}

.cover-loaderPluse {
  margin-bottom: -5000px;
}

.show-cover-loader {
  /*margin-bottom: 0px;*/
  top: 0px;
  height: auto;
}

.loader {
  display: flex;
}

.loader__ball:not(:first-of-type) {
  margin-left: 0.5em;
}

.loader__ball {
  --move-distance: 1em;
  --move-distance-half: calc(var(--move-distance) / 2);
  content: "";
  display: block;
  width: 4px;
  height: 26px;
  border-radius: 1em;
  margin-top: var(--move-distance-half);
  background-color: #e8e8e8;
  background-color: #ffda57;
  /* opacity: 0.8; */
  animation: bounce 600ms linear infinite;
}

.loader__ball:nth-child(2n) {
  animation-delay: 200ms;
}

.loader__ball:nth-child(3n) {
  animation-delay: 400ms;
}

@keyframes bounce {
  0% {
    margin-top: var(--move-distance-half);
  }
  25% {
    margin-top: 0em;
  }
  75% {
    margin-top: var(--move-distance);
  }
  100% {
    margin-top: var(--move-distance-half);
  }
}
/* OTHER */
/** {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }*/
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #fff; */
  color: #192734;
}

/*/////////////----- table   -----////////////*/
table {
  width: 100%;
  color: #ececec;
  padding-bottom: 25px;
  border-collapse: collapse;
  margin: auto;
  margin-bottom: auto;
  /*! border: 3px solid #f7f7f7; */
  margin-bottom: 30px;
  border-radius: 11px;
  overflow: hidden;
  /*! border-bottom: 0px; */
  background: #101a24;
  overflow: hidden;
  text-align: center;
}

tr {
  /* box-shadow: 0 0 0px 32px #101a24 inset; */
  border-radius: 7px;
  padding: 7px;
  line-height: 50px;
  border-bottom: 1px solid #15202b;
}

tr:hover {
  box-shadow: 0 0 0px 70px #192734 inset;
}

tr.active-tr, tr:hover.active-tr {
  background: #f7dc00;
  color: #192734;
  box-shadow: 0 0 0px 70px #f7dc00 inset;
  cursor: default;
}

thead {
  text-align: center;
  border-bottom: 2px solid #4ab01b;
  background: #192734;
}

tbody {
  margin-top: 16px;
}

.img-td {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  background-image: url(https://media.guinrank.com/Pic/Country/United-States.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  box-shadow: 0 0 5px #192734;
  margin-left: 5px;
  margin: auto;
}

d {
  min-width: 50px;
}

.name-td {
  line-height: 20px;
}

.opcite-td {
  font-size: 14px;
  line-height: 20px;
  color: #8197ac;
}

.icon-go-td {
  margin-right: 5px;
  vertical-align: middle;
  color: #19dd25;
}

.icon-td:hover {
  color: #5ed9ff;
}

.copy-link-site {
  vertical-align: middle;
  font-size: 22px;
}

.copy-link-site:hover {
  color: #f7dc00;
}

.changedAct {
  animation: myfirst 2s 1;
}

@keyframes myfirst {
  0% {
    color: #0ef267;
  }
  100% {
    color: #0ef267;
  }
}
.folder-icon-td {
  font-size: 25px;
  line-height: 60px;
  color: #ffba35;
}

/**********   **********/
.block-box {
  width: 95%;
  margin: auto;
  margin-bottom: 40px;
}

.header-box {
  width: 98%;
  margin: auto;
  margin-bottom: 5px;
  margin-top: 10px;
  min-height: 50px;
}

.txt-text {
  background: #101a24;
  color: #2d9afb;
  border: 0;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  border-radius: 4px;
  /*margin-bottom: 20px;*/
  font-size: 22px;
  min-height: 300px;
  min-height: 300px;
  min-width: 100%;
  max-width: 100%;
}

.txt-input {
  width: 100%;
  margin: auto;
  background: #000;
  border: 0;
  height: 45px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 10px;
  background: #101a24;
  color: #2d9afb;
  font-size: 19px;
  display: inline-block;
}

.txt-json {
  font-family: initial;
}

.raw-btn {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.btn-creat-box {
  background: #f7dc00;
  display: inline-block;
  padding: 5px;
  border-radius: 4px;
  color: #15202c;
  line-height: 28px;
  height: 35px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 17px;
  cursor: pointer;
}

.btn-creat-box:hover {
  background: #5ed9ff;
  color: #15202c;
  box-shadow: 0 0 4px #5ed9ff;
}

.icon-bside {
  font-size: 24px;
  line-height: 30px;
  vertical-align: top;
  display: inline-block;
  margin-top: 5px;
  left: 5px;
  opacity: 0.5;
}

.root-click {
  color: #ddd;
  float: left;
  font-size: 20px;
  display: flex;
  direction: ltr;
  font-size: 20px;
}

.backto-main {
  font-size: 30px;
  color: #ffde2b;
  /* margin: 1%; */
  display: inline-block;
  cursor: pointer;
  margin-right: 5px;
  line-height: 20px;
}

.backto-main:hover {
  color: #5ed9ff;
}

.item-Cat {
  cursor: pointer;
}

.item-Cat .icon-Cat {
  font-size: 75px;
  line-height: 160px;
  color: #3cb7bd;
}

.item-Cat .name-Cat {
  font-size: 25px;
  color: #fff;
}

.item-Cat:hover {
  background: #f7dc00;
}

.item-Cat:hover .icon-Cat {
  color: #15202c;
}

.item-Cat:hover .name-Cat {
  color: #15202c;
}

.ifram-item {
  margin: 0;
  padding: 0;
  border: 0;
  border: 1px dashed #878787;
}

.iframe-auto {
  width: 100%;
}

/**********   **********/
.footer-console {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #101a24;
  border-top: 1px solid #5ed9ff;
}

.console {
  background: #f7dc00;
  box-shadow: 0 0 5px #245bf7;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  margin: 15px;
  color: #101a24;
  font-size: 20px;
  line-height: 36px;
  height: 30px;
  margin-top: 5px;
}

/**********   **********/
.split-div {
  font-size: 0;
  display: flex;
  min-height: 35px;
}

.item-side-split {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  font-size: initial;
  /* background: #fbfbfb; */
}

/**********   **********/
.box-select {
  position: relative;
  width: 150px;
  /* margin: 10px; */
  /* margin-top: 20px; */
  margin-top: 4px;
  border: 1px solid #243b51;
  border-radius: 4px;
}

.item-selected {
  background: #192734;
  display: inline-block;
  /* width: 150px; */
  height: 30px;
  line-height: 29px;
  padding-left: 15px;
  padding-right: 10px;
  color: #7764e1;
  border-radius: 5px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  padding-right: 0px;
  overflow: hidden;
}

.item-selected-border {
  color: #f7f7f7;
  box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #243b51;
}

.box-items-select {
  width: 100%;
  position: absolute;
  z-index: 75;
  background: #15202b;
  margin-top: 0px;
  box-shadow: 0 0 15px 0 #243b51;
  border-radius: 0px 0px 5px 5px;
  /*overflow: hidden;*/
  display: none;
}

.box-select:hover > .box-items-select {
  display: inline-block;
}

.keep-fix-select-ltr {
  position: absolute;
  left: 0px;
  width: 50px;
  height: 15px;
  /* background: #ccc; */
  top: -12px;
  z-index: 56;
}

.content-items-select {
  max-height: 200px;
  overflow-y: auto;
}

.ul-box-select {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 5px;
  color: #fff;
  line-height: 25px;
}

.ul-box-select li {
  border-bottom: 1px solid #192734;
  padding-left: 5px;
  padding-right: 4px;
}

.icon-select {
  display: inline-block;
  vertical-align: top;
  opacity: 0;
}

.name-select {
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
}

.ico-sellect {
  font-size: 14px;
  /* color: #ccc; */
}

.row-item-select {
  display: flex;
  cursor: pointer;
  border-radius: 5px;
  color: #dfdfdf;
  padding-left: 5px;
  /*padding-right: 5px;*/
  /*! margin-top: 4px; */
  /*margin-bottom: 4px;*/
  line-height: 28px;
}

.row-item-select:hover .icon-select {
  opacity: 1;
}

.item-select:hover {
  background: #ffda57;
  box-shadow: 0 0 5px #ffda57;
  color: #15202b;
}

.item-select {
  cursor: pointer;
}

.item-select-act, .item-select-act:hover {
  background: #1380ce;
  box-shadow: 0 0 5px #1380ce;
  color: #fff;
  cursor: default;
  font-weight: bold;
}

.item-select-act > .icon-select {
  opacity: 1;
}

.selected-icon {
  width: 30px;
  background: #243b51;
  line-height: 41px;
  text-align: center;
  border-left: 1px solid #243b51;
  color: #ccc;
}

.selected-name {
  width: calc(100% - 25px);
  padding-left: 5px;
  padding-right: 5px;
  border-right: 1px solid #243b51;
}

.from-lan-to {
  float: right;
  font-size: 24px;
  color: #e9e9e9;
  cursor: default;
  margin-top: -45px;
  margin-right: -17px;
}

.from-lan-to .iconsO {
  font-size: 34px;
}

.title-select {
  border: 1px solid #ededed;
  border-bottom: 0;
  height: 16px;
  border-radius: 5px 5px 0px 0px;
  width: calc(100% - 6px);
  margin: auto;
}

.name-title-select {
  background: #f8f8f8;
  display: inline-block;
  margin-top: -11px;
  margin-bottom: 5px;
  position: absolute;
  margin-left: 10px;
  color: #ccc;
  cursor: default;
}

/**********   **********/
.header-tabs-box {
  background: #192734;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 4px;
}

.ul-list-btn-tabs {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
}

.li-list-btn-tabs {
  line-height: 40px;
  color: #ccc;
  display: flex;
  align-items: center;
  padding-right: 10px;
  padding-left: 10px;
  border-bottom: 1px solid #192734;
  cursor: pointer;
}

.icon-btn-tabs {
  font-size: 29px;
  line-height: 40px;
}

.li-list-btn-tabs:hover, .act-btn-tabs {
  color: #f7dc00;
  border-bottom: 1px solid #5ed9ff;
}

.name-btn-tabs {
  font-size: 19px;
}

/********** Cards  **********/
.scroll-overview {
  max-height: 425px;
  overflow-y: auto;
}

.items-overview {
  display: flex;
}

.icon-item-overview {
  width: 80px;
  text-align: center;
  line-height: 30px;
}

.icon-item-overview {
  margin-top: 6px;
  color: #516b86;
}

.data-item-overview {
  width: calc(100% - 80px);
  text-align: center;
  line-height: 38px;
}

.num-item-overview {
  font-size: 30px;
  line-height: 56px;
  color: #47cf73;
}

.num-item-overview .fasla-overview {
  font-size: 25px;
  font-family: fantasy;
}

.numsm-item-overview {
  line-height: 15px;
  color: #516b86;
}

.numsm-item-overview .fasla-overview {
  font-size: 25px;
  font-family: fantasy;
}

/**********   **********/
/* أنماط مشتركة لجميع الكروت (مستمدة من التصميم السابق) */
.card {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  background: #192734;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(21, 32, 43, 0.5);
  padding: 15px;
  direction: rtl;
  font-family: "abel-regular", "ge ss unique light";
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #15202b;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid #243b51;
}

.card-title {
  font-size: 24px;
  font-weight: 600;
  color: #f7dc00;
}

.card-id {
  font-size: 16px;
  background: #059bff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 15px;
}

.card-body {
  padding: 15px;
}

.card-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed #243b51;
  font-size: 16px;
  color: #ccc;
}

.card-row:last-child {
  border-bottom: none;
}

.card-label {
  width: 50%;
  font-weight: 500;
  color: #d7d7d7;
}

.card-value {
  width: 50%;
  text-align: left;
  color: #fff;
}

.card-value.focus-green {
  background: #47cf73;
  color: #fff;
  padding: 2px 10px;
  border-radius: 15px;
}

.card-value.focus-yellow {
  background: #fec107;
  color: #192734;
  padding: 2px 10px;
  border-radius: 15px;
}

.card-value.focus-smawy {
  background: #45b1ff;
  color: #fff;
  padding: 2px 10px;
  border-radius: 15px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 15px;
}

.card-btn {
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.card-btn-edit {
  background: #f7dc00;
  color: #192734;
}

.card-btn-edit:hover {
  background: #5ed9ff;
  box-shadow: 0 0 5px #5ed9ff;
}

.card-btn-delete {
  background: #c30620;
  color: #fff;
}

.card-btn-delete:hover {
  background: #059bff;
  box-shadow: 0 0 5px #059bff;
}

.no-data {
  text-align: center;
  color: #ff4d51;
  font-size: 18px;
  margin: 20px;
}

/* أنماط إضافية لقوائم مثل Invoices و Tickets */
.list-item {
  background: #15202b;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #243b51;
}

.list-item-header {
  font-weight: 600;
  color: #f7dc00;
  margin-bottom: 5px;
}

/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
/**********   **********/
.offer-card {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  background: #192734;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(21, 32, 43, 0.5);
  padding: 15px;
  direction: rtl;
  font-family: "abel-regular", "ge ss unique light";
}

.offer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #15202b;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid #243b51;
}

.offer-title {
  font-size: 24px;
  font-weight: 600;
  color: #f7dc00;
}

.offer-id {
  font-size: 16px;
  background: #059bff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 15px;
}

.offer-body {
  padding: 15px;
}

.offer-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed #243b51;
  font-size: 16px;
  color: #ccc;
}

.offer-row:last-child {
  border-bottom: none;
}

.offer-label {
  width: 50%;
  font-weight: 500;
  color: #d7d7d7;
}

.offer-value {
  width: 50%;
  text-align: left;
  color: #fff;
}

.offer-value.focus-green {
  background: #47cf73;
  color: #fff;
  padding: 2px 10px;
  border-radius: 15px;
}

.offer-value.focus-yellow {
  background: #fec107;
  color: #192734;
  padding: 2px 10px;
  border-radius: 15px;
}

.offer-value.focus-smawy {
  background: #45b1ff;
  color: #fff;
  padding: 2px 10px;
  border-radius: 15px;
}

.offer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 15px;
}

.offer-btn {
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.offer-btn-edit {
  background: #f7dc00;
  color: #192734;
}

.offer-btn-edit:hover {
  background: #5ed9ff;
  box-shadow: 0 0 5px #5ed9ff;
}

.offer-btn-delete {
  background: #c30620;
  color: #fff;
}

.offer-btn-delete:hover {
  background: #059bff;
  box-shadow: 0 0 5px #059bff;
}

.no-offer {
  text-align: center;
  color: #ff4d51;
  font-size: 18px;
  margin: 20px;
}

/*********   خلفيات الزرائر     *********/
.td-red {
  background: #ff4d51;
  color: #fff;
  box-shadow: 0 0 4px #ff4d51;
}

.td-green {
  background: #47CF73;
  color: #fff;
  box-shadow: 0 0 4px #47cf73;
}

.td-yellow {
  background: #fec107;
  color: #6f6262;
  color: #fff;
  box-shadow: 0 0 4px #fec107;
}

.td-smawy {
  background: #45b1ff;
  color: #fff;
  box-shadow: 0 0 4px #45b1ff;
}

.td-bnfsgy {
  background: #7764e1;
  color: #fff;
  box-shadow: 0 0 4px #7764e1;
}

.col-red {
  /* color: #ff4d51; */
}

.col-green {
  /* color: #47CF73; */
}

.col-yellow {
  /* color: #fec107; */
}

.col-smawy {
  /* color: #45b1ff; */
}

.col-bnfsgy {
  color: #5c47cf;
}

/*.bg-bnfsgy {
    border: 1px solid #7764e1;
    color: #fff;
    background: #7764e1;
    box-shadow: 0 0 5px #7764e1;
}

.bg-red {
    background: #ff6060;
    box-shadow: 0 0 5px #ff6060;
    color: #fff;
    border: 1px solid #ff6060;
}

.bg-blue {
    background: #60a0ff;
    box-shadow: 0 0 5px #60a0ff;
    color: #fff;
    border: 1px solid #60a0ff;
}

.bg-green {
    background: #22ea72;
    box-shadow: 0 0 5px #22ea72;
    color: #fff;
    border: 1px solid #22ea72;
}

.bg-yellow {
    background: #ffcb18;
    box-shadow: 0 0 5px #ffcb18;
    color: #fff;
    border: 1px solid #ffcb18;
}*/
.btn-base:hover {
  border: 1px dashed #ff7f50;
  color: #fff;
  background: #ff7f50;
  box-shadow: 0 0 5px #ff7f50;
  cursor: pointer;
}

/*********    زرائر تشغيل وايقاف     *********/
.item-side-split {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  font-size: initial;
  /* background: #fbfbfb; */
}

.split-div {
  font-size: 0;
  display: flex;
  min-height: 35px;
  /*background: #f8f8f8;*/
}

.box-on-of {
  direction: ltr;
  text-align: left;
  border: 1px solid #192734;
  border-radius: 20px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  /* margin-bottom: 8px; */
  /* margin-top: 7px; */
  /* line-height: 30px; */
  position: absolute;
  top: 0;
  right: 0;
}

.name-on-off {
  display: inline-block;
  vertical-align: middle;
  padding-right: 5px;
  background: #192734;
  padding-left: 10px;
  line-height: 30px;
  height: 30px;
  color: #768998;
  font-size: 14px;
}

.btn-on-of {
  width: 32px;
  background: #243b51;
  /* border: 2px solid #e4e4e4; */
  height: 17px;
  border-radius: 20px;
  margin: 5px;
  /* overflow: hidden; */
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 18px;
  /* margin-top: 10px; */
  margin-top: 4px;
  margin-left: 10px;
}

.cont-btn-on-of {
  background: #243b51;
  display: inline-block;
  border-radius: 20px;
  height: 17px;
  margin: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  /* border: 1px solid #fff; */
  /* box-shadow: 0 0 3px #46ea76; */
}

.act-btn-on-of {
  width: 17px;
  height: 17px;
  background: #8a9eac;
  border-radius: 22px;
  left: 0px;
  margin-top: 0px;
  /* box-shadow: 0 0 3px #ffda57; */
  margin-right: -5px;
  cursor: pointer;
  z-index: 2;
  position: relative;
  margin-left: -3px;
}

.act-btn-on-of:hover {
  box-shadow: 0 0 4px #818181;
  background: #45b1ff;
}

.onact {
  margin-left: 17px;
  background: #47cf73;
  /* box-shadow: 0 0 3px #46ea76; */
  margin-right: -5px;
}

.offonact {
  float: right;
  margin-top: 0px;
  margin-right: 7px;
  color: #fff;
}

.ononact {
  float: left;
  margin-top: -22px;
  margin-left: 5px;
  color: #fff;
  font-size: 14px;
}

/*********         *********/
.box-tarf {
  display: flex;
  line-height: 45px;
  border-bottom: 1px dashed #23394f;
  padding-left: 10px;
  padding-right: 10px;
}

.box-tarf:hover {
  border-bottom: 1px dashed #059bff;
}

.first-tarf {
  width: 50%;
  text-align: left;
  padding-right: 5px;
}

.tow-tarf {
  width: 50%;
  text-align: right;
}

/*المقاسات*/
.click {
  cursor: pointer;
}

.clickOf {
  cursor: default;
}

.parent {
  position: relative;
}

.Version {
  position: absolute;
  bottom: -35px;
  left: 14px;
  color: #dbdbdb;
  font-size: 12px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.div-0 {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  min-width: 100%;
}

.div-1 {
  display: inline-block;
  vertical-align: top;
  width: calc(25% - (2.5% + 2px));
  /*min-width: calc(300px - 15px);*/
}

.div-2 {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - (2.5% + 2px));
  /*min-width: calc(300px - 15px);*/
}

.div-3 {
  width: calc(75% - (2.5% + 2px));
  /*min-width: calc(300px - 15px);*/
  vertical-align: top;
  display: inline-block;
}

.div-4 {
  vertical-align: top;
  display: inline-block;
  width: calc(100% - 12px);
  /*min-width: calc(300px - 15px);*/
}

.div-flex {
  display: flex;
  align-items: center;
  margin: auto;
}

.ltr {
  direction: ltr;
  text-align: left;
}

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

.ctc {
  direction: rtl;
  text-align: center;
}

.center {
  text-align: center;
}

.none {
  display: none;
}