/*!
 *
 */

/*General Style*/
@import url(font/DroidKufi/droidarabickufi.css);
@import url('https://fonts.googleapis.com/css?family=Cairo');

* {
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

body {
   padding-top: 90px;
   /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
   font-family: 'Cairo', 'Droid Arabic Kufi',  'Arial', sans-serif;
   color: #34495e;
   background-color: #E6ECF0;
}

html {
   overflow: hidden;
   height: 100%;
}

body {
   overflow: auto;
   height: 100%;
}

@media (max-width: 1291px) {
   .navbar-header {
      float: none;
   }

   .navbar-left,
   .navbar-right {
      float: none !important;
   }

   .navbar-toggle {
      display: block;
   }

   .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
   }

   .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
   }

   .navbar-collapse.collapse {
      display: none !important;
      overflow-x: hidden !important;
   }

   .navbar-nav {
      float: none !important;
      margin-top: 7.5px;
   }

   .navbar-nav>li {
      float: none;
   }

   .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
   }

   .collapse.in {
      display: block !important;
      overflow-y: auto !important;
   }
}

/* unset bs3 setting */
.modal-open {
   overflow: auto;
}

h2 {
   font-size: 1.9em;
   font-weight: bolder;
}

a:link {
   text-decoration: none !important;
}

.grey {
   color: #a1b1bc;
}

.light-grey {
   color: #b8c6d0;
}

.white {
   color: #fff;
}

.dark-blue {
   color: #34495e !important;
}

.red {
   color: #c0392b;
}

.light-blue {
   color: #1abc9c;
}

.text-bold {
   font-weight: 700;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.btn-green {
   color: #fff;
   background-color: #A5C675;
   border: none;
}

.btn-green:hover {
   color: #fff;
   background-color: #40D47E;
}

.btn-red {
   color: #fff;
   background-color: #FF7676;
   border: none;
}

.btn-red:hover {
   color: #fff;
   background-color: #FF7676;
}

.btn-blue {
   color: #fff;
   background-color: #3498db;
   border: none;
}

.btn-blue:hover {
   color: #fff;
   background-color: #2980b9;
}


.paid {
   background-color: #2ecc71;
   font-weight: bold;
   font-size: 9px;
   padding: 5px;
   color: #fff;
   border-radius: 3px;
}

.unpaid {
   background-color: #e74c3c;
   font-weight: bold;
   font-size: 9px;
   padding: 5px;
   color: #fff;
   border-radius: 3px;
}

.Partiallypaid {
   background-color: #f1c40f;
   font-weight: bold;
   font-size: 9px;
   padding: 5px;
   color: #fff;
   border-radius: 3px;
}

.whiteBg {
   background-color: #fff;
}

.text-left {
   text-align: left !important;
}

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

.float-right {
   float: right;
}

.float-left {
   float: left;
}

.container-fluid {
   margin-top: 10px;
}

.container-small {
   max-width: 500px;
}

.modal-header {
   background-color: #40484E;
   color: #FFF;
}

.center {
   margin: 0 auto;
}

.btn-add {
   background-color: #40484E;
   color: #fff;
   margin-bottom: 100px;
}

.btn-add:hover {
   color: #eee;
}

.btn-add:focus {
   color: #eee;
}

.btn-danger {
   background: #d43f3a;
}

div.DTTT {
   margin-bottom: 0.5em;
   float: right;
}

div.dataTables_wrapper {
   clear: both;
}

.content {
   margin-top: 90px;
   margin-bottom: 90px;
}

#printSection {
   color: #000;
   margin: 0 auto;
}

.hrbreaker {
   page-break-before: always !important;
   page-break-inside: avoid !important;
}

@media print {
   .hrbreaker {
      page-break-before: always !important;
      page-break-inside: avoid !important;
      display: inherit;
      float: none !important;
      position: static !important;
      display: inline;
      box-sizing: content-box !important;
   }
}

#ticket .modal-dialog {
   width: 380px;
}


#modal-body {
   max-height: calc(100vh - 200px);
   overflow-y: auto;
}

/*print styling*/

@media print {
   .modal-dialog {
      width: 100% !important;
   }

   .col-md-1,
   .col-md-2,
   .col-md-3,
   .col-md-4,
   .col-md-5,
   .col-md-6,
   .col-md-7,
   .col-md-8,
   .col-md-9,
   .col-md-10,
   .col-md-11,
   .col-md-12 {
      float: left;
   }

   .col-md-12 {
      width: 100%;
   }

   .col-md-11 {
      width: 91.66666666666666%;
   }

   .col-md-10 {
      width: 83.33333333333334%;
   }

   .col-md-9 {
      width: 75%;
   }

   .col-md-8 {
      width: 66.66666666666666%;
   }

   .col-md-7 {
      width: 58.333333333333336%;
   }

   .col-md-6 {
      width: 50%;
   }

   .col-md-5 {
      width: 41.66666666666667%;
   }

   .col-md-4 {
      width: 33.33333333333333%;
   }

   .col-md-3 {
      width: 25%;
   }

   .col-md-2 {
      width: 16.666666666666664%;
   }

   .col-md-1 {
      width: 8.333333333333332%;
   }

   body * {
      visibility: hidden;
   }

   .container-fluid {
      display: none;
   }

   #printSection,
   #printSection * {
      visibility: visible;
   }

   #printSectionInvoice,
   #printSectionInvoice * {
      visibility: visible;
   }

   #printSection {
      text-transform: uppercase;
      font-size: 9px !important;
      left: 0;
      top: 0;
      padding: 0;
      margin: 0;
   }

   #printSection h4 {
      font-size: 12px;
   }

   #printSection tr td {
      font-size: 9px !important;
      margin: 0;
      padding: 0;
   }

   #printSection tr td span {
      font-size: 8px !important;
      color: #aaa !important;
   }

   #printSection .bg-success,
   #printSection .bg-danger {
      visibility: hidden;
   }

   @page {
      margin: 0;
   }

   .hiddenpr {
      display: none !important;
   }

   html,
   body {
      zoom: 100%;
      overflow: hidden !important;
   }
}

/*page loading animation*/
#loadingimg {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url("../img/Preloader.gif") 50% 50% no-repeat #fff;
}

/*empty liste message style*/

.messageVide {
   font-size: 30px;
   width: 100%;
   background-color: white;
   padding: 1.5em 0;
   border-radius: 5px;
   font-weight: lighter;
   display: inline-block;
   text-align: center;
}

.messageVide span {
   font-size: 15px;
}

/*slimscroll fix*/

.slimScrollDiv {
   display: inline-block !important;
   width: 100% !important;
}

#productList {
   width: 100% !important;
}

/*******************************navbar style*******************************/
.menu-text {
   padding-left: 5px;
   font-weight: 600;
   letter-spacing: 1px;
   font-size: 14px;
   text-transform: uppercase;
   font-family: 'Cairo', 'Droid Arabic Kufi', 'Arial', sans-serif;
}

.navbar-brand {
   margin-right: 50px;
   margin-top: -8px;
}

.navbar-brand img {
   width: 100px;
}

.navbar {
   -webkit-box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);
}

.navbar-nav a {
   color: #a1b1bc;
}

.flag {
   width: 35px;
   margin-right: 10px;
}

.language ul li {
   padding: 10px 0;
}

.language ul li a {
   font-weight: bold;
}

/*******************************left side style*******************************/

.left-side {
   background-color: #F7F7F7;
   border-radius: 5px;
   padding-bottom: 20px;
   margin-bottom: 150px;
   border: 3px solid #E6ECF0;
}

/*top section*/

.barcode {
   margin-top: 1.5em;
}

.table-header h3 {
   font-weight: 700;
   font-size: 1.1em;
   margin: 20px 0;
   text-align: center;
   text-transform: uppercase;
}


.client-add span {
   float: right;
   margin-top: 20px;
}

/*table section*/

.product-details {
   border: none;
   margin-bottom: 3px;
   color: #81909a;
}

.product-details input[type="text"] {
   width: 4em;
   padding: 3px;
   display: inline;
   text-align: center;
   height: 1.8em;
}

.delete-product {
   color: #f65e48;
   margin-top: 1px;
}

.textPD {
   margin-top: 5px;
   float: left;
}

.subtotal {
   float: right;
}

/*footer style (total section)*/


.totalTab table tr:last-child td:first-child {
   -moz-border-radius-bottomleft: 10px !important;
   -webkit-border-bottom-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

.totalTab table tr:last-child td:last-child {
   -moz-border-radius-bottomright: 10px !important;
   -webkit-border-bottom-right-radius: 10px !important;
   border-bottom-right-radius: 10px !important;
}

.totalTab .active {
   font-weight: bolder;
}

.total-input {
   border: none;
   outline: none;
}

/*******************************right side style*******************************/
/*Hold tabs styling*/
.Hold {
   cursor: pointer;
   text-align: center;
   margin: 5px 1px;
   padding: 2px 13px;
   background-color: #E2E2E2;
   border-radius: 3px;
   color: #6B6B6B;
   text-transform: uppercase;
   font-size: 20px;
   display: inline-block;
   font-weight: 600;
   padding-bottom: 7px;
   border-bottom: 3px solid #6EC89B;
}

.Hold span {
   font-size: 12px;
   color: #b9b2b2;
   margin-left: 8px;
}

.selectedHold {
   background-color: #6B6B6B;
   color: #E2E2E2;
   border-bottom: 3px solid #f65e48;
}

.pl {
   background-color: #aaaaaa;
   color: #fff;
   border-bottom: 3px solid #ffb7ac;
}

/*categorie styling*/
.categories {
   cursor: pointer;
   text-align: center;
   margin: 5px 0;
   padding: 10px 20px;
   background-color: #E2E2E2;
   border-radius: 3px;
   color: #6B6B6B;
   text-transform: uppercase;
   display: inline-block;
   font-weight: 500;
   padding-bottom: 7px;
   border-bottom: 3px solid #6EC89B;
}

.selectedGat {
   background-color: #6B6B6B;
   color: #E2E2E2;
   border-bottom: 3px solid #f65e48;
}

/*search bar styling*/
#searchContaner {
   margin-top: 10px;
}

.stylish-input-group .input-group-addon {
   background: white !important;
}

.stylish-input-group .form-control {
   border-right: 0;
   box-shadow: 0 0 0;
   border-color: #ccc;
}

.stylish-input-group button {
   border: 0;
   background: transparent;
}

/*product section styling*/
.right-side {
   background-color: #F7F7F7;
   border-radius: 5px;
   padding-bottom: 20px !important;
   border: 3px solid #E6ECF0;
   overflow: hidden;
}

.product {
   height: 120px;
   width: 120px;
   border-radius: 8px;
   text-align: center;
   background-size: cover;
   margin-top: 20px;
   color: #fff;
   overflow: hidden;
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}

.product img {
   width: 120px;
   height: 120px;
   opacity: 0.3;
   margin-top: -91px;
   position: absolute;
   left: 0;
   top: 90px;
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}

.product:hover img {
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -o-transform: scale(1.5);
   -ms-transform: scale(1.5);
   transform: scale(1.5);
   opacity: 0.2;
}

.color01 {
   background-color: #34495e;
}

.color02 {
   background-color: #1abc9c;
}

.color03 {
   background-color: #2ecc71;
}

.color04 {
   background-color: #3498db;
}

.color05 {
   background-color: #9b59b6;
}

.color06 {
   background-color: #e67e22;
}

.color07 {
   background-color: #e74c3c;
}

.color08 {
   background-color: #fff;
   color: black;
}

.color08 img {
   opacity: 0.4 !important;
}

.product h3 {
   display: inline-block;
   font-weight: 700;
   font-size: 0.9em;
   text-transform: uppercase;
   -webkit-transition: all 0.1s ease-in-out 0.1s;
   -moz-transition: all 0.1s ease-in-out 0.1s;
   -o-transition: all 0.1s ease-in-out 0.1s;
   -ms-transition: all 0.1s ease-in-out 0.1s;
   transition: all 0.1s ease-in-out 0.1s;
}

.product:hover h3 {
   opacity: 1;
}

.mask h3 {
   margin-top: 0;
   opacity: 0;
}

.product p {
   opacity: 0;
   font-size: 0.6em;
   text-transform: uppercase;
   -webkit-transform: scale(2);
   -moz-transform: scale(2);
   -o-transform: scale(2);
   -ms-transform: scale(2);
   transform: scale(2);
   -webkit-transition: all 0.1s ease-in-out 0.1s;
   -moz-transition: all 0.1s ease-in-out 0.1s;
   -o-transition: all 0.1s ease-in-out 0.1s;
   -ms-transition: all 0.1s ease-in-out 0.1s;
   transition: all 0.1s ease-in-out 0.1s;
}

.product:hover p {
   opacity: 0.7;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
}

.product:hover {
   -webkit-box-shadow: 0px 0px 34px -4px rgba(0, 0, 0, 0.53);
   -moz-box-shadow: 0px 0px 34px -4px rgba(0, 0, 0, 0.53);
   box-shadow: 0px 0px 34px -4px rgba(0, 0, 0, 0.53);
}


/******** datatable styling ****/

.dataTables_filter {
   margin-top: 15px;
}


/***************** Media queries **********/

/* ipad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {

   .product {
      height: 90px;
      width: 90px;
   }

   .product img {
      width: 90px;
      -ms-transform: scale(1.2);
      /* IE 9 */
      -webkit-transform: scale(1.2);
      /* Safari */
      transform: scale(1.2);
   }

   .product h3 {
      font-size: 0.7em;
      margin-bottom: -10px;
   }

   .textPD {
      font-size: 0.7em;
      font-weight: 600;
      margin-left: 5px;
   }

   .product-details input[type="text"] {
      width: 1.5em;
      padding: 3px;
      border: none;
      display: inline;
      text-align: center;
      height: 1.8em;
   }
}

/* nexus 7 Portrait */
@media screen and (device-width: 600px) and (device-height: 960px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {

   .textPD {
      font-size: 0.7em;
      font-weight: 600;
   }

   .product-details input[type="text"] {
      width: 1.5em;
      padding: 3px;
      border: none;
      display: inline;
      text-align: center;
      height: 1.8em;
   }
}

/* phone Portrait */
@media only screen and (min-device-width: 360px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
   .barcode {
      margin-bottom: 15px;
   }

   .table-header {
      display: none;
   }

   .productNum i {
      display: none;
   }

   .productD {
      margin-left: -15px;
      margin-top: -25px;
   }

   .product {
      height: 90px;
      width: 90px;
   }

   .product h3 {
      font-size: 0.7em;
   }

   .product img {
      width: 90px;
   }

   .product p {
      display: none;
   }
}


/************************** LOGIN **********************/

.loginmodal-container {
   padding: 30px;
   max-width: 350px;
   width: 100% !important;
   background-color: rgba(0, 0, 0, 0.5);
   margin: 0 auto;
   margin-top: 150px;
   border-radius: 10px;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   text-align: center;
   color: #D2D5DA;
}

.loginmodal-container h1 {
   text-align: center;
   font-size: 1.8em;
}

.loginmodal-container img {
   display: inline-block;
}

.loginmodal-container input[type=submit] {
   width: 100%;
   display: block;
   margin-bottom: 10px;
   position: relative;
}

.loginmodal-container input[type=text],
input[type=password] {
   height: 44px;
   font-size: 16px;
   width: 100%;
   margin-bottom: 10px;
   -webkit-appearance: none;
   background: #fff;
   border: 1px solid #d9d9d9;
   border-top: 1px solid #c0c0c0;
   /* border-radius: 2px; */
   padding: 0 20px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   border-radius: 50px;
}

.loginmodal-container input[type=text]:hover,
input[type=password]:hover {
   border: 1px solid #b9b9b9;
   border-top: 1px solid #a0a0a0;
   -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.loginmodal {
   text-align: center;
   font-size: 14px;
   font-family: 'Cairo', 'Droid Arabic Kufi', 'Arial', sans-serif;
   font-weight: 700;
   height: 36px;
   padding: 0 8px;
   /* border-radius: 3px; */
   /* -webkit-user-select: none;
  user-select: none; */
}

.loginmodal-submit {
   /* border: 1px solid #3079ed; */
   margin: 30px 0;
   border: 0px;
   color: #fff;
   text-shadow: 0 1px rgba(0, 0, 0, 0.1);
   background-color: #d1a978;
   padding: 17px 0px;
   font-size: 14px;
   border-radius: 50px;
   /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}

.loginmodal-submit:hover {
   /* border: 1px solid #2f5bb7; */
   border: 0px;
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
   background-color: #000000;
   /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}

.loginmodal-container a {
   text-decoration: none;
   color: #666;
   font-weight: 400;
   text-align: center;
   display: inline-block;
   opacity: 0.6;
   transition: opacity ease 0.5s;
}

.login-help {
   font-size: 12px;
   text-align: center;
}

/****************************************** chekbox & themepicker styling ******************/

.label-text {
   font-size: 15px;
   font-weight: bold;
}

input[type=checkbox] {
   display: none;
}

input[type=checkbox]+.label-text:before {
   content: "\f096";
   font-family: 'Cairo', 'Droid Arabic Kufi', 'Arial', sans-serif;
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   width: 1em;
   font-size: 20px;
   display: inline-block;
   margin-right: 5px;
}

input[type=checkbox]:checked+.label-text:before {
   content: "\f14a";
   color: #06a3e9;
}


.themesPick>input {
   /* HIDE RADIO */
   display: none;
}

.themesPick>input+img {
   /* IMAGE STYLES */
   cursor: pointer;
   border: 2px solid transparent;
}

.themesPick>input:checked+img {
   /* (CHECKED) IMAGE STYLES */
   border: 2px solid #06a3e9;
}

/* ----- Data Tables ----- */
div.dataTables_paginate ul.pagination {
   margin: 10px 0;
}

.dataTables_paginate {
   margin: -7px 0 7px 0;
}

.dataTables_paginate li.paginate_button.previous.disabled a,
.dataTables_paginate li.paginate_button.next.disabled a {
   color: #DDD;
   border: 0;

}

.dataTables_paginate li.paginate_button a {
   height: 25px;
   line-height: 25px;
   padding-top: 0px;
   color: #444;
   font-size: 12px;
   border: 0;
}

.dataTables_paginate li.paginate_button a:hover {
   background: none;
   color: #11A7DB;
}

.dataTables_paginate li.paginate_button.active a {
   background: #FFF;
   color: #e0963b;
   border: 0;
}

.paginate_disabled_previous,
.paginate_disabled_next,
a.paginate_disabled_previous:hover,
a.paginate_disabled_next:hover {
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: default;
   background-image: none;
   border: 1px solid transparent;
   white-space: nowrap;
   padding: 4px 9px;
   font-size: 12px;
   line-height: 1.428571429;
   border-radius: 0;
   margin-left: 5px;
   color: #ADADAD;
   text-decoration: none;
}

.paginate_enabled_next,
.paginate_enabled_previous,
a.paginate_enabled_previous:hover,
a.paginate_enabled_next:hover {
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
   white-space: nowrap;
   padding: 4px 9px;
   font-size: 12px;
   line-height: 1.428571429;
   border-radius: 0;
   color: #007AFF;
   margin-left: 5px;
   text-decoration: none;
   background: none;
}


/* ----- Data Tables End ----- */


/************ loading animation **********/
.pace {
   -webkit-pointer-events: none;
   pointer-events: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
}

.pace-inactive {
   display: none;
}

.pace .pace-progress {
   background: #e0963b;
   position: fixed;
   z-index: 2000;
   top: 0;
   right: 100%;
   width: 100%;
   height: 2px;
}

.pace .pace-progress-inner {
   display: block;
   position: absolute;
   right: 0px;
   width: 100px;
   height: 100%;
   box-shadow: 0 0 10px #e0963b, 0 0 5px #e0963b;
   opacity: 1.0;
   -webkit-transform: rotate(3deg) translate(0px, -4px);
   -moz-transform: rotate(3deg) translate(0px, -4px);
   -ms-transform: rotate(3deg) translate(0px, -4px);
   -o-transform: rotate(3deg) translate(0px, -4px);
   transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
   display: block;
   position: fixed;
   z-index: 2000;
   top: 15px;
   right: 15px;
   width: 14px;
   height: 14px;
   border: solid 2px transparent;
   border-top-color: #e0963b;
   border-left-color: #e0963b;
   border-radius: 10px;
   -webkit-animation: pace-spinner 400ms linear infinite;
   -moz-animation: pace-spinner 400ms linear infinite;
   -ms-animation: pace-spinner 400ms linear infinite;
   -o-animation: pace-spinner 400ms linear infinite;
   animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
   0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }

   100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@-moz-keyframes pace-spinner {
   0% {
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
   }

   100% {
      -moz-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@-o-keyframes pace-spinner {
   0% {
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
   }

   100% {
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@-ms-keyframes pace-spinner {
   0% {
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
   }

   100% {
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@keyframes pace-spinner {
   0% {
      transform: rotate(0deg);
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

/********************************** chart Style *********************/

#canvas-holder {
   width: 100%;
   text-align: center;
}

#chartjs-tooltip {
   opacity: 1;
   position: absolute;
   background: rgba(0, 0, 0, .71);
   font-size: 11px !important;
   color: white;
   padding: 5px;
   border-radius: 3px;
   -webkit-transition: all .1s ease;
   transition: all .1s ease;
   pointer-events: none;
   -webkit-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
}

#chartjs-tooltip.below {
   -webkit-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
}

#chartjs-tooltip.below:before {
   border: solid;
   border-color: #111 transparent;
   border-color: rgba(0, 0, 0, .8) transparent;
   border-width: 0 8px 8px 8px;
   bottom: 1em;
   content: "";
   display: block;
   left: 50%;
   position: absolute;
   z-index: 99;
   -webkit-transform: translate(-50%, -100%);
   transform: translate(-50%, -100%);
}

#chartjs-tooltip.above {
   -webkit-transform: translate(-50%, -100%);
   transform: translate(-50%, -100%);
}

#chartjs-tooltip.above:before {
   border: solid;
   border-color: #111 transparent;
   border-color: rgba(0, 0, 0, .8) transparent;
   border-width: 8px 8px 0 8px;
   bottom: 1em;
   content: "";
   display: block;
   left: 50%;
   top: 100%;
   position: absolute;
   z-index: 99;
   -webkit-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
}

/* Stats carts */
.statCart {
   padding: 20px 25px;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   background-color: #fff;
}

.Statcolor01 {
   background-color: #41C4FE;
   color: #fff;
}

.Statcolor02 {
   background-color: #FF7676;
   color: #fff;
}

.Statcolor03 {
   background-color: #A5C675;
   color: #fff;
}

.statCart i {
   display: inline;
   font-size: 50px;
   padding: 0 25px 0 0;
   border-right: 1px solid #fff;
   float: left;
   margin-right: 25px
}

.statCart h1 {
   display: inline;
}

.statCart span {
   font-weight: lighter;
}

/*date picker*/
.RangePicker {
   color: #fff;
   background-color: #2AC4C0;
   border: 1px solid #2AC4C0;
}

.range_inputs .btn-success {
   background-color: #2AC4C0;
   border-color: #2AC4C0;
}

.btn-picker {
   color: #fff;
   background-color: #2AC4C0;
   border-color: #2AC4C0;
   width: 100%
}

.rangeStat button {
   margin-top: 23px;
}

/**** year Table */

.StatTable {
   width: 100%;
   height: 200px;
}

.StatTable td {
   border: 1px solid #ddd;
   text-align: right;
   padding: 10px;
   font-size: 20px;
   color: #aaa;
}

.revenuespan {
   float: left;
   background-color: #2AC4C0;
   padding: 4px 13px;
   font-size: 14px;
   border-radius: 10px;
   color: #fff;
   cursor: pointer;
}

.expencespan {
   float: left;
   background-color: #FF7676;
   padding: 4px 13px;
   margin-left: 8px;
   font-size: 14px;
   border-radius: 10px;
   color: #fff;
   cursor: pointer;
}


.statYear {
   display: block !important;
   text-align: center;
   width: 100%;
}

.btn-Year {
   color: #fff;
   background-color: #40484E;
   border-color: #40484E;
   margin-bottom: 20px;
   padding: 5px 20px;
}

.ReportTotal {
   background-color: #FB6E52;
   padding: 4px 13px;
   border-radius: 10px;
   color: #fff;
}

.tooltip.in {
   opacity: 0.7;
   filter: alpha(opacity=70);
}

/******************** card payement style **************/

.cc-num {
   background-image: url('../img/CC_bg.png');
   background-repeat: repeat-x;
}

.padding-s {
   padding: 0 3px !important;
   margin: 0 0 30px 0 !important;
}

.CreditCardNum i {
   float: right;
   margin: 5px;
   color: #bababa;
}

/********************* tab styles **************/
.nav-tabs {
   border-bottom: 2px solid #DDD;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
   border-width: 0;
}

.nav-tabs>li>a {
   border: none;
   color: #666;
}

.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
   border: none;
   color: #aaa !important;
   background: transparent;
}

.nav-tabs>li>a::after {
   content: "";
   background: #aaa;
   height: 2px;
   position: absolute;
   width: 100%;
   left: 0px;
   bottom: -1px;
   transition: all 250ms ease 0s;
   transform: scale(0);
}

.nav-tabs>li.active>a::after,
.nav-tabs>li:hover>a::after {
   transform: scale(1);
}

.tab-nav>li>a::after {
   background: #21527d none repeat scroll 0% 0%;
   color: #fff;
}

.tab-pane {
   padding: 15px 0;
}

.tab-content {
   padding: 20px
}

.card {
   background: #FFF none repeat scroll 0% 0%;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
   margin-bottom: 30px;
}

/*body{ background: #EDECEC; padding:50px}*/



/***************** stores list ******************/
.choose_store {
   color: #34324b;
   margin-top: 60px;
   text-transform: uppercase;
   font-size: 1.7em;
   font-weight: 700;
}

#storeline {
   width: 100%;
   position: relative;
   list-style: none;
   padding: 0;
}

#storeline a {
   text-decoration: none;
}

#storeline .listing {
   background: #FFF;
   border: 1px solid #e6e7e9;
   border-radius: 1.3rem;
   padding: 1em;
   margin-bottom: 1em;
   position: relative;
   z-index: 1;
   display: table;
   width: 96%;
   transition: all .3s ease-in-out;
}

#storeline .listing img,
#storeline .listing .info,
#storeline .listing .store_type {
   display: table-cell;
   vertical-align: middle;
   font-size: .9em;
   color: #74718f;
}

#storeline .listing .image_wrapper {
   width: 60px;
}

#storeline .listing .image_wrapper img {
   width: 60px;
   display: block;
   margin: 0 auto;
   border-radius: .25em;
}

#storeline .listing .info {
   line-height: 1.25;
   width: 640px;
   padding-left: 25px;
}

#storeline .listing .info .store_title {
   font-weight: 700;
   color: #34324b;
   font-size: 1.5em;
}

#storeline .listing .info .store_info {
   color: #74718f;
   font-size: .9em;
   display: block;
}

#storeline .listing .info .store_info span {
   margin: 0 .75em;
}

#storeline .listing .store_type {
   text-transform: uppercase;
   font-weight: 700;
   font-size: .75em;
   position: relative;
   white-space: nowrap;
   padding-top: 0.6em;
   width: 100px;
}

#storeline .listing .store_type:before {
   content: " ";
   background: #a378fc;
   width: 10px;
   height: 10px;
   border-radius: 100%;
   position: absolute;
   left: -1px;
   top: 28px;
}

#storeline .listing .store_close {
   color: #fd7576;
}

#storeline .listing .store_close:before {
   background: #fd7576;
}

#storeline .listing .store_open {
   color: #1ABC9C;
}

#storeline .listing .store_open:before {
   background: #1ABC9C;
}

#storeline .listing:hover {
   cursor: pointer;
   box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.1);
}

/********************* close & switch register menu ***************/
.cbp-vimenu {
   position: fixed;
   top: 80px;
   right: 0;
   z-index: 9999;
   list-style-type: none;
   margin: 0;
   padding: 0;
   background: #8C9899;
}

.cbp-vimenu li a {
   display: block;
   height: 2em;
   width: 2em;
   padding-top: 4px;
   text-align: center;
   color: #fff;
   position: relative;
   -webkit-transition: background 0.1s ease-in-out;
   -moz-transition: background 0.1s ease-in-out;
   transition: background 0.1s ease-in-out;
}

.cbp-vimenu li a:hover,
.cbp-vimenu li:first-child a {
   background: #F65E48;
   color: #fff;
}

.cbp-vimenu li:nth-child(3) a {
   background: #FACDAE;
   color: #fff;
}

.cbp-vimenu2 li:nth-child(3) a {
   background: #FACDAE;
   color: #fff;
}

.cbp-vimenu2 li:nth-child(3) a:hover {
   background: #FC9D9B;
   color: #fff;
}

.btn-orange {
   color: #fff;
   background-color: #FB6E52;
   border: none;
}


/************************************* resto adding *****************************************/

.zone {
   padding: 6px 10px;
   border-radius: 15px;
   background-color: #ACB8B4;
   margin: 0 2px;
   color: #fff;
   position: relative;
}

.zone i {
   color: #7e8b87;
   margin-left: 10px;
   cursor: pointer;
}

.tableList {
   text-align: center;
   height: 160px;
   width: 160px;
   border-radius: 20px;
}

.tableList:hover {
   background-color: rgb(235, 238, 244);
}

.tableList a img {
   margin-top: 20px;
}

.tableList a h2 {
   font-size: 20px;
   color: rgb(66, 66, 66);
}

.tabletime {
   position: absolute;
   top: 1;
   left: 55px;
   padding: 2px 5px;
   color: #fff;
   background-color: rgb(143, 143, 143);
}

.js-select-basic-multiple {
   width: 500px !important;
}

.waitercount {
   padding: 10px;
   margin-top: 15px;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   position: relative;
}

.waitercount ul li {
   padding-top: 12px;
   float: left;
   margin-left: 20px;
}

.waitercount ul li h4 {
   margin-top: 0;
   font-weight: bolder;
}

.wtotal {
   cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.76);
   text-align: center;
   opacity: 0;
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}

.wtotal:hover {
   opacity: 1;
}

/********************* close & switch table menu ***************/

.cbp-vimenu2 {
   position: fixed;
   top: 80px;
   right: 0;
   z-index: 9999;
   list-style-type: none;
   margin: 0;
   padding: 0;
   background: #29bfcc;
}

.cbp-vimenu2 li a {
   display: block;
   height: 2em;
   width: 2em;
   padding-top: 4px;
   text-align: center;
   color: #fff;
   position: relative;
   -webkit-transition: background 0.1s ease-in-out;
   -moz-transition: background 0.1s ease-in-out;
   transition: background 0.1s ease-in-out;
}

.cbp-vimenu2 li a:hover,
.cbp-vimenu2 li:first-child a {
   background: #7df6ef;
   color: #fff;
}


.navbar-default {
   background-color: #4B4F55;
}

.navbar-default .navbar-nav>li>a {
   color: #fff;
}

.navbar-default .navbar-nav>li>a:hover {
   color: #aaa;
}

.navbar-default {
   border: none;
}

/************************* menu print style ***************************/
.headline {
   font-family: 'Cairo', 'Droid Arabic Kufi', 'Arial', sans-serif;
   background-color: #e74c3c;
   color: white;
   text-align: center;
   padding: 2px 0;
   margin-top: 60px;
   position: relative;
}

.headline::before,
.headline::after {
   content: '';
   height: 1px;
   width: 100%;
   background-color: #e74c3c;
   display: block;
   left: 0;
   position: absolute;
}

.headline::before {
   top: -6px;
}

.headline::after {
   bottom: -6px;
}

.opacity-small {
   font-size: 30px;
   opacity: 0.7;
   filter: Alpha(opacity=70);
}

.opacity-medium {
   font-size: 20px;
   opacity: 0.5;
   filter: Alpha(opacity=50);
}

.opacity-large {
   font-size: 15px;
   opacity: 0.25;
   filter: Alpha(opacity=25);
}

.logo-menu {
   margin: 0 auto;
   padding: 50px 0 0 0;
}

.grey {
   color: #aaa;
}

/************************* kitchen page style ***************************/

.kitchentable-btn {
   color: #fff;
   background-color: #A5C675;
   border: none;
   margin: 0 25px;
   box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -moz-box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -webkit-box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
}

.kitchentableoff-btn {
   color: #fff;
   background-color: #8297A8;
   border: none;
   margin: 0 25px;
   box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -moz-box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -webkit-box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
}

.tablenotif {
   position: absolute;
   font-size: 10px;
   top: -8px;
   ;
   right: 50px;
   border-radius: 100%;
   padding: 2px 8px;
   color: #F3565D;
   background-color: #F3565D;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
}

.nohover-item:hover {
   background-color: inherit !important;
}

/************************* Button add ***************************/

.client-add {
   display: flex;
   /* Use flexbox for alignment */
   justify-content: space-between;
   /* Add space between buttons */
}

.client-add .butn {

   padding: 0px 0px;
}

@media (max-width: 768px) {
   .client-add {
      flex-direction: row-reverse;
      /* Stack buttons vertically on smaller screens */
   }

   .client-add .butn {
      padding-left: 40px;
   }
}

/* ==========================================================
   MODERN PREMIUM POS UI — LIGHT THEME
   Non-destructive override layer
   ========================================================== */
:root {
   --pos-primary: #e0963b;
   --pos-primary-hover: #e0963b;
   --pos-primary-soft: rgba(15, 118, 110, .10);
   --pos-accent: #d6a85f;
   --pos-success: #16a34a;
   --pos-warning: #d97706;
   --pos-danger: #dc4444;
   --pos-radius: 14px;
   --pos-radius-sm: 10px;
   --pos-shadow: 0 8px 30px rgba(15, 23, 42, .07);
   --pos-shadow-hover: 0 14px 36px rgba(15, 23, 42, .12);
   --pos-transition: all .22s ease
}

html,
body {
   scroll-behavior: smooth
}

body {
   line-height: 1.65;
   color: #1f2937;
   background-color: #f1e1ce;
   background-image: radial-gradient(circle at 8% 0%, rgba(15, 118, 110, .06), transparent 28%), radial-gradient(circle at 92% 5%, rgba(214, 168, 95, .06), transparent 25%);
   background-attachment: fixed
}

a {
   color: var(--pos-primary);
   transition: var(--pos-transition)
}

a:hover,
a:focus {
   color: var(--pos-primary-hover)
}

.form-control {
   border-radius: var(--pos-radius-sm) !important;
   min-height: 42px;
   box-shadow: none !important;
   background: rgba(255, 255, 255, .92) !important;
   border-color: rgba(148, 163, 184, .22) !important;
   color: #1f2937 !important;
   transition: var(--pos-transition)
}

.form-control:focus {
   border-color: rgba(241, 178, 41, 0.55) !important;
   box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important
}

.btn {
   border-radius: var(--pos-radius-sm) !important;
   min-height: 42px;
   padding: 9px 16px;
   font-weight: 600;
   transition: var(--pos-transition)
}

.btn:hover {
   transform: translateY(-1px)
}

.btn:active {
   transform: translateY(0)
}

.btn-green {
   background: #16a34a !important
}

.btn-green:hover,
.btn-green:focus {
   background: #12863d !important
}

.btn-blue {
   background: #3498db !important
}

.btn-blue:hover,
.btn-blue:focus {
   background: #2980b9 !important
}

.btn-red,
.btn-danger {
   background: #dc4444 !important
}

.btn-red:hover,
.btn-danger:hover {
   background: #c73636 !important
}

.btn-print {
   background: #0b625c !important;
   color: #fff
}

.btn-print:hover,
.btn-print:focus {
   background: #0f766e !important
}

.navbar {
   background: rgba(255, 255, 255, .70) !important;
   -webkit-backdrop-filter: blur(18px) saturate(150%);
   backdrop-filter: blur(18px) saturate(150%);
   border: 1px solid rgba(255, 255, 255, .45) !important;
   border-bottom-color: rgba(15, 23, 42, .08) !important;
   box-shadow: 0 8px 28px rgba(15, 23, 42, .07) !important;
   min-height: 66px;
   z-index: 1030
}

.navbar-default .navbar-nav>li>a,
.navbar-nav a {
   min-height: 66px;
   display: flex !important;
   align-items: center;
   gap: 7px;
   font-weight: 600;
   color: #475569 !important;
   border-radius: 12px;
   transition: var(--pos-transition)
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
   background: rgba(15, 118, 110, .07) !important;
   color: var(--pos-primary) !important
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
   background: var(--pos-primary-soft) !important;
   color: var(--pos-primary) !important
}

.navbar-brand {
   margin-right: 28px;
   display: flex;
   align-items: center;
   min-height: 66px
}

.navbar-toggle {
   border: 0 !important;
   border-radius: 10px !important;
   margin-top: 14px !important;
   background: rgba(15, 118, 110, .07) !important
}

.navbar-toggle:hover,
.navbar-toggle:focus {
   background: rgba(15, 118, 110, .13) !important
}

.left-side,
.right-side,
.messageVide {
   border-radius: var(--pos-radius) !important;
   border-width: 1px !important;
   box-shadow: var(--pos-shadow)
}

.left-side,
.right-side {
   background: rgba(252, 251, 250, 0.88) !important;
   border-color: rgba(148, 163, 184, .14) !important;
   overflow: hidden
}

.container-fluid {
   margin-top: 18px
}

.Hold,
.categories {
   border: 1px solid rgba(148, 163, 184, .15) !important;
   border-radius: 11px !important;
   box-shadow: 0 3px 12px rgba(15, 23, 42, .04);
   padding: 9px 16px !important;
   background: #f1f5f9 !important;
   color: #475569 !important;
   transition: var(--pos-transition)
}

.Hold:hover,
.categories:hover {
   transform: translateY(-1px);
   background: #e8eef5 !important
}

.selectedHold,
.selectedGat {
   background: var(--pos-primary) !important;
   color: #fff !important;
   border-color: var(--pos-primary) !important;
   box-shadow: 0 7px 18px rgba(15, 118, 110, .20)
}

.pl {
   border-radius: 11px !important;
   background: #cbd5e1 !important;
   color: #fff !important
}

#searchContaner {
   margin-top: 14px;
   margin-bottom: 8px
}

.stylish-input-group {
   border-radius: var(--pos-radius-sm);
   overflow: hidden;
   box-shadow: 0 4px 16px rgba(15, 23, 42, .05)
}

.stylish-input-group .input-group-addon,
.stylish-input-group .form-control {
   border: 0 !important;
   min-height: 46px
}

.product {
   border-radius: 14px !important;
   box-shadow: 0 5px 16px rgba(15, 23, 42, .07);
   border: 1px solid rgba(255, 255, 255, .25);
   cursor: pointer;
   transition: var(--pos-transition)
}

.product:hover {
   transform: translateY(-3px);
   box-shadow: var(--pos-shadow-hover) !important
}

.product h3,
.product p {
   text-transform: none;
   letter-spacing: 0
}

.product img {
   transition: transform .35s ease, opacity .35s ease !important
}

.product:hover img {
   transform: scale(1.08) !important
}

.color01 {
   background: #334155 !important
}

.color02 {
   background: #0f766e !important
}

.color03 {
   background: #16a34a !important
}

.color04 {
   background: #2563eb !important
}

.color05 {
   background: #7c3aed !important
}

.color06 {
   background: #b7791f !important
}

.color07 {
   background: #dc4444 !important
}

.color08 {
   background: #f8fafc !important;
   color: #172033 !important
}

.product-details {
   padding: 7px 8px;
   border-radius: 10px;
   background: rgba(248, 250, 252, .86)
}

.delete-product {
   color: var(--pos-danger) !important
}

.total-input {
   border-radius: 9px !important;
   font-weight: 700
}

.paid,
.unpaid,
.Partiallypaid {
   border-radius: 999px !important;
   padding: 6px 10px !important;
   font-size: 10px !important
}

.table {
   border-collapse: separate !important;
   border-spacing: 0 5px !important
}

.table>thead>tr>th {
   border: 0 !important;
   font-weight: 700
}

.table>tbody>tr>td,
.table>tbody>tr>th {
   border-top: 1px solid rgba(148, 163, 184, .12) !important;
   border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
   vertical-align: middle
}

.table>tbody>tr:hover>td {
   background: rgba(15, 118, 110, .035) !important
}

.nav-tabs {
   border-bottom: 1px solid rgba(148, 163, 184, .18)
}

.nav-tabs>li>a {
   border: 0 !important;
   border-radius: 10px 10px 0 0;
   font-weight: 600
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
   border: 0 !important;
   color: var(--pos-primary) !important;
   background: var(--pos-primary-soft) !important
}

.modal-content {
   border: 1px solid rgba(148, 163, 184, .18) !important;
   border-radius: 16px !important;
   box-shadow: 0 20px 60px rgba(15, 23, 42, .18);
   overflow: hidden
}

.dropdown-menu {
   border: 1px solid rgba(148, 163, 184, .18) !important;
   border-radius: 12px !important;
   box-shadow: 0 14px 36px rgba(15, 23, 42, .12) !important;
   padding: 7px !important;
   background: #fff
}

.dropdown-menu>li>a {
   border-radius: 9px;
   padding: 9px 12px
}

.dropdown-menu>li>a:hover {
   background: var(--pos-primary-soft);
   color: var(--pos-primary)
}

#loadingimg {
   background-color: rgba(248, 250, 252, .94) !important;
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px)
}

@media(max-width:1291px) {
   .navbar {
      min-height: 60px
   }

   .navbar-default .navbar-nav>li>a,
   .navbar-nav a {
      min-height: 48px
   }

   .product {
      min-height: 96px
   }

   .btn {
      min-height: 44px
   }
}

@media(prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      transition: none !important;
      animation: none !important;
      scroll-behavior: auto !important
   }
}


#loadingimg {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url("../img/Preloader-light.gif") 50% 50% no-repeat #fff;
}

/*empty liste message style*/

.messageVide {
   font-size: 30px;
   width: 100%;
   background-color: white;
   padding: 1.5em 0;
   border-radius: 5px;
   font-weight: lighter;
   display: inline-block;
   text-align: center;
}

.messageVide span {
   font-size: 15px;
}

/* Light Theme Login and Logo */

.login-logo img{
    content:url("../img/login-light.png");
    max-height:70px;
    max-width:220px;
    object-fit:contain;
}

.navbar-brand{
    padding-top: 5px;
    padding-bottom: 5px;
}

.navbar-brand .site-logo{
    max-height: 45px;
    max-width: 200px;
    width: auto;
    height: auto;
    margin-top: 5px;
    object-fit: contain;
    display: block;
}

.navbar-brand .site-logo{
    content: url("../img/logo-light.png");
}

/* Zatca Style */

      #zatca { direction: rtl; }
                 .zatca-wrap { max-width: 1040px; margin: 0 auto; color:#000 }
                 .zatca-hero { background:#d1a978; border:1px solid #e5e9f0; border-radius:8px; padding:20px 22px; margin-bottom:18px; }
                 .zatca-hero h1 { margin:0 0 8px; font-size:24px; font-weight:700; }
                 .zatca-hero p { margin:0; color:#FFF; line-height:1.8; }
                 .zatca-status { display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; color:#000}
                 .zatca-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:20px; border:1px solid #d9dee7; background:#FFF; font-size:12px; }
                 .zatca-dot { width:8px; height:8px; border-radius:50%; background:#98a2b3; display:inline-block; }
                 .zatca-dot.ok { background:#12b76a; }
                 .zatca-dot.warn { background:#f79009; }
                 .zatca-dot.bad { background:#f04438; }
                 .zatca-panel { border:1px solid #e5e9f0; border-radius:8px; background:#d1a978; margin-bottom:16px; box-shadow:0 1px 2px rgba(16,24,40,.03); }
                 .zatca-panel-title { padding:13px 16px; border-bottom:1px solid #eef1f5; font-weight:700; background:#fbfcfe; }
                 .zatca-panel-body { padding:16px; }
                 .zatca-panel-body:after { content:""; display:block; clear:both; }
                 .zatca-help { color:#fff; font-size:12px; margin:5px 0 0; line-height:1.7; }
                 .zatca-required:after { content:" *"; color:#d92d20; }
                 .zatca-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
                 .zatca-actions .btn { margin:0; }
                 .zatca-step { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; border-radius:50%; background:#eef2f6; margin-left:7px; font-size:12px; font-weight:700; }
                 .zatca-action-primary { min-width:190px; }
                 .zatca-action-muted { background:#fff; }
                 .zatca-production { border:1px solid #f3c4c0; background:#fff8f7; color:#912018; border-radius:7px; padding:10px 12px; margin-top:12px; line-height:1.8; }
                 .zatca-secret-note { font-size:12px; color:#667085; background:#f8fafc; border:1px dashed #d0d5dd; padding:10px 12px; border-radius:6px; margin-top:10px; }
                 .zatca-btn-div {padding-top:10px;}
                 .zatca-btn { color:#000 ; font-size:14px; font-weight:700}
                 .zatca-btn:hover,
                 .zatca-btn:focus { color: #FFF !important}

                 @media (max-width: 767px) {
                   .zatca-hero h1 { font-size:20px; }
                   .zatca-action-primary { width:100%; }
                   .zatca-actions .btn { width:100%; }
                 }