.layout {z-index: 1;}
.layout .header {display: flex;align-items: center;padding: 20px;}
.layout .content {padding: 0;display: flex;flex-direction: column;}
.layout .footer {text-align: center;margin-top: auto;margin-bottom: 20px;padding: 20px;}

.sidebar {color: #818896;overflow-x: hidden !important;position: relative;}
.sidebar::-webkit-scrollbar-thumb {border-radius: 4px;}
.sidebar:hover::-webkit-scrollbar-thumb {background-color: #4a6585;}
.sidebar::-webkit-scrollbar {width: 6px;background-color: #0c1e35;}
.sidebar .image-wrapper {overflow: hidden;position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;display: none;}
.sidebar .image-wrapper > img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.sidebar.has-bg-image .image-wrapper {display: block;}
.sidebar .sidebar-layout {height: auto;min-height: 100%;display: flex;flex-direction: column;position: relative;background-color: #212D3B;z-index: 2;}
.sidebar .sidebar-layout .sidebar-header {height: 100px;min-height: 100px;display: flex;align-items: center;padding: 0 20px;}
.sidebar .sidebar-layout .sidebar-header > span {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.sidebar .sidebar-layout .sidebar-content {flex-grow: 1;padding: 10px 0;}
.sidebar .sidebar-layout .sidebar-footer {height: 230px;min-height: 230px;display: flex;align-items: center;padding: 0 20px;}
.sidebar .sidebar-layout .sidebar-footer > span {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

@keyframes swing {0%, 30%, 50%, 70%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
}

.layout .sidebar .menu>ul {list-style-type: none;padding: 0 0 0 20px;margin: 0;}
.layout .sidebar .menu .menu-header {font-weight: 600;padding: 10px 25px 10px 5px;font-size: 0.8em;letter-spacing: 2px;transition: opacity 0.3s;opacity: 0.5;}
.layout .sidebar .menu .menu-item a {display: flex;align-items: center;height: 46px;padding: 0 20px 0 0;color: #818896;position:relative;}
.layout .sidebar .menu .menu-item a .menu-icon {font-size: 1.2rem;width: 35px;min-width: 35px;height: 35px;line-height: 35px;text-align: center;display: inline-block;margin-left:10px;margin-right: 10px;border-radius: 2px;transition: color 0.3s;}
.layout .sidebar .menu .menu-item a .menu-icon.circle{font-size:8px;min-width:auto;width:auto;margin-left:auto;margin-right:8px}
.layout .sidebar .menu .menu-item a .menu-icon i {display: inline-block;}
.layout .sidebar .menu .menu-item a .menu-title {font-size: 0.9em;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex-grow: 1;transition: color 0.3s;font-weight:600}
.layout .sidebar .menu .menu-item a .menu-prefix,
.layout .sidebar .menu .menu-item a .menu-suffix {display: inline-block;padding: 5px;opacity: 1;transition: opacity 0.3s;}
.layout .sidebar .menu .menu-item a:hover .menu-title,
.layout .sidebar .menu .menu-item a:hover .menu-icon {color: #dee2ec;}
/*.layout .sidebar .menu .menu-item a:hover .menu-icon i {animation: swing ease-in-out 0.5s 1 alternate;}*/
.layout .sidebar .menu .menu-item a:hover::after {border-color: #dee2ec !important;}
.layout .sidebar .menu .menu-item > .sidebar-submenu a{height:34px}
.layout .sidebar .menu .menu-item.sub-menu {position: relative;}
.layout .sidebar .menu .menu-item.sub-menu > a::after {content: "";transition: transform 0.3s;border-right: 2px solid currentcolor;border-bottom: 2px solid currentcolor;width: 5px;height: 5px;transform: rotate(-45deg);}
.layout .sidebar .menu .menu-item.sub-menu > .sub-menu-list {padding-left: 20px;display: none;overflow: hidden;z-index: 999;}
.layout .sidebar .menu > ul >.menu-item.sub-menu.open > a {color: #dee2ec;position:relative;color:#333}
.layout .sidebar .menu > ul >.menu-item.sub-menu.open > a:before {content:'';position:absolute;width:100%;height:100%;background:#FAFAFA;z-index:-1;border-radius:22px 0 0 0}
.layout .sidebar .menu > ul >.menu-item.sub-menu.open > a::after {transform: rotate(45deg);}
.layout .sidebar.collapsed .menu > ul >.menu-item.sub-menu.open > a:before{border-radius:22px 0 0 22px}

.layout .sidebar .menu > ul >.menu-item.open > a:hover .menu-title,
.layout .sidebar .menu > ul >.menu-item.open > a:hover .menu-icon{color: #333;}
.layout .sidebar .menu > ul >.menu-item.open > a:hover:after {border-color: #333;}

.layout .sidebar .menu > ul >.menu-item.active > a .menu-title,
.layout .sidebar .menu > ul >.menu-item.active > a .menu-icon{color: #333; z-index: 1;}
.layout .sidebar .menu > ul >.menu-item.active > a::after {border-color: #333;}

{content: "\f111";font-family: "Font Awesome 6 Free";font-weight: 400;font-style: normal;display: inline-block;text-align: center;text-decoration: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;margin-right: 10px;font-size: 8px}

.layout .sidebar .menu .menu-item.active > a:before {content:'';position:absolute;width:100%;height:100%;background:#84bdff !important;z-index:0;border-radius:22px 0 0 22px}

.layout .sidebar .menu > ul > .sub-menu > .sub-menu-list {background-color: #0b1a2c;}
.layout .sidebar .menu.icon-shape-circle .menu-item a .menu-icon, .layout .sidebar .menu.icon-shape-rounded .menu-item a .menu-icon, .layout .sidebar .menu.icon-shape-square .menu-item a .menu-icon {background-color: #0b1a2c;}
.layout .sidebar .menu.icon-shape-circle .menu-item a .menu-icon {border-radius: 50%;}
.layout .sidebar .menu.icon-shape-rounded .menu-item a .menu-icon {border-radius: 4px;}
.layout .sidebar .menu.icon-shape-square .menu-item a .menu-icon {border-radius: 0;}
.layout .sidebar:not(.collapsed) .menu > ul > .menu-item.sub-menu > .sub-menu-list {visibility: visible !important;position: static !important;transform: translate(0, 0) !important;}
.layout .sidebar.collapsed .menu > ul > .menu-header {opacity: 0;}
.layout .sidebar.collapsed .menu > ul > .menu-item > a .menu-prefix,
.layout .sidebar.collapsed .menu > ul > .menu-item > a .menu-suffix {opacity: 0;}
.layout .sidebar.collapsed .menu > ul > .menu-item.sub-menu > a::after {content: "";width: 5px;height: 5px;background-color: currentcolor;border-radius: 50%;display: inline-block;position: absolute;right: 10px;top: 50%;border: none;transform: translateY(-50%);}
.layout .sidebar.collapsed .menu > ul > .menu-item.sub-menu > a:hover::after {background-color: #dee2ec;}
.layout .sidebar.collapsed .menu > ul > .menu-item.sub-menu > .sub-menu-list {transition: none !important;width: 200px;margin-left: 3px !important;border-radius: 4px;display: block !important;}
.layout .sidebar.collapsed .menu > ul > .menu-item.active > a::after {background-color: #dee2ec;}
.layout .sidebar.has-bg-image .menu.icon-shape-circle .menu-item a .menu-icon, .layout .sidebar.has-bg-image .menu.icon-shape-rounded .menu-item a .menu-icon, .layout .sidebar.has-bg-image .menu.icon-shape-square .menu-item a .menu-icon {background-color: rgba(11, 26, 44, 0.6);}
.layout .sidebar.has-bg-image:not(.collapsed) .menu > ul > .sub-menu > .sub-menu-list {background-color: rgba(58,63, 72, 0.6);}
.layout .sidebar.has-bg-image:not(.collapsed) .menu > ul > .sub-menu .sub-menu-list {background-color: rgba(58,63, 72, 0.6);border-bottom-left-radius: 22px}
.layout.rtl .sidebar .menu .menu-item a .menu-icon {margin-left: 10px;margin-right: 0;}
.layout.rtl .sidebar .menu .menu-item.sub-menu > a::after {transform: rotate(135deg);}
.layout.rtl .sidebar .menu .menu-item.sub-menu > .sub-menu-list {padding-left: 0;padding-right: 20px;}
.layout.rtl .sidebar .menu .menu-item.sub-menu.open > a::after {transform: rotate(45deg);}
.layout.rtl .sidebar.collapsed .menu > ul > .menu-item.sub-menu a::after {right: auto;left: 10px;}
.layout.rtl .sidebar.collapsed .menu > ul > .menu-item.sub-menu > .sub-menu-list {margin-left: -3px !important;}

/*
* {box-sizing: border-box;}
body {margin: 0;height: 100vh;color: #3f4750;font-size: 0.9rem;}
a {text-decoration: none;}
*/

@media (max-width: 992px) {#btn-collapse {  display: none;}}
.layout .sidebar .pro-sidebar-logo {display: flex;align-items: center;}
.layout .sidebar .pro-sidebar-logo > div {width: 35px;min-width: 35px;height: 35px;min-height: 35px;display: flex;align-items: center;justify-content: center;border-radius: 0 4px 4px 4px;color: white;font-size: 24px;font-weight: 700;margin-right: 10px;}
.layout .sidebar .pro-sidebar-logo > h5 { overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 18px; transition: opacity 0.3s; opacity: 1; margin-bottom: 0;}
.layout .sidebar .footer-box {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;font-size: 0.8em;padding: 20px 0;border-radius: 8px;width: 180px;min-width: 190px;margin: 0 auto;background-color: #162d4a;}
.layout .sidebar .footer-box img.react-logo {width: 40px;height: 40px;margin-bottom: 10px;}
.layout .sidebar .footer-box a {color: #fff;font-weight: 600;margin-bottom: 10px;}

.layout .sidebar .sidebar-collapser{transition: left, right, 0.3s;position: fixed;left: 260px;top: 40px;width: 20px;height: 20px;border-radius: 0 3px 3px 3px;background-color: #212d3b;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;justify-content: center;font-size: 1em;transform: translateX(50%);z-index: 111;cursor: pointer;color: white;box-shadow: 1px 1px 4px #0c1e35;box-shadow:0px 0px 0px 4px rgb(255 255 255)}
.layout .sidebar .sidebar-collapser:hover{color:#fff}

.layout .sidebar.collapsed .pro-sidebar-logo > h5 {opacity: 0;}
.layout .sidebar.collapsed .footer-box {display: none;}
.layout .sidebar.collapsed .sidebar-collapser {left: 60px;}
.layout .sidebar.collapsed .sidebar-collapser i {transform: rotate(180deg);}

.cartIconBadge .badge {display: flex;padding: 0.25em 0.4em;font-size: 75%;font-weight: 700;line-height: 1;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: 0.25rem;color: #fff;background-color: #6c757d;}
.cartIconBadge .badge.primary {background-color: #fbb812;color:#333}
.cartIconBadge .badge.secondary {background-color: #079b0b;}

.sidebar-toggler {
  position: fixed;
  left: 0;
  top: 10px;
  z-index: 9999;
  background: #212d3b;
  padding: 3px 8px 1px 31px;
  border-radius: 0 7px 7px 0;
  border: 1px solid #19222d;
  color: #adaf90;
}
.sidebar-toggler:hover {
  color:#ffffff
}

.social-links a {margin: 0 10px;color: #3f4750;}

/* Ali Edit */
  /*.layout .sidebar.collapsed .menu > ul > .menu-header{display:flex}*/
  .layout .sidebar .menu > ul > .menu-header span{display:flex}

  .layout header .hContent{padding:5px 10px}
  .layout header .hContent{background:#5f6368;color:#fafafa;display:flex;align-items:center;flex-direction: row-reverse;}
  .layout header .hContent .headerSearch{width:100%;padding-right:15px;display:flex;justify-content:center;flex-direction:column;}
    .layout header .hContent .headerSearch label{display:none;}
    .layout header .hContent .headerSearch .form-control{background:rgba(0, 0, 0, 0.1);border:2px solid rgba(255, 255, 255, 0.2);color:#fafafa}
    .layout header .hContent .headerSearch ::placeholder {color: #fafafa;opacity: 1;}
    .layout header .hContent .headerSearch :-ms-input-placeholder {color: #fafafa;}
    .layout header .hContent .headerSearch ::-ms-input-placeholder {color: #fafafa;}
    .layout header .hContent .headerSearch .btn-primary{background:#fbb812;color:#333;border-color:#fbb812;font-weight:600}
  .layout header .hContent a{color:#fafafa}
  .layout header .hContent .icon-menu{display:flex;/*align-items:center;*/justify-content:center;font-weight:600}
    .layout header .hContent .icon-menu li{padding:5px;text-align:center; width: 70px;}
    .layout header .hContent .icon-menu li>div:nth-child(1){cursor: pointer;}
    .layout header .hContent .icon-menu li:hover{ background: #ffffff26; border-radius: 0 10px 10px 10px;}
    .layout header .hContent .icon-menu li .card-body table tbody tr{cursor: pointer;}
    .layout header .hContent .icon-menu li .card-body table tbody tr:hover{background: #e7e7e7;}
    .layout header .hContent .icon-menu li .m-icon{font-size:20px;position:relative;display:inline-block;}
    .layout header .hContent .icon-menu li .m-icon .badge{font-family: 'Montserrat', sans-serif; position:absolute;right:-20px;top:-4px;min-width:22px;height:22px;font-size:12px;background:#dc3545;border-radius:0 100px 100px 100px;border:2px solid #5f6368;text-align:center;display:none}
    .layout header .hContent .icon-menu li .text{ font-family: 'Montserrat', sans-serif; /*white-space: nowrap;*/ font-size: 11px; font-weight: 300; margin-top: 5px;}
  .layout header .hContent .customer-info{border-left:2px solid rgba(0, 0, 0, 0.1);padding-left:15px;margin-left:15px;text-align:right}
  .layout header .hContent .icon-menu .notificationsContent{width: 100%; position: fixed; right: 0; z-index: 9; display: none; font-family: 'Montserrat', sans-serif; text-align: left; background:rgb(0 0 0 / 60%); top: 0; padding-top: 45px; padding-right: 2%; padding-left: 2%; height: 100%;z-index: 9999;}
  .layout header .hContent .icon-menu .notificationsContent .row{margin-top: -15px;}
  .layout header .hContent .icon-menu .notificationsContent .closeNotification{ text-align: right; position: relative; z-index: 9;}
  .layout header .hContent .icon-menu .notificationsContent .closeNotification i { background: #d9372c; color: #fff; border-radius: 100%; font-size: 22px; padding: 5px; display: inline-block;  cursor: pointer; }
    

  
  .layout header .alert{font-size:14px;font-weight:600}
  .layout header .alert .aIcon{font-size:18px;margin-right:8px}
  .layout header .alert .btn-group button{margin:0 6px;font-weight:600;font-size:14px;border-radius:4px;white-space:nowrap;}
  .layout header .alert-danger .btn-group button.btn-primary{background:#dc3545;color:#fafafa;border-color:#dc3545;border-radius:4px!important}
    .layout header .alert-danger .btn-group button.btn-primary:active:focus{background:#dc3545;border-color:#dc3545;}
  .layout header .alert-danger .btn-group button.btn-outline-secondary{border-color: transparent;color:#dc3545;}
  .layout header .alert-danger .btn-group button.btn-outline-secondary:hover{background:transparent;opacity:0.8}