/* root */
:root {
  --bs-font-sans-serif: "Public Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --box-shadow-default: 0px 0px 10px 2px #1d1e1e78;
  --box-shadow-small: 0px 0px 10px -2px #1d1e1e78;
  --canvas-min-width: 206mm;
  --canvas-max-width: 210mm;
  --canvas-min-height: calc(297mm - 23mm);
}

html,
body {
  /* height: 100%; */
  /* overflow: auto; */
  /* scroll-behavior: smooth; */
}

/* test */
.outline {
  outline: 1px solid black !important;
}
/* focus */
div,
span,
p:focus {
  outline: 0px;
}

span.divplaceholder,
div.divplaceholder {
  position: absolute;
  font-size: small;
}

.pointer {
  cursor: pointer !important;
}
/* body */
body {
  font-family: var(--bs-body-font-family);
  -webkit-print-color-adjust: exact !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  margin-top: 80px;
}
body > .body {
  /* top: 70px; */
  min-height: calc(100vh - 70px);
  /* min-height: calc(100vh); */
  padding-top: 15px;
  margin-top: 70px;
}
body > .body.margin-left {
  margin-left: 0;
}

/* footer */
footer {
  min-height: max-content;
  padding: 9px 0;
  /* position: absolute; */
  /* bottom: 0; */
  /* min-width: 100%; */
}

/* fonts styles*/
.ltr {
  direction: ltr !important;
}
/* link */
a {
  text-decoration: none !important;
}
.link:hover {
  color: var(--bs-primary);
  text-decoration: underline;
  cursor: pointer;
}
/* inputs */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* labels */
.form-label-f {
  margin-bottom: 0.1rem;
  /* color: rgb(120 119 119); */
  color: rgb(78 77 77);
}
/* button */
button.btn-close {
  padding: 0 !important;
  font-size: 11px !important;
  top: 1px !important;
  right: 3px !important;
}
/* alert */
.alert {
  padding: 0.25rem;
}
/* grid */
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* text styles */
.text-justify {
  text-align: justify !important;
}

.full_text {
  white-space: nowrap;
}

/* Forms */
.form-control {
  border: var(--bs-border-width) dashed #bdbdbd;
}
.form-control.valid {
  border-color: #198754;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.invalid {
  border-color: #dc3545 !important;
  padding-right: calc(1.5em + 0.75rem) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(0.375em + 0.1875rem) center !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}
.form-control.invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.form-control {
  word-break: break-word;
}
div.form-control,
span.form-control {
  min-width: 150px;
}
div.form-control[contenteditable="false"],
span.form-control[contenteditable="false"] {
  background-color: #eaeced;
}

.form-control[type="radio"] {
}
.input-group-text {
  border-style: dashed;
}

/* input_checkboxs_css */
input.form-control[type="radio"],
input.form-control[type="checkbox"] {
  width: max-content;
  /* display: inline-block; */
  appearance: auto;
}
input.form-control[type="radio"] + label,
input.form-control[type="checkbox"] + label {
  user-select: none;
}

/* List */
.list-group-numbered > .list-group-item::before {
  content: counters(section, ".") "" !important;
  counter-increment: section;
}

/* button css */
/* hover effect on button  - change background to lightgery*/
.btn_hover:hover {
  background-color: #80808026;
}
.btn.disabled {
  background: var(--bs-gray-500) !important;
  border-color: grey;
  cursor: not-allowed;
  color: black !important;
}
.btn[disabled] {
  cursor: no-drop !important;
  pointer-events: auto;
}
.btn.no-btn-css {
  padding: 0;
  border: 0;
  background-color: transparent;
}
.btn.no-btn-css:hover {
  border: 0 !important;
  outline: 0 !important;
}

/* z-index */
zindex-10 {
  z-index: 10 !important;
}
/* table properties */
table.table.vertical-middle th,
table.table.vertical-middle td {
  vertical-align: middle;
}
table.table-round tr th:first-child.heading {
  border-radius: 8px 0 0 0;
}
table.table-round tr th:last-child.heading {
  border-radius: 0 8px 0 0;
}
table th.heading {
  background-color: #eaedef;
  /* border-bottom: 1px solid var(--bs-gray-500); */
}
table.table-center th,
table.table-center td {
  text-align: center;
}
table.table-td-center td {
  text-align: center;
}
table.table-th-center th {
  text-align: center;
}

.table.table-round tr th:first-child.heading {
  border-radius: 8px 0 0 0;
}
.table.table-round tr th:last-child.heading {
  border-radius: 0 8px 0 0;
}

/* ^table properties */
/* print properties */

.onlyprint {
  display: none !important;
}

@media print {
  .noprint {
    display: none !important;
  }
  .onlyprint {
    display: block !important;
    /* position: relative; */
    /* top: 0 !important; */
  }
  .page-break-after-always {
    /* break-after: right; */
    page-break-after: always !important;
    /* break-after: always !important; */
  }
  .page-break-before-always {
    page-break-before: always !important;
  }
  .avoid-page-break {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }
  /* table common properties */
  table {
    page-break-inside: auto !important;
    /* margin: 5pt 0 0; */
  }
  table tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }
  table thead {
    display: table-header-group;
    /* margin: 0 0 5pt 0; */
  }
  table tfoot {
    display: table-footer-group;
  }

  .canvas {
    margin-bottom: 0pt !important;
    padding: 0pt;
  }
  /* table td > div {
    page-break-inside: avoid !important;
    margin: 4pt 0pt;
  } */
}
/* tfoot border css */
.tfootborder {
  border: 1pt solid white !important;
}
@page {
  /* size: A4;
  margin: 10mm 2mm !important; */
}
@page :first {
  /* margin: 5mm 0 !important; */
  /* margin: 2mm 0 7mm 0 !important; */
}
/* translate span css */
.trans {
  display: inline-block;
  min-width: 15px;
  min-height: 15px;
  word-wrap: break-word;
}
/* loading css */
.loading-circle {
  display: inline-block;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  min-width: 17px;
  max-width: 17px;
  min-height: 17px;
  animation: spin 2s linear infinite;
  margin: 0 6px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Floating Notification */
.floating_notification-con {
  position: fixed !important;
  bottom: 0;
  /* top: 0; */
  max-width: 200px;
  z-index: 9000;
  /* outline: 1px solid; */
}
.floating_notification-con > .floating-notification {
  position: relative;
  left: calc(-100% - 200px);
  min-width: 300px;
  margin: 10px 0px 10px 15px;
  min-height: 25px;
  word-wrap: break-word;
  border-left: 4px solid var(--bs-primary);
  padding: 15px 10px;
  border-radius: 8px;
  box-shadow: 7px 0px 15px -3px #6c757dcc;
  cursor: default;
}
.floating_notification-con > .floating-notification.bg {
  background-color: rgba(255, 255, 255, 0.749);
}
.floating_notification-con > .floating-notification.bg.no-opacity {
  background-color: rgba(255, 255, 255, 1);
}
.floating_notification-con > .floating-notification.in {
  left: 0;
  transition: left 0.5s linear;
}
.floating_notification-con > .floating-notification.out {
  left: calc(100% - 200px);
  transition: left 0.5s linear 1s;
}
.floating_notification-con > .floating-notification.alert-danger {
  border-color: #95010e;
  border-width: 1px 1px 1px 15px !important;
  border-style: solid;
  background: white;
  min-width: calc(100vw - 72px);
  bottom: 25px;
  text-align: center;
  font-size: 22px;
  padding: 7px 0;
  font-weight: bold;
}
/* page a4 */
.canvas {
  min-width: var(--canvas-min-width);
  max-width: var(--canvas-max-width);
  min-height: var(--canvas-min-height);
  padding: 12pt;
  margin-bottom: 9pt !important;
  /* outline: 1px solid; */
}
@print {
  .canvas {
    height: auto;
    margin-bottom: 0pt !important;
  }
}
/* tip */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  background: #00000099;
  color: white;
  font-size: x-small;
  padding: 3px 6px;
  border-radius: 10px;
  white-space: nowrap;
  z-index: 20;
}
[data-tooltip]:hover::after {
  display: block;
}
[data-tooltip].up::after {
  top: -100%;
}
[data-tooltip].down::after {
  bottom: -100%;
}
[data-tooltip].right::after {
  left: calc(100% + 3px);
}
[data-tooltip].left::after {
  right: calc(100% + 3px);
}
[data-tooltip]::before {
  display: none;
  content: " ";
  position: absolute;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}
[data-tooltip]:hover::before {
  display: block;
}
[data-tooltip].up::before {
  bottom: calc(100% - 8px);
  border-top-color: #000000b3 !important;
}
[data-tooltip].down::before {
  top: calc(100% - 8px);
  border-bottom-color: #000000b3 !important;
}
[data-tooltip].left::before {
  left: calc(100% - 22px);
  border-left-color: #000000b3 !important;
}
[data-tooltip].right::before {
  right: calc(100% - 21px);
  border-right-color: #000000b3 !important;
}

.tooltip-con {
  position: relative;
}
.tooltip-con:hover .tooltip {
  display: block !important;
  opacity: 1;
}
.tooltip {
  display: none;
  position: absolute;
}
.tip {
  content: " ";
  position: absolute;
  /* margin-left: -5px; */
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}
.tip.up {
  bottom: 100%;
  border-bottom-color: #000000b3 !important;
}
.tip.left {
  right: 100%;
  /* border-width: 6px 5px 6px 0px !important; */
  border-right-color: #000000b3 !important;
}
.tip.right {
  left: 100%;
  border-left-color: #000000b3 !important;
}
.tip.down {
  top: 100%;
  border-top-color: #000000b3 !important;
}
/* box shadows */
.box-shadow-default {
  box-shadow: 0px 0px 10px 2px #1d1e1e78;
}
.box-shadow-small {
  box-shadow: 0px 0px 10px -2px #1d1e1e78;
}
/* card css */
*.hover-shadow:hover {
  box-shadow: var(--box-shadow-default);
}
/* max-content */
.max-content {
  min-width: max-content !important;
  max-width: max-content !important;
}
/* round borders */
.round-border {
  border-radius: 8px;
}

/* rating */
.rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.rating > input {
  /* display: none; */
  padding: 0 !important;
  /* border: 1px solid !important; */
  /* min-width: 25px; */
}

.rating > label {
  position: relative;
  width: 1.1em;
  font-size: 26px;
  color: #005089;
  cursor: pointer;
}

.rating > label::before {
  content: "\2605";
  position: absolute;
  opacity: 0;
}

.rating > label:hover:before,
.rating > label:hover ~ label:before {
  opacity: 1 !important;
}

.rating > input:checked ~ label:before {
  opacity: 1;
}

.rating:hover > input:checked ~ label:before {
  /* opacity: 0.4; */
}

/* 404 page */
img._404 {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

._404 {
  background-color: white !important;
  backdrop-filter: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  min-height: 100vh;
}
._404 .home-btn-con a {
  position: absolute;
  bottom: 10%;
  margin: auto;
  left: 0;
  right: 0;
  max-width: max-content;
}

/* padding css */
.padding-5px {
  padding: 5px !important;
}

/* border css */
.no-border,
.border-0 {
  border: 0 !important;
}

/* width css */
.width-350 {
  width: 350px !important;
  min-width: 350px !important;
  max-width: 350px !important;
}

/* medias */
@media only screen and (min-width: 237px) and (max-width: 800px) {
  body > .body.margin-left {
    margin-left: 0rem;
  }

  .floating_notification-con {
    top: 72px !important;
    left: 0;
    bottom: auto;
  }
}

/* right to left */
.rtl {
  direction: rtl;
}

/* font_css */
.fulltext {
  white-space: nowrap;
}

/* history_css */
.history_modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
  min-width: 400px;
  max-width: 600px;
  min-height: 300px;
  max-height: 300px;
  z-index: 10000;
  background: white;
  box-shadow: var(--box-shadow-default);
  border-radius: 13px;
  overflow: hidden;
}

.history_modal > .card-header {
  background-color: #d9d9d9;
  border-bottom: 1px solid #9d9d9d;
  padding: 0;
}
.history_modal .header_text {
  font-size: 23px;
  padding: 6px 0 4px 8px;
}
.history_modal .header_text .icon {
  padding: 0px 9px 0 0;
}
.history_modal .header_text .text {
}

.history_modal .card-body {
  overflow: auto;
}

.history_modal .content {
  max-height: calc(100% - 32px);
  padding: 0 6px;
}

/* gototop */
.gototop {
  position: fixed;
  bottom: 17px;
  right: 55px;
  z-index: 1000;
  padding: 7px;
  margin: 6px;
  background: #00000087;
  border-radius: 10px;
  min-width: 32px;
  max-height: 32px;
  color: white;
  cursor: pointer;
}

/* wa_helpline */
.wa_helpline {
  position: fixed;
  bottom: 3px;
  right: 15px;
  font-size: 46px;
  color: #25d366;
}

/* summernote */
body.summernote {
  background-color: white !important;
  background-image: none;
}
body.summernote .body {
  margin-top: 0 !important;
}

/* backend_help_css */
pre.backend_help {
  max-height: 150px;
  background-color: rgb(237, 237, 237);
  padding: 15px;
  margin: 15px;
  border-radius: 8px;
}

.sticky-col {
  position: sticky;
  z-index: 2;
  left: 0;
}