/*
 * Theme tokens. The dark values apply when fragments/theme_init.ftlh marks <html data-bs-theme="dark">; pages that do
 * not include it (login, public, error pages) always get the light ones. Rules below read these instead of repeating
 * a light and a dark colour. The dark overrides that need more than a token are at the end of the file.
 */
:root {
    --app-page-bg: #fcfcfc;
    --app-surface: #fff;            /* cards, inputs */
    --app-surface-raised: #fff;     /* what floats over the page: menus, pickers, popovers */
    --app-row-alt-bg: #f8f9fa;      /* striped and hovered table rows */
    --app-menu-hover-bg: #f8f9fa;
    --app-menu-active-bg: #e9ecef;
    --app-border: #dee2e6;          /* controls */
    --app-border-soft: #dee2e6;     /* dividers and the edge of floating surfaces */
    --app-text: #495057;
    --app-required: #c10000;
}

:root[data-bs-theme="dark"] {
    --app-page-bg: #19222c;
    --app-surface: #222e3c;
    --app-surface-raised: #293747;
    --app-row-alt-bg: #2d3846;
    --app-menu-hover-bg: #384350;
    --app-menu-active-bg: #4a5564;
    --app-border: #4e5863;
    --app-border-soft: #3a4553;
    --app-text: #d3d5d8;
    --app-required: #ea868f;
}

.otp-field {
  flex-direction: row;
  column-gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.otp-field input {
  height: 45px;
  width: 42px;
  border-radius: 6px;
  outline: none;
  font-size: 1.125rem;
  text-align: center;
  border: 1px solid #ddd;
}
.otp-field input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.otp-field input::-webkit-inner-spin-button,
.otp-field input::-webkit-outer-spin-button {
  display: none;
}

select:hover {
  cursor: pointer;
}

.form-check-label {
  cursor: pointer;
}

/*
.plain main {
  background-image: url('/images/bg.png');
  background-size: 500px;
  background-position: calc(50% - 500px) center;
  background-repeat: no-repeat;
}
*/

.alert {
	border-radius: 0;
}

.min-height-card-image-wrapper {
    min-height: 120px;
    max-width:200px;
}

/* native controls, scrollbars and autofill follow the theme (data-bs-theme is set by fragments/theme_init.ftlh) */
html[data-bs-theme="dark"] {
    color-scheme: dark;
}

/* set for the instant the theme changes, so nothing fades into its new colours after the rest of the page */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

/* Theme dropdown in the navbar: the chosen option carries a check, like the side menu's mode menu (sidebar.css) */
.theme-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.theme-menu .theme-menu-icon {
    display: inline-flex;
    justify-content: center;
    width: 1.25em;
}

.theme-menu .theme-menu-check {
    margin-left: auto;
    visibility: hidden;
}

.theme-menu .dropdown-item[aria-checked="true"] .theme-menu-check {
    visibility: visible;
}

body:not([data-theme="dark"]) .main {
	/*background: #f5f7fb;*/
	/*background: #f9fafc;*/
	background: #fcfcfc;
}

body[data-theme="dark"] .navbar-bg, body[data-theme=dark] .navbar-bg {
    background: unset;
}

.navbar, .card, .dropdown-menu, .iti__country-list, .tab-content {
	box-shadow: none !important;
}


.footer .text-muted {
	color: var(--bs-secondary-color) !important;
}

.dropdown-menu-center-wrapper {
    position: relative !important;
}

.dropdown-menu-center {
    right: auto !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, 0) !important;
    -o-transform: translate(-50%, 0) !important;
    transform: translate(-50%, 0) !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}
  
 .with-border {
	 border: 1px solid var(--app-border);
	 border-radius:0;
 }
 
 .with-shadow {
	 /**box-shadow: 0 0 0.875rem 0 rgba(33,37,41,.05) !important;**/
	 border-radius:0;
 }


.card-title {
	font-weight: 400;
}

.font-very-big {
	font-size: 4rem;
	color: lightgray;
}
.font-very-big-x2 {
	font-size: 6rem;
	color: lightgray;
}

.card-actions a {
    color: var(--app-text);
    text-decoration: none;
}

.card-with-hover:hover {
    box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.15) !important;
    z-index: 1;
    cursor: pointer;
}

.sidebar-user {
    padding: .75rem 1.5rem
}

.sidebar-user a {
    outline: 0;
    text-decoration: none
}

.sidebar-user-title, .sidebar-user-title:hover {
    color: #e9ecef
}


.sidebar-user-subtitle {
    color: #adb5bd
}

.slogan {
    display: block;
    font-size: 13px;
    margin-top: 0px;
    color: #e78200;
    letter-spacing: 0.75px;
	font-weight: 400;
}

.plain .slogan {
    font-size: 15px;
    font-weight: 400;
}

body.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

body {
	overscroll-behavior: none;
}

.nav-icon {
	font-size: 1rem;
    line-height: 2 !important;
	
}

.btn {
	border-radius: 0 !important;
}

.no-background {
    background: none !important;
}

.nav-link:hover {	
    color: var(--bs-link-color);
}

.alert-message {
   padding-right: 2rem !important;
}

.form-wrap.form-builder .stage-wrap.empty {
    border: 1px solid #dee2e6 !important;
}

.form-wrap.form-builder .frmb-control li:first-child {
    border-radius: 0px !important; 
}

.form-wrap.form-builder .frmb-control li:last-child {
    border-radius: 0px !important; 
}

.form-wrap.form-builder .frmb .field-label, .form-wrap.form-builder .frmb .legend {
    color: unset !important;
    font-size: unset !important;

}

.form-wrap.form-builder .frmb li.form-field:first-child {
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
}

.form-wrap.form-builder .frmb li.form-field:last-child {
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.form-wrap.form-builder .frmb .form-elements {
    background: #f5f7fb !important;
    border-radius: 0px !important;
}

.form-wrap.form-builder .frmb-control li:hover {
    background-color: #f5f7fb !important;
}

.language-selector {
  text-align: center;
  margin: 0 0 20px;
  padding: 0;
  li {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    background: white;
    margin: 0;
    line-height: 18px;
  }
}

.overlay-full {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /*background: rgba(0,0,0,0.5);*/
}
#overlayDiv {
  position: relative;
}

.modal-body-host {
  position: relative;
  min-height: 8rem;
}

.overlay-absolute {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (max-width: 768px) {
  .toast-top-right {
    width: 100%;
    right: 0;
  }
  
  .toast-top-right .toast {
	  width: 96% !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }


}

.toast-top-full-width {
	top: 12px !important;
}
 
  

#toast-container>.toast-info {
  background-image: unset !important
}

#toast-container>.toast-error {
  background-image: unset !important
}

#toast-container>.toast-warning {
  background-image: unset !important
}

#toast-container>div {
  box-shadow: none;
  -webkit-box-shadow: none;
}

#toast-container>div:hover {
    box-shadow: none;
    -webkit-box-shadow: none;
    opacity: .8;
}

#toast-container>.toast-error {
	padding-left:15px;
}

#toast-container ul {
    margin-bottom: 0rem;
}

.container {
	width: 96%;
}

.table-hover tr:hover {
    cursor: pointer;
}

.password-style {
	-webkit-text-security: disc; /* Use 'disc', 'circle', or 'square' */
	text-security: disc;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	max-width: 150px;
}

 .form-control {
         min-width: 100px;
}

.form-check-input:hover {
    cursor:pointer;
}

.datepicker-dropdown {
  padding: 15px;
}

.daterangepicker {
  font-family: unset !important;
}

.daterangepicker .ranges li {
  font-size: .875rem !important;
  padding: 8px 12px !important;
}


.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  font-size: .875rem !important;
}

.accordion-button {
    padding: 7px !important;
    padding-left: 15px !important;
}

.grabbing {cursor: grabbing;}

.form-wrap.form-builder .frmb .field-actions .del-button:hover {
    background-color: #dc3545 !important;
}

.form-wrap.form-builder .frmb .field-actions .toggle-form:hover {
    background-color: #3b7ddd !important;
}

.form-wrap.form-builder .frmb .field-actions .copy-button:hover {
    background-color: #fff !important;
    color: #000 !important;
}

.form-wrap.form-builder .frmb .option-actions button, .form-wrap.form-builder .frmb .option-actions a {
    cursor: pointer !important;
}

.form-wrap.form-builder .frmb .option-actions button:hover, .form-wrap.form-builder .frmb .option-actions a:hover {
    text-decoration: none !important;
}

button[aria-expanded="true"] {
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
}

label[class^="formbuilder"] {
    margin-bottom: .5rem !important;
}

.formbuilder-required {
    color: var(--app-required);
    margin-left: 5px;
}

.iti {
    display: block;
}

#fb-editor .form-actions {
    margin-top:20px;
}

body:not([data-theme="dark"]) .accordion {
    --bs-accordion-bg : white !important;
}

.card-img,.card-img-bottom,.card-img-top {
    height:unset !important;
    max-height: 50px !important;
    width: 80%;
}

[data-theme="dark"] .form-wrap.form-builder .frmb-control li {
    background-color: var(--app-page-bg) !important;
    box-shadow: inset 0 0 0 1px var(--app-border);
}

[data-theme="dark"] .form-wrap.form-builder .frmb-control li:hover {
    background-color: var(--app-surface) !important;
    box-shadow: inset 0 0 0 1px var(--app-border);
}

[data-theme="dark"] .form-field {
    background-color: var(--app-surface) !important;
    box-shadow: inset 0 0 0 1px var(--app-border);
}

[data-theme="dark"] .form-field .form-control {
    background-color: var(--app-surface) !important;
    color: var(--app-text);
    border-color: var(--app-border) !important;
}

[data-theme="dark"] .frm-holder,
[data-theme="dark"] .form-wrap.form-builder .frmb .form-elements {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

[data-theme="dark"] .field-actions a {
    background-color: var(--app-page-bg) !important;
    border-color: var(--app-page-bg) !important;

}

[data-theme="dark"] .iti__country-list {
	background-color: var(--app-surface-raised) !important;
	color: var(--app-text) !important;
}

[data-theme="dark"] .accordion-button {
    color: var(--app-text);
}

[data-theme="dark"] .modal-backdrop {
    --bs-backdrop-bg: black;
}

[data-theme="dark"] .overlay {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .overlay-absolute {
    background-color: rgba(34, 46, 60, 0.5) !important;
}

[data-theme="dark"] img[src*="stripe"],
[data-theme="dark"] img[src*="AADE"] {
    filter: invert(1) brightness(2);
}

/*
 * Logos that are dark: the dark theme swaps in a light copy, <name>_dark.svg. Where the logo has a coloured mark only the
 * wordmark turns white; Boom and Guesty are a single dark colour, so they turn white as a whole.
 *
 * Two selectors each, because production serves static files under a content hash (application-prod.properties):
 * guesty.svg locally, guesty-<hash>.svg once deployed. Neither form matches guesty_icon or guesty_dark.
 */
[data-theme="dark"] img[src*="/channelmngs_pms/boom."],
[data-theme="dark"] img[src*="/channelmngs_pms/boom-"] {
    content: url("/images/channelmngs_pms/boom_dark-fb1480c378b4b01770bb131e8c54810c.svg");
}

[data-theme="dark"] img[src*="/channelmngs_pms/boom_icon."],
[data-theme="dark"] img[src*="/channelmngs_pms/boom_icon-"] {
    content: url("/images/channelmngs_pms/boom_icon_dark-ab754f895241646886de425c6b85ec83.svg");
}

[data-theme="dark"] img[src*="/channelmngs_pms/guesty."],
[data-theme="dark"] img[src*="/channelmngs_pms/guesty-"] {
    content: url("/images/channelmngs_pms/guesty_dark-d762b550dd7c0a50a7e953e8dbbb665a.svg");
}

[data-theme="dark"] img[src*="/channelmngs_pms/guesty_icon."],
[data-theme="dark"] img[src*="/channelmngs_pms/guesty_icon-"] {
    content: url("/images/channelmngs_pms/guesty_icon_dark-8e6603fd2ac53071bace1160be3ac100.svg");
}

[data-theme="dark"] img[src*="/channelmngs_pms/hosthub."],
[data-theme="dark"] img[src*="/channelmngs_pms/hosthub-"] {
    content: url("/images/channelmngs_pms/hosthub_dark-05964e6948984f358af0eaf62733103b.svg");
}

[data-theme="dark"] img[src*="/channelmngs_pms/lodgify."],
[data-theme="dark"] img[src*="/channelmngs_pms/lodgify-"] {
    content: url("/images/channelmngs_pms/lodgify_dark-b6e7d6746357492bbfca911c3dce51bf.svg");
}

[data-theme="dark"] img[src*="/channelmngs_pms/hospitable."],
[data-theme="dark"] img[src*="/channelmngs_pms/hospitable-"] {
    content: url("/images/channelmngs_pms/hospitable_dark-20246d2fec036da598173593bf3fa599.svg");
}

[data-theme="dark"] img[src*="/channelmngs_pms/rentability."],
[data-theme="dark"] img[src*="/channelmngs_pms/rentability-"] {
    content: url("/images/channelmngs_pms/rentability_dark-80a7769fa3c1c289b9bc1edcdc302446.svg");
}

[data-theme="dark"] .accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23bdc0c5' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

[data-theme="dark"] .accordion-body {
    background-color: var(--app-surface);
}


body:not([data-theme="dark"]) {
    /*--bs-body-bg: #f9fafc;*/
    --bs-body-bg: #fcfcfc;
}

.btn-block {
    display: block;
    width: 100%;
}

.bg-blue {
    background-color: #232f3e;
}

.bg-white-off {
    background-color: #fcfcfc;
}

.plain-login .btn-primary {
    --bs-btn-padding-y: 0.6rem !important;
}

.note-modal .modal-footer {
display:none;
}

._57be {
    width: 100% !important;
    max-width: unset !important;
}

/* Don't break Bootstrap layout */
.carousel.custom-fade .carousel-item {
  transition: opacity 0.7s ease-in-out;
}

/* Current slide fades out */
.carousel.custom-fade .carousel-item.active.carousel-item-start,
.carousel.custom-fade .carousel-item.active.carousel-item-end {
  opacity: 0;
}

/* Next slide starts invisible */
.carousel.custom-fade .carousel-item-next,
.carousel.custom-fade .carousel-item-prev {
  opacity: 0;
}

/* Next slide fades in AFTER old is gone */
.carousel.custom-fade .carousel-item-next.carousel-item-start,
.carousel.custom-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

/* Tooltip background */
.tooltip-inner {
    background-color: #3b7ddd !important;
    color: white !important;
}

/* Arrow for top placement */
.tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #3b7ddd !important;
}

/* Arrow for bottom placement */
.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #3b7ddd !important;
}

/* Arrow for left placement */
.tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #3b7ddd !important;
}

/* Arrow for right placement */
.tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #3b7ddd !important;
}

.nav-icon svg {
    height: 18px !important;
    width: 18px !important;
}

.nav-item .indicator {
    padding: 0px;
    right: -5px;
    width: 20px;
    height:20px;
}

.iti__country.iti__highlight:not(.iti__active) {
    background-color: var(--app-menu-hover-bg) !important;
}

.iti__active {
    background-color: var(--app-menu-active-bg) !important;
}

.dropdown-item:active {
    color: black;
    background-color: transparent !important;
}

[data-theme="dark"] .dropdown-item:active {
    color: var(--app-text);
    background-color: transparent !important;
}

.nav-link.show {
    color: unset !important;
}

.iti__country.iti__standard,
.iti__country.iti__preferred {
    padding: 7px 25px !important;
}


#notfound {
  position: relative;
  height: 100vh;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.notfound {
  max-width: 920px;
  width: 100%;
  line-height: 1.4;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

.notfound .notfound-inner {
  position: absolute;
  height: 100px;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}

.notfound .notfound-inner h1 {
  font-family: 'Maven Pro', sans-serif;
  color: #ececec;
  font-weight: 900;
  font-size: 276px;
  margin: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.notfound h2 {
  font-size: 36px;
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0px;
}

.notfound p {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 480px) {
  .notfound .notfound-inner h1 {
    font-size: 162px;
  }
  .notfound h2 {
    font-size: 26px;
  }
}

/*
 * Receipt template picker (greece_aade/connection.ftlh, behaviour in app.js). The options are radio buttons; the chosen
 * one is shown large in the preview beside them.
 */
.template-picker-options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.template-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem .5rem .5rem;
    border: 1px solid var(--app-border);
    background-color: var(--app-surface);
    cursor: pointer;
}

.template-option:hover {
    background-color: var(--app-row-alt-bg);
}

.template-option-thumb {
    width: 2.75rem;
    aspect-ratio: 210 / 297;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--app-border-soft);
    background-color: #fff;
}

.template-option-check {
    margin-left: auto;
    visibility: hidden;
}

.btn-check:checked + .template-option {
    border-color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.btn-check:checked + .template-option .template-option-check {
    visibility: visible;
}

.btn-check:focus-visible + .template-option {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.template-picker-preview {
    display: flex;
    justify-content: center;
    padding: .75rem;
    border: 1px solid var(--app-border);
    background-color: var(--app-row-alt-bg);
}

.template-picker-preview img {
    max-width: 100%;
    max-height: 30rem;
    background-color: #fff;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .15);
}

.breakout-iframe-modal {
    width: 220mm;
    height: 310mm;
    border: 0;
    display: block;
    margin: 0 auto;
}

/*
 * The debt identity (Ταυτότητα Οφειλής) shares the receipt preview modal but is a much shorter
 * document: a single payment note rather than a full-page receipt, so the receipt's A4-tall frame
 * left most of the modal empty. Applied by periodicViewDebtIdentity() and removed again when the
 * modal is reused, so the receipt preview keeps its own height untouched.
 */
.breakout-iframe-modal.debt-identity-preview {
    height: 155mm;
}

.breakout-iframe {
    position: relative;

    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    border: 0;
    display: block;

    min-height: 310mm;
}

.logo-wrapper button {
    opacity: 0;
    transition: opacity .2s;
}
.logo-wrapper:hover button {
    opacity: 1;
}

body.modal-open {
    overflow: hidden !important;
}

.dropdown-header {
    color: unset !important;
}

.text-top {
    vertical-align: text-top;
}

.dataTables_scroll {
  overflow: auto;
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
    background-color: var(--app-row-alt-bg) !important;
    box-shadow: none !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--app-row-alt-bg) !important;
    box-shadow: none !important;
}

.table-preload {
    visibility: hidden;
}

.copied-state {
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.copied-state:hover {
    text-decoration: none !important;
}

.copied-label {
    margin-left: 4px;
}

.reveal i {
  width: 1.25em;
  text-align: center;
}

.sidebar-cta-content {
    background-color: rgba(59, 125, 221, .1) !important;
}

.iti__country-list {
    margin-top:0px !important;
    border: 1px solid var(--app-border-soft);
}

.bootstrap-datetimepicker-widget {
    margin-top:3px !important;
    border: 1px solid var(--app-border-soft);
}

.bootstrap-datetimepicker-widget.top {
    margin-bottom:3px !important;
    border: 1px solid var(--app-border-soft);
}

.datepicker-dropdown {
    margin-top:3px !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-select.focus {
  border-color: var(--app-border) !important;
}

@media (max-width: 575.98px) {
    .dropdown, .dropleft, .dropright, .dropup {
        position: relative !important;
    }
}

.text-bg-primary-outline {
  color: var(--bs-primary) !important;
  background-color: transparent !important;
  border: 1px solid var(--bs-primary) !important;
}

.dropdown-menu {
    border-radius: 0 !important;
}

.table-responsive .dropdown {
    min-width: 10rem !important;
}

#connectionsAccordion .accordion-body {
    position: relative;
    min-height: 200px;
}

[id^="table-"] tbody tr:first-child .copy-btn { display: none; }

.bg-primary-light,a.bg-primary-light {
    background-color: rgba(59,125,221,.15) !important;
    color: color-yiq(rgba(59,125,221,.15)) !important;
    color: #3b7ddd !important
}

.bg-secondary-light,a.bg-secondary-light {
    background-color: hsla(208,7%,46%,.15) !important;
    color: color-yiq(hsla(208,7%,46%,.15)) !important;
    color: #6c757d !important
}

.bg-success-light,a.bg-success-light {
    background-color: rgba(28,187,140,.15) !important;
    color: color-yiq(rgba(28,187,140,.15)) !important;
    color: #1cbb8c !important
}

.bg-info-light,a.bg-info-light {
    background-color: rgba(23,162,184,.15) !important;
    color: color-yiq(rgba(23,162,184,.15)) !important;
    color: #17a2b8 !important
}

.bg-warning-light,a.bg-warning-light {
    background-color: rgba(252,185,44,.15) !important;
    color: color-yiq(rgba(252,185,44,.15)) !important;
    color: #fcb92c !important
}

.bg-danger-light,a.bg-danger-light {
    background-color: rgba(220,53,69,.15) !important;
    color: color-yiq(rgba(220,53,69,.15)) !important;
    color: #dc3545 !important
}

.bg-dark-light,a.bg-dark-light {
    background-color: rgba(33,37,41,.15) !important;
    color: color-yiq(rgba(33,37,41,.15)) !important;
}

/*
 * Every note shows the icon its markup carries, styled as the theme's "icon alerts" (demo.adminkit.io/ui-alerts): the
 * icon sits in a slightly darker block down the left edge, in the note's text colour. The block and its colours are
 * the theme's own rules in app.css / dark.css.
 */

/* same width for every icon (what fa-fw does in the demo), and level with the first line of text */
.alert-icon i {
    width: 1.25em;
    text-align: center;
    line-height: inherit;
}

/*
 * Outlined icons. Font Awesome Free has no outlined info circle or warning triangle (only solid), so inside a note
 * the glyphs are replaced by the outlined Feather drawings the theme uses elsewhere. Drawn as a mask, so they take
 * the note's text colour in both themes. The bell has an outlined Font Awesome glyph, but uses Feather's too, so
 * they all share one line weight. A success note's check becomes Feather's check-circle, to sit with the info circle.
 */
.alert-icon i.fa-circle-info::before,
.alert-icon i.fa-triangle-exclamation::before,
.alert-icon i.fa-bell::before,
.alert-icon i.fa-check::before {
    content: "";
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -.2em;
    background-color: currentColor;
    -webkit-mask: var(--alert-icon-shape) center / contain no-repeat;
    mask: var(--alert-icon-shape) center / contain no-repeat;
}

.alert-icon i.fa-circle-info {
    --alert-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

.alert-icon i.fa-triangle-exclamation {
    --alert-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

.alert-icon i.fa-bell {
    --alert-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

.alert-icon i.fa-check {
    --alert-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3'/%3E%3C/svg%3E");
}

.use-bootstrap-tag .btn {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.75rem;
}


/*
 * Badges use Bootstrap 5.3's "subtle" look: a tinted background, emphasis text and a subtle border, instead of a solid
 * fill with white text. Done here for every .badge that carries a bg-* colour, because most of them get that class from
 * a status enum (OurStatus, GreeceAadeDeclStatus, ...) or from JavaScript rather than from a template. The colours are
 * Bootstrap's own --bs-*-bg-subtle / -text-emphasis / -border-subtle variables, which have light and dark values.
 */
.badge.bg-primary,
.badge.badge-primary-light {
    background-color: var(--bs-primary-bg-subtle) !important;
    border: 1px solid var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
}

.badge.bg-secondary {
    background-color: var(--bs-secondary-bg-subtle) !important;
    border: 1px solid var(--bs-secondary-border-subtle);
    color: var(--bs-secondary-text-emphasis);
}

.badge.bg-success {
    background-color: var(--bs-success-bg-subtle) !important;
    border: 1px solid var(--bs-success-border-subtle);
    color: var(--bs-success-text-emphasis);
}

.badge.bg-info {
    background-color: var(--bs-info-bg-subtle) !important;
    border: 1px solid var(--bs-info-border-subtle);
    color: var(--bs-info-text-emphasis);
}

.badge.bg-warning {
    background-color: var(--bs-warning-bg-subtle) !important;
    border: 1px solid var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
}

.badge.bg-danger {
    background-color: var(--bs-danger-bg-subtle) !important;
    border: 1px solid var(--bs-danger-border-subtle);
    color: var(--bs-danger-text-emphasis);
}

/* The selected items of a multiple select (use-bootstrap-select renders each as a small .btn) look like a primary badge */
.use-bootstrap-select .btn.text-bg-primary-outline {
    background-color: var(--bs-primary-bg-subtle) !important;
    border: 1px solid var(--bs-primary-border-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
    font-weight: 600;
    border-radius: var(--bs-border-radius) !important; /* badges are rounded; .btn is squared off above */
}

/* The tags of a tags input (use-bootstrap-tag renders each as a .btn) look like a secondary badge */
.use-bootstrap-tag > button.btn {
    background-color: var(--bs-secondary-bg-subtle) !important;
    border: 1px solid var(--bs-secondary-border-subtle) !important;
    color: var(--bs-secondary-text-emphasis) !important;
    font-weight: 600;
    border-radius: var(--bs-border-radius) !important;
}

/* ================= Dark theme =================
 * dark.css is the theme recompiled with a dark palette; what follows is what that recompile gets wrong or leaves out.
 */

:root[data-bs-theme="dark"] {
    /* The primary blue is 3.4:1 as text on a card. This is the tint the side menu already uses for its accent, 5.9:1. */
    --bs-link-color: #7fabec;
    --bs-link-color-rgb: 127, 171, 236;
    --bs-link-hover-color: #a8c6f3;
    --bs-link-hover-color-rgb: 168, 198, 243;
    --bs-form-invalid-color: #ea868f;

    /* dark.css keeps the light theme's pastel tints and dark emphasis text (an open accordion header was light blue) */
    --bs-primary-text-emphasis: #89b1eb;
    --bs-secondary-text-emphasis: #afb4b9;
    --bs-success-text-emphasis: #77d6ba;
    --bs-info-text-emphasis: #74c7d4;
    --bs-warning-text-emphasis: #fdd580;
    --bs-danger-text-emphasis: #ea868f;
    --bs-primary-bg-subtle: #183258;
    --bs-secondary-bg-subtle: #313437;
    --bs-success-bg-subtle: #0b4b38;
    --bs-info-bg-subtle: #09414a;
    --bs-warning-bg-subtle: #654a12;
    --bs-danger-bg-subtle: #58151c;
    --bs-primary-border-subtle: #234b85;
    --bs-secondary-border-subtle: #494e53;
    --bs-success-border-subtle: #117054;
    --bs-info-border-subtle: #0e616e;
    --bs-warning-border-subtle: #976f1a;
    --bs-danger-border-subtle: #842029;
}

/* Brand colours used as text */
[data-theme="dark"] .text-primary {
    color: var(--bs-link-color) !important;
}

[data-theme="dark"] .text-danger {
    color: #ea868f !important;
}

[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

[data-theme="dark"] .text-bg-primary-outline {
    color: var(--bs-link-color) !important;
    border-color: var(--bs-link-color) !important;
}

[data-theme="dark"] .bg-primary-light,
[data-theme="dark"] a.bg-primary-light {
    color: var(--bs-link-color) !important;
}

[data-theme="dark"] .bg-secondary-light,
[data-theme="dark"] a.bg-secondary-light {
    background-color: hsla(210, 6%, 68%, .15) !important;
    color: #a7abb1 !important;
}

[data-theme="dark"] .bg-danger-light,
[data-theme="dark"] a.bg-danger-light {
    color: #ea868f !important;
}

[data-theme="dark"] .bg-dark-light,
[data-theme="dark"] a.bg-dark-light {
    background-color: rgba(255, 255, 255, .1) !important;
}

/* Depth: what floats over the page is a step lighter than a card, with a quiet edge; dividers are quieter than control borders */
[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--app-surface-raised);
    --bs-dropdown-border-color: var(--app-border-soft);
    --bs-dropdown-divider-bg: var(--app-border-soft);
}

[data-theme="dark"] .popover {
    --bs-popover-bg: var(--app-surface-raised);
    --bs-popover-border-color: var(--app-border-soft);
}

[data-theme="dark"] .table {
    --bs-table-border-color: var(--app-border-soft);
}

[data-theme="dark"] .modal {
    --bs-modal-header-border-color: var(--app-border-soft);
    --bs-modal-footer-border-color: var(--app-border-soft);
}

/* bootstrap-datepicker and bootstrap-datetimepicker ship light colours only. Both are .dropdown-menu, so the panel itself is already themed. */
[data-theme="dark"] .datepicker table tr td.day:hover,
[data-theme="dark"] .datepicker table tr td.focused,
[data-theme="dark"] .datepicker table tr td span:hover,
[data-theme="dark"] .datepicker table tr td span.focused,
[data-theme="dark"] .datepicker .datepicker-switch:hover,
[data-theme="dark"] .datepicker .prev:hover,
[data-theme="dark"] .datepicker .next:hover,
[data-theme="dark"] .datepicker tfoot tr th:hover,
[data-theme="dark"] .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day:hover,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.hour:hover,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.minute:hover,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.second:hover,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td span:hover {
    background: var(--app-menu-active-bg);
}

[data-theme="dark"] .datepicker table tr td.old,
[data-theme="dark"] .datepicker table tr td.new,
[data-theme="dark"] .datepicker table tr td.disabled,
[data-theme="dark"] .datepicker table tr td span.old,
[data-theme="dark"] .datepicker table tr td span.new,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.old,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.new,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.disabled,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.cw,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.old,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.disabled,
[data-theme="dark"] .bootstrap-datetimepicker-widget table th.disabled {
    color: #8b929a;
}

[data-theme="dark"] .datepicker table tr td.today,
[data-theme="dark"] .datepicker table tr td.today:hover {
    background-image: none !important;
    background-color: rgba(252, 185, 44, .18) !important;
    color: #fcb92c !important;
}

[data-theme="dark"] .datepicker table tr td.active,
[data-theme="dark"] .datepicker table tr td.active:hover,
[data-theme="dark"] .datepicker table tr td span.active,
[data-theme="dark"] .datepicker table tr td span.active:hover,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active:hover,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.active {
    background-image: none !important;
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    text-shadow: none;
}

/* the little arrow that joins the panel to its input: white fill, grey edge in the libraries */
[data-theme="dark"] .datepicker-dropdown:after,
[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu:after {
    border-top-color: var(--app-surface-raised);
    border-bottom-color: var(--app-surface-raised);
}

[data-theme="dark"] .datepicker-dropdown:before,
[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu:before {
    border-top-color: var(--app-border-soft);
    border-bottom-color: var(--app-border-soft);
}

/* Summernote (its code view already uses the dark monokai theme) */
[data-theme="dark"] .note-editor.note-frame,
[data-theme="dark"] .note-editor.note-airframe {
    border-color: var(--app-border);
}

[data-theme="dark"] .note-editor.note-frame .note-statusbar,
[data-theme="dark"] .note-editor.note-frame .note-status-output {
    border-top-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .note-btn-group .note-btn {
    border-color: var(--app-border-soft);
}

[data-theme="dark"] .note-editor .note-dropzone {
    background-color: var(--app-surface);
}

[data-theme="dark"] .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title,
[data-theme="dark"] .note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title {
    border-bottom-color: var(--app-border-soft);
}

[data-theme="dark"] .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,
[data-theme="dark"] .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select:hover {
    background: var(--app-menu-active-bg);
}