/* Hiding the checkboxes or radio button*/
input.noojs-button {
    position: fixed;
    opacity: 0;
    z-index: -1;
}

/** ALERT **/
/* Since we are not changing the class to show, we need this simple fix. */
.fade:not(.show) {
    opacity: unset;
}
input:checked + .alert-dismissible  {
    display: none;
}
input:checked + .alert-dismissible.fade {
    display: block;
    transition: all 0.25s;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    height: 0;
    padding: 0;
}

/** ACCORDION **/
/* Copied from bootstrap */
.accordion {
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a58ca'%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-.708z'/%3e%3c/svg%3e");
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
}

/* Accordion magic */
label.accordion-button + .accordion-body {
    display: block;
    max-height: 0;
    padding: 0 var(--bs-accordion-body-padding-x);
    transition: padding 0.15s, opacity 0.25s;
    /* these replace display:none to ensure the transition will work */
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

input:checked ~ .accordion-body {
    max-height: 100vh;
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
    transition: padding 0.15s, opacity 0.25s;
    /* these replace display:none to ensure the transition will work */
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

label.accordion-button, label.dropdown-toggle, label.btn-close, label.nav-link {
    cursor: pointer;
    /* prevent text selection */
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
}

input:checked + .accordion-button {
    color: #0c63e4;
    background-color: #e7f1ff;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

input:checked + .accordion-button::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}

/** DROPDOWN **/
/*.btn-group {*/
/*    display: inline-block;*/
/*}*/
.noojs-dropdown-content {
    padding: 0 !important;
    max-height: 0;
    display: none;
}
.dropup > .noojs-dropdown-content > .dropdown-menu.show {
    left: 0;
}

/* dropdown */
.btn-group > .noojs-dropdown-content > .dropdown-menu {
    margin-left: -2px;
    left: 0;
    margin-top: calc(7px + 7px + 24px);
}
.btn-group-sm > .noojs-dropdown-content > .dropdown-menu {
    margin-top: calc(5px + 5px + 21px);
}
.btn-group-lg > .noojs-dropdown-content > .dropdown-menu {
    margin-top: calc(9px + 9px + 30px);
}
/* dropup */
.btn-group.dropup > .noojs-dropdown-content > .dropdown-menu {
    margin-top: unset;
    margin-left: -2px;
    bottom: calc(7px + 7px + 24px);
}
.btn-group-sm.dropup > .noojs-dropdown-content > .dropdown-menu {
    bottom: calc(5px + 5px + 21px);
}
.btn-group-lg.dropup > .noojs-dropdown-content > .dropdown-menu {
    bottom: calc(9px + 9px + 30px);
}
/* dropend (dropright) */
.dropend > .noojs-dropdown-content > .dropdown-menu.show {
    left: unset;
    margin-top: 0;
}

input:checked + .noojs-dropdown-content {
    max-height: 100vh;
    padding: 1em;
    display: unset;
}

/* for hover of disabled button */
span:hover + .noojs-dropdown-content {
    max-height: 100vh;
    padding: 1em;
    display: unset;
}

/* click anywhere except in the dropdown menu to cancel */
.noojs-click-outside {
    cursor: default;
    position:fixed;
    left:0;
    top:0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.0;
    background-color: blue;
    /* The z-index of the bootstrap dropdown menu is 1000 */
    /*z-index: 900;*/
}

/** POPOVERS **/
/*popover fade show */
.popover.bs-popover-end {
    left: unset;
    width: max-content;
    margin-left: 10px;
    margin-top: -32px;
}
.popover.bs-popover-bottom {
    left: 0;
    margin-top: calc(12px + 34px);
    width: max-content;
}
.popover.bs-popover-top {
    left: 0;
    bottom: 46px;
    top: auto;
    width: max-content;
}
.bs-popover-end > .popover-arrow {
    position: absolute;
    top: 0;
    transform: translate(0px, 47px);
}
.bs-popover-bottom > .popover-arrow, .bs-popover-top > .popover-arrow, .bs-tooltip-top > .tooltip-arrow, .bs-tooltip-bottom > .tooltip-arrow  {
    margin-left: 12px;
}

/** Dropstart is hacky **/
.popover.bs-popover-start {
    position: relative;
    float: left;
    margin-right: 10px;
    width: 276px;
}
input:checked + .dropstart > .noojs-dropdown-content {
    max-height: 100vh;
    padding: 1em;
    display: unset;
}
input:checked + .dropstart  {
    margin-left: calc(2px - 10px - 276px);
    max-height: 38px;
}
.bs-popover-start > .popover-arrow {
    position: absolute;
    top: 0;
    transform: translate(0px, 12px);
}

/**  MODAL  **/
.noojs-modal {
    position: fixed;
    left: 0;
    right: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s;
}

.modal-dialog {
    margin-top: 0;
}

/* background around a modal */
.noojs-close-background {
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: fixed;
}

/* iframe inside a modal */
.noojs-iframe {
    width: 100%;
    height: 100%;
    display: none;
}

/* checkbox means this is an open-close modal */
/* radio group allows for showing different content in the open modal + the last radio button means closed */
input[type=checkbox]:checked + .noojs-modal,
input[type=radio]:not(:checked) + .noojs-modal {
    transition: opacity 0.25s;
    /* these replace display:none to ensure the transition will work */
    opacity: 1;
    visibility: visible;
}

/* open animation: fade in from top */
/* not(...) deals with exception where top of the modal is 0 (fullscreen) */
input[type=checkbox]:checked + .noojs-modal > .modal-dialog:not(.modal-fullscreen),
input[type=radio]:not(:checked) + .noojs-modal > .modal-dialog:not(.modal-fullscreen) {
    margin-top: 1.75rem;
    transition: margin-top 0.15s;
}

/*input[type=radio]:checked +*+ .noojs-modal > *+.modal-dialog > *:nth-child(1) {*/
/*    display:block;*/
/*}*/
input[type=radio]:checked + * + * + * + * + * + .noojs-modal > * + * > *:nth-child(5),
input[type=radio]:checked + * + * + * + * + .noojs-modal > * + * > *:nth-child(4),
input[type=radio]:checked + * + * + * + .noojs-modal > * + * > *:nth-child(3),
input[type=radio]:checked + * + * + .noojs-modal > * + * > *:nth-child(2),
input[type=radio]:checked + * + .noojs-modal > * + * > *:nth-child(1) {
    display: block
}

/** TABS (works to a maximum of 12 tabs) **/
.noojs-tab {
    display: none;
}
.noojs-tabs {
    margin: 4px;
}
input[type=radio]:checked + .nav + * + * + * + * + * + * + * + * + * + * + * > *:nth-child(12),
input[type=radio]:checked + .nav + * + * + * + * + * + * + * + * + * + * > *:nth-child(11),
input[type=radio]:checked + .nav + * + * + * + * + * + * + * + * + * > *:nth-child(10),
input[type=radio]:checked + .nav + * + * + * + * + * + * + * + * > *:nth-child(9),
input[type=radio]:checked + .nav + * + * + * + * + * + * + * > *:nth-child(8),
input[type=radio]:checked + .nav + * + * + * + * + * + * > *:nth-child(7),
input[type=radio]:checked + .nav + * + * + * + * + * > *:nth-child(6),
input[type=radio]:checked + .nav + * + * + * + * > *:nth-child(5),
input[type=radio]:checked + .nav + * + * + * > *:nth-child(4),
input[type=radio]:checked + .nav + * + * > *:nth-child(3),
input[type=radio]:checked + .nav + * > *:nth-child(2),
input[type=radio]:checked + .nav > *:nth-child(1) {
    /* Style from .nav-link .active */
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}
input[type=radio]:checked + * + * + * + * + * + * + * + * + * + * + * + * + .noojs-tabs > *:nth-child(12),
input[type=radio]:checked + * + * + * + * + * + * + * + * + * + * + * + .noojs-tabs > *:nth-child(11),
input[type=radio]:checked + * + * + * + * + * + * + * + * + * + * + .noojs-tabs > *:nth-child(10),
input[type=radio]:checked + * + * + * + * + * + * + * + * + * + .noojs-tabs > *:nth-child(9),
input[type=radio]:checked + * + * + * + * + * + * + * + * + .noojs-tabs > *:nth-child(8),
input[type=radio]:checked + * + * + * + * + * + * + * + .noojs-tabs > *:nth-child(7),
input[type=radio]:checked + * + * + * + * + * + * + .noojs-tabs > *:nth-child(6),
input[type=radio]:checked + * + * + * + * + * + .noojs-tabs > *:nth-child(5),
input[type=radio]:checked + * + * + * + * + .noojs-tabs > *:nth-child(4),
input[type=radio]:checked + * + * + * + .noojs-tabs > *:nth-child(3),
input[type=radio]:checked + * + * + .noojs-tabs > *:nth-child(2),
input[type=radio]:checked + * + .noojs-tabs > *:nth-child(1) {
    display: block
}


input[type=radio]:checked + * + .noojs-tabs > *:nth-child(1) {
    display: block
}

/** TOASTS **/
.toast-container > .toast {
    display: none;
}
input[type=checkbox]:checked + * + * + * + * + * + * + * + * + * + * + * + * + .toast-container > *:nth-child(12),
input[type=checkbox]:checked + * + * + * + * + * + * + * + * + * + * + * + .toast-container > *:nth-child(11),
input[type=checkbox]:checked + * + * + * + * + * + * + * + * + * + * + .toast-container > *:nth-child(10),
input[type=checkbox]:checked + * + * + * + * + * + * + * + * + * + .toast-container > *:nth-child(9),
input[type=checkbox]:checked + * + * + * + * + * + * + * + * + .toast-container > *:nth-child(8),
input[type=checkbox]:checked + * + * + * + * + * + * + * + .toast-container > *:nth-child(7),
input[type=checkbox]:checked + * + * + * + * + * + * + .toast-container > *:nth-child(6),
input[type=checkbox]:checked + * + * + * + * + * + .toast-container > *:nth-child(5),
input[type=checkbox]:checked + * + * + * + * + .toast-container > *:nth-child(4),
input[type=checkbox]:checked + * + * + * + .toast-container > *:nth-child(3),
input[type=checkbox]:checked + * + * + .toast-container > *:nth-child(2),
input[type=checkbox]:checked + * + .toast-container > *:nth-child(1) {
    display: block;
}

/** TOOLTIPS **/
.tooltip {
    position: absolute;
    display: inline-flex;

}

.bs-tooltip-end > .tooltip-arrow {
    top: 12px
}
.bs-tooltip-top > .tooltip-inner {
    bottom: 8px;
}
.tooltip-inner {
    position: absolute;
    width: max-content;
}
.tooltip-arrow {
    position: absolute;
}
.tooltip.bs-tooltip-top {
    left: 0;
    bottom: 40px;
    top: auto;
}
.bs-tooltip-bottom {
    left: 0;
    margin-top: 40px;
}
/** Dropstart is hacky **/
.bs-tooltip-start {
    left: 0;
}
.bs-tooltip-start > .tooltip-arrow {
    right: 12px;
    top: 12px;
}
.bs-tooltip-start > .tooltip-inner {
    right: 18px;
}