* {
    border-radius: 0 !important;
}

.wide {
    @media screen and (min-width: 730px) {
        display: block;
    }

    @media screen and (max-width: 729px) {
        display: none;
    }
}

.slim {
    @media screen and (min-width: 730px) {
        display: none;
    }

    @media screen and (max-width: 729px) {
        display: block;
    }
}

.datepicker {
    font-size: 12px;
}

/* Unify neutral/uncolored borders (inputs, toolbars, panels, multi-select boxes) to the
   same grey panels already use (bootstrap.css: .panel-default { border-color: #949494; }),
   instead of the mix of #ebebeb/#ccc/#bbbbbb/#f5f5f5 that were scattered around. */
.form-control,
.ms-container .ms-list,
.select2-container .select2-choice,
.select2-container .select2-choices,
.select2-drop,
.has-switch,
div.datepicker.dropdown-menu,
.bootstrap-timepicker-widget.dropdown-menu,
table.table-bordered,
table.table-bordered th,
table.table-bordered td,
table.table-bordered thead th,
table.table-bordered thead td,
table.table-bordered tfoot th,
table.table-bordered tfoot td {
    border-color: #949494 !important;
}

/* DataTables' own bundled CSS sets a specific dark border-bottom on thead cells and
   border-top on tfoot cells (the header/footer divider lines), which beats the generic
   border-color rule above for those two sub-properties specifically. Borders aren't
   collapsing here, so only set this on one side of each divider (not tbody's matching
   edge too), or it doubles up to 2px. */
table.table-bordered thead th,
table.table-bordered thead td {
    border-bottom: 1px solid #949494 !important;
}

table.table-bordered tfoot th,
table.table-bordered tfoot td {
    border-top: 1px solid #949494 !important;
}

/* The outer .panel wrapper carries no border of its own; .panel-heading is fully bordered
   on its own (so a collapsed panel, with its body hidden, still reads as a complete box
   instead of showing both the panel's and the heading's border-bottom stacked together),
   and .panel-body picks up the sides/bottom without a top border, so it fuses seamlessly
   under the heading instead of doubling that line when expanded. */
.panel-default {
    border: none !important;
}

.panel-default>.panel-heading {
    border: 1px solid #949494 !important;
}

.panel-default>.panel-body {
    border: 1px solid #949494 !important;
    border-top: none !important;
}

.custom-image-container {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.custom-image-upload-area {
    position: relative;
    width: 100%;
    padding-top: 75%;
    border: 1px solid #949494;
    background-color: #f5f5f5;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    min-height: 220px;

    img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
        display: none;
    }

    input[type="file"] {
        display: none;
    }
}

.custom-image-right-corner-icon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    padding: 5px;
    cursor: pointer;
    z-index: 9999;
}

#crop_image {
    /* Jcrop resizes this to boxWidth/boxHeight via inline width/height once it initializes,
       but that happens after the modal is already visible - without a cap here the raw
       full-resolution <img> flashes at natural size for a frame first. */
    max-width: 600px;
    max-height: 450px;
}

.custom-image-left-corner-icon {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    padding: 5px;
    cursor: pointer;
    z-index: 9999;
}

.custom-image-upload-area-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #777;
    display: block;
}

.has-switch>div {
    width: 240% !important;

    &.switch-off {
        left: -140% !important;
    }
}

.time-counter {
    padding-left: 15px;
    height: 30px;
    line-height: 30px;
    font-weight: bold !important;
}

pre {
    white-space: pre-wrap;
    overflow-x: auto;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: normal;
    font-family: helvetica-neue, sans-serif;
    font-size: 12px;
}

:root {
    --color-very-dark: #222222;
    --color-dark: #555555;
    --color-medium: #888888;
    --color-bright: #aaaaaa;
    --color-very-bright: #dddddd;
    --color-red: #ff9696;
    --color-blue: #98d6f1;
    --color-green: #95e294;
    --color-yellow: #ffe671;
}

.swiper {
    margin-bottom: 0px;
    min-height: 220px;
    background-color: #f5f5f5;
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    transform: translateY(-50%);
    z-index: 15;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #333;
    font-size: 24px;

    &:hover {
        color: #555;
    }
}

.swiper-button-next {
    right: 10px;
}

.swiper-button-prev {
    left: 10px;
}

#swiper-button-trash {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    /* Centers horizontally */
    align-items: center;
    /* Centers vertically */
    padding: 10px;
    height: 100%;
    /* Ensure the slide takes full height */
    background-color: #f5f5f5;
    position: relative;

    img {
        justify-content: center;
        max-width: 100%;
        /* Scale image to fit width */
        max-height: 100%;
        /* Scale image to fit height */
        object-fit: contain;
        /* Keeps the image's aspect ratio */
        display: block;
        /* Removes any inline spacing */
    }
}

/* make-switch: data-on/data-off are set to "primary-checked" / "primary-unchecked" (or the
   secondary equivalents), which bootstrap-switch turns into a single "switch-X" class on
   the generated span. The -unchecked variant reuses the plain button look, the -checked
   variant reuses the button's hover/active look, so only the checked state reads as "active". */
.btn-primary,
.tile-primary,
.alert-primary,
.has-switch span.switch-primary-unchecked {
    background-color: #ffbbff !important;
    border: 1px solid #bb77bb !important;
    color: #440044 !important;
}
.btn-primary:hover,
.tile-primary:hover,
.has-switch span.switch-primary-checked {
    background-color: #330033 !important;
    border: 1px solid #bb77bb !important;
    color: #ffbbff !important;
}

.btn-secondary,
.tile-secondary,
.alert-secondary,
.has-switch span.switch-secondary-unchecked,
.dt-paging .page-link {
    background-color: #bbffff !important;
    border: 1px solid #77bbbb !important;
    color: #004444 !important;
}

.dt-paging .page-link:hover {
    background-color: #003333 !important;
    border: 1px solid #77bbbb !important;
    color: #bbffff !important;
}

/* Bootstrap's .page-link (and the navbar links below) draw a rounded native focus ring on
   click/:active, which sticks out against this theme's "everything square, no rounded corners"
   look (see the border-radius reset at the top of this file). Same fix as .form-control's own
   outline: 0 above - just extended to the elements that still showed it. */
.dt-paging .page-link:focus,
.dt-paging .page-link:active {
    outline: 0 !important;
    box-shadow: none !important;
}

header.navbar a:focus,
header.navbar a:active {
    outline: 0 !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.tile-secondary:hover,
.has-switch span.switch-secondary-checked {
    background-color: #003333 !important;
    border: 1px solid #77bbbb !important;
    color: #bbffff !important;
}

.select2-container.select-primary .select2-choice {
    border-width: 0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5) !important;
}

.select2-container.select-primary-value .select2-choice {
    border-width: 1px !important;
    border-style: solid !important;
    background-color: #330033 !important;
    color: #ffbbff !important;
    border-color: #bb77bb !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5) !important;
}

.select2-drop.select-primary {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #bb77bb !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5) !important;
}

/* Marks a select2 control as "navigational" - it doesn't write any data itself (the search
   box, filter dropdowns), unlike the secondary/primary button colors above which mark actions.
   Applied via select2's containerCssClass option, since select2 doesn't copy the source
   <select>'s own classes onto the container it generates. */
.select2-container.select-secondary .select2-choice {
    border-width: 0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(100, 255, 255, 0.5) !important;
}

/* -value variants: same control, but currently holding a value - not just "you can filter/find
   things here" but "this is actively narrowing what you see right now". Mirrors the
   -unchecked/-checked contrast switches already use above (light face at rest, inverted dark
   face once active) rather than just a brighter glow, so it reads at a glance. */
.select2-container.select-secondary-value .select2-choice {
    border-width: 1px;
    border-style: solid;
    background-color: #003333;
    color: #bbffff;
    border-color: #77bbbb !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(100, 255, 255, 0.5) !important;
}



/* select2's open results dropdown is a separate floating element (.select2-drop), not nested
   inside .select2-container - containerCssClass never reaches it, so it was still showing the
   plain grey unify-borders color even when the closed box above it was colored. Applied via
   select2's dropdownCssClass option, matching only the color family (no -value split - the
   open list isn't itself "holding a value" the way the closed box is). */
.select2-drop.select-secondary {
    border-color: #77bbbb !important;
}



/* Same secondary/primary/-value language as the select2 classes above, for plain inputs/textareas
   and non-form-control write controls alike (image/gallery/swiper upload areas) - no shared
   container to target here, so these apply straight to whatever element carries the class.
   Deliberately NOT scoped to .form-control so the image-upload area (a <label>, not an input)
   can use them too; declaration order alone (after the .form-control unify-borders rule above)
   is enough to win against that rule's !important border-color at equal specificity. */
.input-secondary {
    border-width: 1px;
    border-style: solid;
    border-color: #77bbbb !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(100, 255, 255, 0.5) !important;
}

.input-secondary-value {
    border-width: 1px;
    border-style: solid;
    background-color: #003333;
    color: #bbffff;
    border-color: #77bbbb !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(100, 255, 255, 0.5) !important;
}

.input-primary {
    border-width: 1px;
    border-style: solid;
    border-color: #bb77bb !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5) !important;
}

.input-primary-value {
    border-width: 1px;
    border-style: solid;
    background-color: #330033;
    color: #ffbbff;
    border-color: #bb77bb !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5) !important;
}

.btn-danger,
.tile-danger,
.alert-danger {
    background-color: #ffbbbb !important;
    border: 1px solid #bb7777 !important;
    color: #440000 !important;
}

.btn-danger:hover,
.switch-danger,
.tile-danger:hover {
    background-color: #330000 !important;
    border: 1px solid #bb7777 !important;
    color: #ffbbbb !important;
}

.btn-info,
.tile-info,
.alert-info {
    background-color: #bbbbff !important;
    border: 1px solid #7777bb !important;
    color: #000044 !important;
}

.btn-info:hover,
.switch-info,
.tile-info:hover {
    background-color: #000033 !important;
    border: 1px solid #7777bb !important;
    color: #bbbbff !important;
}

.btn-success,
.tile-success,
.alert-success {
    background-color: #bbffbb !important;
    border: 1px solid #77bb77 !important;
    color: #004400 !important;
}

.btn-success:hover,
.switch-success,
.tile-success:hover {
    background-color: #003300 !important;
    border: 1px solid #77bb77 !important;
    color: #bbffbb !important;
}

.btn-warning,
.tile-warning,
.alert-warning {
    background-color: #ffffbb !important;
    border: 1px solid #bbbb77 !important;
    color: #444400 !important;
}

.btn-warning:hover,
.switch-warning,
.tile-warning:hover {
    background-color: #333300 !important;
    border: 1px solid #bbbb77 !important;
    color: #ffffbb !important;
}

.tile-default {
    background-color: #ffffff !important;
    border: 1px solid #aaaaaa !important;
    color: #111111 !important;
}

/* bootstrap-wysihtml5 (vendored) hardcodes its bold/italic/underline buttons as
   btn-danger/-warning/-success - a leftover template choice from the library, not a semantic
   "danger/warning/success" meaning - so our recolor of those classes above would make just
   those three buttons stand out from the rest of the toolbar's plain btn-white buttons for no
   reason. Reset them back to the same neutral look here instead of editing the vendored file. */
.wysihtml5-toolbar .btn-danger,
.wysihtml5-toolbar .btn-warning,
.wysihtml5-toolbar .btn-success {
    background-color: #FFF !important;
    border-color: #ebebeb !important;
    color: #303641 !important;
}

.wysihtml5-toolbar .btn-danger:hover,
.wysihtml5-toolbar .btn-warning:hover,
.wysihtml5-toolbar .btn-success:hover {
    background-color: #e6e6e6 !important;
    border-color: #e0e0e0 !important;
    color: #303641 !important;
}

/* wysihtml5 swaps the source <textarea> for this hardcoded iframe (className set directly in
   the library, nothing from the textarea carries over) - no per-field "has a value" hook
   available here the way plain inputs have, so this is a flat input-primary look, not -value. */
iframe.wysihtml5-sandbox {
    border-width: 1px;
    border-style: solid;
    border-color: #bb77bb !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5) !important;
}

.main-content {
    padding-right: 15px;
    overflow-y: auto;
}

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 80px;
    width: 100%;
    height: 80%;
    z-index: 9999;
    background: url(../../img/loading_icon.gif) center no-repeat #fff;
}

.gradient-red {
    background: linear-gradient(to bottom right, #ffffff 0% var(--color-red) 140%) !important;
}

.gradient-blue {
    background: linear-gradient(to bottom right, #ffffff 0% var(--color-blue) 140%) !important;
}

.gradient-green {
    background: linear-gradient(to bottom right, #ffffff 0% var(--color-green) 140%) !important;
}

.gradient-yellow {
    background: linear-gradient(to bottom right, #ffffff 0% var(--color-yellow) 140%) !important;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 30px) / 4)), 1fr));
    grid-gap: 10px;
}

.tile-stats {
    transition: transform 0.5s;

    &:hover {
        transform: scale(1.1);
    }
}

ul {
    z-index: 2;
}

.panel-heading {
    cursor: pointer !important;
}

.ms-selection .ms-list,
.ms-selectable .ms-list {
    height: auto;
    max-height: calc(2.7rem * 5);
    overflow-y: auto;
    margin-bottom: 10px;
    width: 100%;
}

.ms-container {
    display: flex;
    justify-content: space-between;
    width: 100% !important;
    padding: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 10px !important;
    box-sizing: border-box;
}

.ms-container::before,
.ms-container::after,
.ms-selectable::before,
.ms-selectable::after,
.ms-selection::before,
.ms-selection::after,
.ms-selectable .ms-arrow {
    display: none !important;
    content: none !important;
}

.ms-selectable,
.ms-selection {
    min-width: 48% !important;
    max-width: 48% !important;
    margin: 0px !important;
    padding: 0px !important;
    box-sizing: border-box;
}

.btn-group-toggle {
    display: flex;

    label {
        flex: 1 1 auto;
        width: 100%;
        white-space: normal;
    }
}

.dt-button-collection {
    .dt-button {
        display: block;
        width: 100%;
        padding: 8px 16px;
        text-align: left;

        span {
            display: block;
        }
    }
}

.table,
.dt-paging,
.dt-info,
.dt-search,
.dt-length {
    margin-top: 0px !important;
    margin-bottom: 15px !important;
}

.dt-button,
.dt-paging,
.dt-info,
.dt-length,
.dt-search,
.dt-buttons {
    float: left !important;
    margin-right: 15px !important;
}

.navbar {
    background-color: var(--color-very-dark);
}

.navbar-inner {
    background-color: var(--color-very-dark);
}

.navbar-nav {
    background-color: var(--color-very-dark);
}

.navbar-brand {
    color: #fff;
    font-size: 26px;
    font-family: "NeuePlakText-Regular", sans-serif;
}

header {
    li {
        background-color: var(--color-very-dark);
    }

    ul {
        background-color: var(--color-very-dark);
    }
}

.nw {
    white-space: nowrap !important;
}

/* Allow wrap and full width on xs screens */
.nw-wrap {
    @media (max-width: 575.98px) {
        white-space: normal !important;
        width: 100% !important;
    }
}

/* Hide other columns */
.nw-hide {
    @media (max-width: 575.98px) {
        display: none !important;
    }
}

.edit {
    cursor: pointer !important;

    tr {
        cursor: pointer;
    }
}

td {
    .input-spinner {
        display: inline-flex;
        align-items: center;
    }

    input,
    .btn,
    select td option {
        margin-bottom: 0;
    }

    .btn {
        font-size: 12px;
    }
}

div .alert {
    padding: 10px;
}

.input-spinner {
    display: flex;

    button {
        flex: 1 1 auto;
    }
}

.alert-cell {
    margin: 0px !important;
    padding: 5px !important;
    width: 100% !important;
}

.wysihtml5-toolbar {
    /* neon-forms.css gives .wysihtml5-toolbar a clearfix using content: " " (a literal
       space) on :before, which renders as a small table-level box before the first
       button and shows up as stray blank space; :after with clear:both is the part
       that's actually needed, so just drop the :before box */
    &:before {
        content: none;
        display: none;
    }

    /* give the toolbar its own form-control-like frame (matching the textarea below)
       so it reads as one control instead of buttons floating on the page background */
    background-color: #eeeeee;
    border: 1px solid #949494;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    padding: 6px 8px;
    margin-bottom: 0 !important;

    /* keep toolbar items on one line, with a little spacing between groups */
    >li {
        display: inline-block;
        vertical-align: top;
        margin-right: 4px;
    }

    /* if something forces full width */
    white-space: nowrap;
}

/* flatten the textarea's top corners so it fuses seamlessly with the toolbar above */
textarea.wysihtml5 {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.dashboard-row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;

    >[class*="col-"] {
        display: flex !important;
        margin-bottom: 10px !important;
    }

    a {
        display: flex !important;
        width: 100% !important;
    }

    .dashboard-tile-stats {
        flex: 1 !important;
        width: 100% !important;
    }
}

.dashboard-tile-stats h4 {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
}

.btn-shine {
    position: relative;
    overflow: hidden;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    }

    &:hover::after {
        animation: shine .5s;
    }
}

@keyframes shine {
    100% {
        left: 150%;
    }
}