/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.content-body {
  width: 100%;
}

.table img {
  width: 50px;
}

.tableFontAwsem {
  background: transparent;
  border: none;
}

@media only screen and (max-width: 800px) {
  .result_content {
    width: 85% !important;
  }
  .scheduler-border {
    width: 100% !important;
  }

  .result_content_second {
    width: 80% !important;
  }
}
.result {
  display: none;
  position: fixed;
  z-index: 1050;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.72);
}

.result_content {
  margin: auto;

  width: 80%;
  text-align: center;
  min-height: 250px;
  overflow-x: overlay;
}
@media only screen and (max-width: 800px) {
  .NotificationContent {
    width: 85% !important;
  }
}

.result_second {
  display: none;
  position: fixed;
  z-index: 1050;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0 0 0 / 82%);
}

.result_content_second {
  margin: auto;
  width: 50%;
  text-align: center;
  min-height: 250px;
  overflow-x: overlay;
}
.result_pos {
  display: none;
  position: fixed;
  z-index: 1050;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0 0 0 / 82%);
}
.result_pos_customers {
  display: none;
  position: fixed;
  z-index: 1050;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0 0 0 / 82%);
}

.result_content_pos {
  margin: auto;

  width: 337px;
  text-align: center;
  min-height: 250px;
  overflow-x: overlay;
}
.result_content_pos_customers {
  margin: auto;

  width: 337px;
  text-align: center;
  min-height: 250px;
  overflow-x: overlay;
}

.row .form-group .col-lg-12,
.form-group.col-lg-4 {
  text-align: left !important;
}

/* start btn login */
.btn-login {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  color: #fff;
  box-shadow: 0px 1px 8px grey;
  transition: transform 0.3s ease-in-out;
}
.btn-login:hover,
.btn-login:active,
.btn-login:focus {
  transform: scale(1.05);
  box-shadow: 0px 1px 8px grey !important;
}
/* // end btn login */

/* start main menu */
.navigation-main .nav-item.active-item a {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  box-shadow: 0 0 10px 1px #09adee;
  border-radius: 4px;
}

.navigation-main .nav-item.active-item a svg{
    color: #fff !important;
}

.navigation-main .nav-item.active-item i,
.navigation-main .nav-item.active-item span {
  color: #fff !important;
}

.navigation-main .nav-item a .badge {
  background-color: #dc3545a8;
  color: #fff !important;
}
.navigation-main .nav-item.active-item a .badge {
  background: #dc3545;
}

.main-menu .nav-item svg,
.main-menu .nav-item i,
.main-menu .nav-item span {
  color: #09adee !important;
}

.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:after {
  background-image: none;

  content: "\f105";
  font-family: FontAwesome;
  color: #09adee;
}
[lang="en"]
  .vertical-layout.vertical-menu-modern.menu-expanded
  .main-menu
  .navigation
  li.has-sub
  > a:after {
  right: auto;
  left: 18px;
  top: 16px;
}
.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.floating-nav {
  width: calc(100vw - (100vw - 100%) - calc(2rem * 2) - 260px);
}
[lang="ar"] .vertical-overlay-menu.menu-open .main-menu {
  right: 260px;
  left: 0;
  transform: translate3d(100%, 0, 0);
  z-index: 10000000;
}
[lang="ar"] .vertical-overlay-menu.menu-hide .main-menu {
  right: -260px;
  left: 0;
  transform: translate3d(200%, 0, 0);
  transition: all 0.5s ease-in-out;
}
[lang="ar"] .app-content {
  margin-left: 0 !important;
  transition: width 1.25s, opacity 1.25s, transform 1.25s;
}
[lang="ar"] .vertical-overlay-menu .content {
  margin-right: 0 !important;
}
/*  */

.main-menu.menu-light .navigation > li.active a,
.main-menu.menu-dark .navigation > li.active > a {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  color: #fff !important;
  box-shadow: 0px 1px 8px grey !important;
}

.main-menu-content .navigation-main .active span,
.main-menu-content .navigation-main .active svg,
.dark-layout .main-menu-content .navigation-main .active span,
.dark-layout .main-menu-content .navigation-main .active svg {
  color: #fff !important;
}

.main-menu .navigation-main .navigation-header span {
  color: #6e6b7b !important;
}
.dark-layout .main-menu .navigation-main .navigation-header span {
  color: #fff !important;
}
/*  */
.main-menu.menu-light .navigation > li ul .active,
.main-menu.menu-dark .navigation > li ul .active {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  box-shadow: 0 0 10px 1px #09adee !important;
}

/*  */
.dark-layout .main-menu .navigation > li ul .active span,
.dark-layout .main-menu .navigation > li ul .active i,
.main-menu.menu-light .navigation > li ul .active span,
.main-menu.menu-light .navigation > li ul .active i {
  color: #fff !important;
}

.scroll-top {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  background-color: #09adee;
  color: #fff;
  box-shadow: 0px 1px 8px grey;
}
.scroll-top:hover {
  box-shadow: 0px 1px 8px grey !important;
}

/* dropdown notification */
.dropdown-notification .dropdown-header {
  background: #09adee;
}
.dropdown-notification .notification-title {
  color: #fff;
}
/* // end main menu */

/* start page heading */
.page-heading {
  position: relative;
  margin: 20px 0 40px;
}
.page-heading .heading-bar {
  background-color: #fff;
  height: 25px;
}
.dark-layout .page-heading .heading-bar {
  background-color: #283046;
}
.page-heading h1,
.page-heading img {
  position: absolute;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}
.page-heading h1 {
  top: 50%;
  margin: 0;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
}
.page-heading img {
  top: 70%;
  max-width: 300px;
  width: 70%;
  height: 55px;
}
/* // end page heading */

/* start table */
.table-responsive td .dropdown-menu.show {
  display: flex;
  top: -24px !important;
  transform: unset !important;
  left: 20px !important;
  right: unset !important;
  min-width: 45px;
}

[lang="en"] .table-responsive td .dropdown-menu.show {
  left: unset !important;
  right: 20px !important;
}

.table-responsive td .dropdown-menu .dropdown-item {
  padding: 5px 12px;
  text-align: center;
}

.table-responsive {
  overflow: auto;
}

.table-responsive thead tr:first-of-type th {
  background: #00aeef !important;
  color: #fff !important;
}

.table-responsive tbody td,
.table-responsive thead th {
  text-align: center;
  font-size: 10px;
  padding: 10px !important;
  white-space: nowrap;
}

@media (min-width: 576px) {
  .table-responsive thead th,
  .table-responsive tbody td {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .table-responsive thead th,
  .table-responsive tbody td {
    font-size: 14px;
  }
}

.table-responsive tbody td i {
  font-size: 12px !important;
}

.icon_toggle_info {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  background-color: #09adee;
  width: 20px;
  height: 20px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  margin: auto;
}

.list_info {
  display: flex;
  flex-direction: column;
  text-align: initial;
  cursor: default;
}

.list_info li {
  width: 100%;
  margin-bottom: 15px;
  list-style: none;
}

.list_info li button {
  width: 25px !important;
  border: 1px solid grey;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: transform 0.3s ease-in-out;
  width: 60px !important;
  height: 30px !important;
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  border-color: #09adee !important;
  box-shadow: 0px 1px 8px grey;
}
.list_info li button:hover,
.list_info li button:active,
.list_info li button:focus {
  transform: scale(1.05);
}

.list_info li button i {
  font-size: 10px !important;
  color: #fff !important;
}

.card-primary {
  box-shadow: 0 1px 8px grey;
}

/* end table */

/* ----- start filters & add form btn ----- */
[lang="en"] .select2-selection--single .select2-selection__arrow {
  margin-top: 0px;
  margin-right: 10px;
}

/* start inputs & selects in filter section */
.select2-selection__placeholder {
  color: #999 !important;
}

.light-layout .select2-selection--single,
.select2-selection--multiple {
  border-color: #d8d6de !important;
}

.dark-layout .select2-selection--single,
.dark-layout .select2-selection--multiple {
  border-color: #404656 !important;
}

.select2-selection__rendered {
  color: #999 !important;
  text-align: right !important;
}
[lang="en"] .select2-selection__rendered {
  text-align: left !important;
}
/* // end inputs & selects in filter section */

#showFilter {
  color: #fff !important;
  background-color: #00aeef;
  border-color: #09adee;
  padding: 8px 18px;
  display: block;
  margin: auto;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 1px 8px grey;
  margin-bottom: 20px;
  white-space: nowrap;
}

#filterDialog {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#DataTables_Table_1_filter {
  margin-bottom: 20px;
}

#showFilter,
#AddForm {
  padding: 8px 18px;
  display: block;
  margin: auto;
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  border: 0 !important;
  color: #fff;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 1px 8px grey;
  width: 120px;
  height: 30px;
}

@media (min-width: 768px) {
  #showFilter,
  #AddForm {
    margin: unset;
  }
}

#showFilter:hover,
#showFilter:active,
#showFilter:focus,
#AddForm:hover,
#AddForm:active,
#AddForm:focus {
  transform: scale(1.05);
  background-color: #00aeef !important;
}

#AddForm {
  margin-top: 20px;
}

.btn_search_question {
  background: #00aeef !important;
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  border-color: #00aeef !important;
  box-shadow: 0px 1px 8px grey;
  color: #fff !important;
  transition: transform 0.3s ease-in-out;
  width: 120px;
  height: 30px;
}

.btn_search_question:hover,
.btn_search_question:active,
.btn_search_question:focus {
  transform: scale(1.05);
  background-color: #00aeef !important;
  box-shadow: 0px 1px 8px grey !important;
}

.app-content #search_btn,
.container_btn_search {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  border-color: #00aeef !important;
  color: #fff;
  box-shadow: 0px 1px 8px grey;
  width: 120px !important;
  height: 30px !important;
  padding: 0 !important;
  transition: transform 0.3s ease-in-out;
}

.container_btn_search:hover,
.container_btn_search:active,
.container_btn_search:focus {
  transform: scale(1.05);
  box-shadow: 0px 1px 8px grey !important;
}
/* ----- // end filters & add form btn ----- */

/* start save btn && close btn */
#Save,
#Close {
  padding: 6px 16px !important;
  color: #fff !important;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 1px 8px grey;
}

@media (min-width: 500px) {
  #Save,
  #Close {
    padding: 8px 18px !important;
  }
}

#Save:hover,
#Save:focus,
#Save:active,
#Close:hover,
#Close:focus,
#Close:active {
  transform: scale(1.05);
}

#Save {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  background-color: #09adee;
  border-color: #09adee !important;
}

#Save:hover,
#Save:focus,
#Save:active {
  background: #09adee !important;
}

#Close {
  background-color: #e63233;
}

.result .flex-nowrap .form-group {
  text-align: center;
}

/* // end save btn && close btn */

/* ----- start sweet alert ----- */
.swal2-popup {
  padding: 10px;
}
.dark-layout .swal2-popup {
  background-color: #283046;
}

.swal2-popup .swal2-icon.swal2-warning {
  border-color: #09adee !important;
}
.swal2-popup .swal2-icon-content {
  color: #09adee !important;
}
.swal2-popup .swal2-title {
  font-size: 14px;
  margin: 8px 0;
}
@media (min-width: 576px) {
  .swal2-popup .swal2-title {
    font-size: 20px;
  }
}

.swal2-popup .swal2-html-container {
  color: #595959;
}
.dark-layout .swal2-popup .swal2-html-container {
  color: #d0d2d6;
}

/* start sweet alert btns */
.swal2-popup .swal2-confirm,
.swal2-popup .swal2-cancel {
  padding: 6px 16px;
  color: #fff !important;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 1px 8px grey;
}

@media (min-width: 500px) {
  .swal2-popup .swal2-confirm,
  .swal2-popup .swal2-cancel {
    padding: 8px 18px;
  }
}

.swal2-popup .swal2-confirm:hover,
.swal2-popup .swal2-confirm:focus,
.swal2-popup .swal2-confirm:active,
.swal2-popup .swal2-cancel:hover,
.swal2-popup .swal2-cancel:focus,
.swal2-popup .swal2-cancel:active {
  transform: scale(1.05);
  box-shadow: 0px 1px 8px grey;
}

.swal2-popup .swal2-confirm {
  background: #09adee;
  border-color: #09adee !important;
}

.swal2-popup .swal2-confirm:hover,
.swal2-popup .swal2-confirm:focus,
.swal2-popup .swal2-confirm:active {
  background: #09adee !important;
}

.swal2-popup .swal2-cancel,
.swal2-popup .swal2-cancel:hover,
.swal2-popup .swal2-cancel:active,
.swal2-popup .swal2-cancel:focus {
  background-color: #e63233 !important;
  box-shadow: 0px 1px 8px grey;
}
/* // end sweet alert btns */
/* // ----- end sweet alert ----- */

/* start modal show image */
.modal-show-image {
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
  transform: scale(0);
}
.modal-show-image.show {
  transform: scale(1);
  padding: 0 !important;
}
.modal-show-image .modal-dialog {
  transition: width 1.3s ease-in-out;
  width: 80%;
  height: 80%;
  transform: scale(0.75) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-show-image .modal-dialog.scale-modal-dialog {
  transform: scale(0.9) !important;
}
.modal-show-image .modal-header {
  background: #09adee !important;
  justify-content: flex-start;
}
.modal-show-image .icon-header {
  font-size: 14px;
  cursor: pointer;
  margin: 0 10px;
  color: #fff;
}
@media (min-width: 576px) {
  .modal-show-image .icon-header {
    font-size: 20px;
  }
}
.modal-show-image .modal-header .btn-close-show-image {
  color: #e63233;
}
.modal-show-image .modal-content {
  /* max-height: 100%; */
  width: 100%;
  height: 100%;
  box-shadow: 0px 1px 8px grey;
}
.modal-show-image .modal-body {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 0;
  max-height: 100%;
}
.modal-show-image .modal-body img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
/* // end modal show image */

/* start choice img */
.choice_img {
  cursor: pointer;
}
/* // end choice img */

/* start pagination */
.pagination .page-item a {
  height: 100%;
}
.page-item.active .page-link {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
}
.container_btn_navigation {
  display: flex;
  justify-content: center;
}
.container_btn_navigation input,
.container_btn_navigation button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin: 0 5px;
}
.container_btn_navigation button {
  border: 0;
  color: #fff;
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  /* border-radius: 2px; */
}
[lang="ar"] .container_btn_navigation input {
  /* border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0; */
}
[lang="ar"] .container_btn_navigation button {
  /* border-top-left-radius: 0;
  border-bottom-left-radius: 0; */
}
/* // end pagination */

/* start btn custom */
.btn-custom {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  background-color: #00aeef;
  color: #fff;
  min-width: 120px;
  height: 30px;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 1px 2px 8px #808080;
  transition: all 0.3s ease-in-out;
}
.btn-custom:hover,
.btn-custom:active,
.btn-custom:focus {
  background: #00aeef;
  box-shadow: 1px 2px 8px #808080 !important;
  transform: scale(1.025);
}
/* // end btn custom */

/* start table */
.result .table tbody tr:first-of-type {
  background-color: #09adee;
}

.result .table tbody tr:first-of-type td,
.result .table tbody tr:first-of-type th {
  color: #fff;
}

tbody tr:not(:first-of-type):nth-child(even) {
  background-color: #f3f2f7;
}

.dark-layout tbody tr:not(:first-of-type):nth-child(even) {
  background-color: #343d55;
}
/* // end table */

/* start modal internet connection */
.modal-internet-connection {
  display: none !important;
}
.modal-internet-connection.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-internet-connection .modal-dialog {
  width: 100%;
}

.modal-internet-connection .modal-content {
  padding: 0 !important;
  border: 0;
}
.modal-internet-connection .modal-title {
  text-align: center;
  color: #fff !important;
  font-size: 12px !important;
}

.modal-internet-connection.show .modal-body {
  background-color: #fff !important;
}

.dark-layout .modal-internet-connection.show .modal-body {
  background-color: #283046 !important;
}

.modal-internet-connection .modal-body i {
  font-size: 45px !important;
  color: #6e6b7b !important;
}
.dark-layout .modal-internet-connection .modal-body i {
  color: #fff !important;
}

.modal-internet-connection .modal-body .container_icon_disconnect {
  position: relative;
}

.modal-internet-connection .modal-body .container_icon_disconnect .slash_disconnect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-46%, -55%) rotate(-50deg);
  width: 7px;
  height: 140%;
  background-color: #6e6b7b !important;
  border-radius: 20px;
}
.dark-layout .modal-internet-connection .modal-body .container_icon_disconnect .slash_disconnect {
  background-color: #fff !important;
}

@media screen and (min-width: 576px) {
  .modal-internet-connection .modal-title {
    font-size: 15px !important;
  }
  .modal-internet-connection .modal-body i {
    font-size: 75px !important;
  }
  .modal-internet-connection .modal-body .container_icon_disconnect .slash_disconnect {
    width: 9px;
  }
}

@media screen and (min-width: 768px) {
  .modal-internet-connection .modal-title {
    font-size: 18px !important;
  }
  .modal-internet-connection .modal-body i {
    font-size: 100px !important;
  }
  .modal-internet-connection .modal-body .container_icon_disconnect .slash_disconnect {
    width: 11px;
  }
}

@media screen and (min-width: 992px) {
  .modal-internet-connection .modal-title {
    font-size: 22px !important;
  }
  .modal-internet-connection .modal-body i {
    font-size: 150px !important;
  }
  .modal-internet-connection .modal-body .container_icon_disconnect .slash_disconnect {
    width: 15px;
  }
}

.modal-internet-connection .modal-header {
  align-items: center !important;
  background-color: #00aeef !important;
  color: #fff !important;
}

.modal-internet-connection.modal .modal-header .close-modal-btn {
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1;
  box-shadow: none;
  transform: translate(0px, 0px) !important;
}

.dark-layout .modal-internet-connection.modal .modal-header .close-modal-btn {
  background: transparent !important;
  box-shadow: none !important;
}

.modal-internet-connection .modal-header .close-modal-btn:hover,
.modal-internet-connection .modal-header .close-modal-btn:active,
.modal-internet-connection .modal-header .close-modal-btn:focus {
  transform: translate(0px, 0px) !important;
}

.modal-internet-connection.modal .modal-header .close-modal-btn .close-modal-icon {
  color: #fff !important;
  opacity: 1;
  font-size: 18px;
}

@media screen and (min-width: 992px) {
  .modal-internet-connection.modal .modal-header .close-modal-btn .close-modal-icon {
    font-size: 22px;
  }
}

.modal-internet-connection .store .modal .modal-header .flex-offset {
  width: 1px;
  height: 1px;
}

.modal-internet-connection .modal-header {
  justify-content: center;
}

.modal-internet-connection .modal-header .close-modal-btn,
.modal-internet-connection .store .modal .modal-header .flex-offset {
  display: none;
}

/* // end modal internet connection */