/* THEME */


/* Change Default Font */
body {
  font-family: "Source Sans Pro";
}


/* Set application background */
body {
  background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
              linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
              linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
              linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
              linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
              linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-color: #131313 !important;
  background-size: 20px 20px;
}

/* Custom Variables */
:root {
  --custom-rounding: 0.75rem;
  --custom-delay-short: 0.5s;
  --custom-delay-medium: 1s;
  --custom-delay-long: 2s;
}


/* Override Bootstrap opacity values */
.btn {
  --bs-btn-disabled-opacity: 0.3;
  transition: opacity var(--custom-delay-short);
}

pre {
  display: inline !important;
  color: var(--bs-info);
}

/* Dark Theme Background */
html[data-bs-theme="dark"] #divHost {
  background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
              linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
              linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
              linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
              linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
              linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-color: #131313 !important;
  background-size: 20px 20px;
}
/* Light Theme Background */
html[data-bs-theme="light"] #divHost {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23dbc8fb' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}


/* Sometimes it is handy to have this */

li.cursor-pointer,
div.cursor-pointer {
  cursor: pointer;
}



/* Customize scrollbars. */
::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

/* Dark Theme */
html[data-bs-theme="dark"] ::-webkit-scrollbar-corner {
  background-color: var(--bs-dark);
}
html[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background-color: var(--bs-secondary);
  border-radius: 200px;
}
html[data-bs-theme="dark"] .tabulator ::-webkit-scrollbar-track {
  background-color: var(--bs-secondary);
  border-radius: 0px;
}
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: var(--bs-dark);
  border-radius: 200px;
  border: 1px solid var(--bs-secondary);
}

/* Light Theme */
html[data-bs-theme="light"] ::-webkit-scrollbar-corner {
  background-color: var(--bs-info);
}
html[data-bs-theme="light"] ::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 200px;
}
html[data-bs-theme="light"] ::-webkit-scrollbar-thumb {
  background-color: var(--bs-info);
  border-radius: 200px;
  border: 1px solid white;
}


/* PRINTING */
@media print {
  .app-header,
  .app-footer,
  .app-sidebar,
  .no-print, .no-print * {
    display: none !important;
  }
    canvas {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto!important;
        width: auto!important;
    }
  .container {
    page-break-after: always;
  }
  .box-body {
    padding: 0;
  }
}



/* APPLICATION */

/* Main Application Container */
#divSubForm,
#divHost {
  border-radius: 0px !important;
  border: none !important;
  top: 0px !important;
  left: 0px !important;
  width: 100% !important;
  min-height: 100%;
  overflow: auto;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--custom-delay-short) !important;
}


/* Toasts - Control where they appear */
#divToasts {
  z-index: 999999;
  position: absolute;
  top: 5px !important;
  right: 5px !important;
  width: 300px !important;
  left: unset !important;
  pointer-events: none;
}

/* Info-Box Adjustments */
.info-box {
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--custom-rounding);
  overflow: hidden;
}

/* card adjustments */
.card {
  border-radius: var(--custom-rounding);
}

/* LOGIN FORM */

.LoginForm {
  background: rgb(131,58,180) !important;
  background: linear-gradient(66deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%) !important;
}

.Login-Title {
  filter: drop-shadow(0px 0px 4px royalblue) drop-shadow(0px 0px 4px royalblue);
  font-size: 36px;
  color: white;
  line-height: 1.2;
}

.login-box {
  position: absolute;
  width: 360px;
  height: 379px;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transition: var(--custom-delay-medium);
}
.login-box > .card {
  border-radius: var(--custom-rounding);
  overflow: hidden;
}

#editPassword,
#editUsername {
  color-scheme: dark;
  background: rgba(70, 90, 126, 0.4) !important;
  border-right: 1px solid var(--bs-border-color);

}
#editUsername:focus-visible,
#editPassword:focus-visible {
  border-right: 1px solid #86b7fe;
}



/* DASHBOARDS */
li.nav-item.dropdown.user-menu > ul {
  right: -28px;
  border-radius: var(--custom-rounding);
}
li.nav-item.dropdown.user-menu > ul > li.user-header.text-bg-primary {
  border-top-left-radius: var(--custom-rounding);
  border-top-right-radius: var(--custom-rounding);
}



/* TABULATOR */

/* Dark Theme */

/* Tabulator background color */
html[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table {
    background-color: transparent;
}
html[data-bs-theme="dark"] .tabulator-tableholder,
html[data-bs-theme="dark"] .tabulator {
  background-color: var(--bs-dark);
  border-color: rgba(255,255,255,0.15) !important;
  border-width: 0px !important;
}
html[data-bs-theme="dark"] .tabulator-col {
  border-right: 0px !important;
}
html[data-bs-theme="dark"] .tabulator-col-title {
  color: rgb(173,181,189);
  font-size: 16px;
  border-width: 0px !important;
  padding: 4px 8px;
}
html[data-bs-theme="dark"] .tabulator-header {
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

html[data-bs-theme="dark"] .tabulator-cell {
  color: rgb(173,181,189);
  padding: 8px 12px;
  border-right: 0px !important;
  font-size: 16px;
}

/* Column Headers */
html[data-bs-theme="dark"] .tabulator-header,
html[data-bs-theme="dark"] .tabulator-col {
  background: var(--bs-dark) !important;
  color: rgb(173,181,189);
}

/* Odd rows, even rows, selected rows */
html[data-bs-theme="dark"] div.tabulator-row.tabulator-selected {
  background-color: var(--bs-primary) !important;
}
html[data-bs-theme="dark"] div.tabulator-row.tabulator-row-even {
  background-color: var(--bs-dark);
}
html[data-bs-theme="dark"] div.tabulator-row.tabulator-row-odd {
  background-color: #191c21;
}

/* Fancy animation for a chat- waiting indicator */
/* https://codepen.io/nzbin/pen/GGrXbp */

.dot-collision {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  margin: 7px 0px 7px 20px;
}
.dot-collision::before, .dot-collision::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-collision::before {
  left: -10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dot-collision-before 2s infinite ease-in;
}
.dot-collision::after {
  left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dot-collision-after 2s infinite ease-in;
  animation-delay: 1s;
}

@keyframes dot-collision-before {
  0%, 50%, 75%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-15px);
  }
}
@keyframes dot-collision-after {
  0%, 50%, 75%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(15px);
  }
}


/* Recent ImageAI Image Thumbnails */
#ImageRecent > div > img {
  width: 92px;
  height: 92px;
  border-radius: 0.375rem;
}

/* Viewer */
#divViewer {
  position:absolute;
  top: 0px;
  left: 0px;
  width: 100% !important;
  height: 100% !important;
  background-color: black;
  opacity: 0;
  transition: opacity var(--custom-delay-short);
  z-index: 999997;
}
#btnViewerClose {
  position: absolute;
  top: 25px;
  right: 16px;
  width: 50px !important;
  height: 50px !important;
  color: white;
  opacity: 0;
  transition: opacity var(--custom-delay-short);
  z-index: 999999;
}
#divViewerImage {
  position:absolute;
  top: 0px;
  left: 0px;
  width: calc(100% - 140px) !important;
  height: calc(100% - 40px) !important;
  margin: 20px 70px 20px 70px;
  opacity: 0;
  transition: opacity var(--custom-delay-short);
  z-index: 999998;
}
#divViewerImage > div,
#divViewerImage > img {
  border-radius: 1rem !important;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin-left: 50% !important;
  transform: translate(-50%);
}
#divViewerImage > div > img {
  width:100%;
  height: 100%;
  border-radius: 1rem;
}
.ViewableImage {
  cursor: pointer;
}