/* No Items Styling*/

.no-items-back {
    width: 100%;
    padding: 30px 0;
}

.cfcine-no-elements-display {
    width: 80%;
    max-width: 300px;
    margin: 50px auto;
    background-color: lightgray !important;
    text-align: center;
    user-select: none;
    border-bottom: 5px solid #710a2c;
}

.cfcine-no-heading {
    background-color: #710a2c;
    position: relative;
    width: 100%;
    height: 50px;
    color: white;
}

    .cfcine-no-heading span {
        width: fit-content;
        font-size: 22px;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
    }

.cfcine-no-body {
    position: relative;
    height: 200px;
}

    .cfcine-no-body span {
        position: absolute;
        left: 50%;
        top: 25%;
        width: 100%;
        max-width: 90%;
        transform: translate(-50%, -50%);
    }

    .cfcine-no-body a {
        background-color: #710a2c;
        color: white !important;
        width: 100%;
        max-width: 80%;
        position: absolute;
        padding: 8px 20px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
    }

    .cfcine-no-body span {
        color: black !important;
        font-size: 16px;
    }

    .cfcine-no-body a:hover {
        color: white !important;
        background-color: #710a2ccc;
        text-decoration: none;
    }

/* Styling */

.faculty-carousel-container {
    padding: 48px 0;
    background-color: #242020;
}

.light-gray-background {
    background-color: #333333;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horizontal-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gray-background {
    background-color: #242020;
    color: white;
}

.gray-background h4,
.gray-background h3,
.gray-background h2,
.gray-background h1 {
    text-transform: uppercase;
    font-family: "Times New Roman", Times, serif;
    letter-spacing: 4px;
    padding-top: 1rem;
}

.gray-background a:not(.btn) {
    color: lightblue;
}

.gray-background hr {
    border-color: white;
    color: white;
    width: 10rem;
}

.btn.ModalBtn {
    color: #333333 !important;
    background-color: lightblue !important;
    outline: none;
    border: none;
    border-radius: 0;
    margin-top: 10px !important;
}

.btn.ModalBtn:hover {
    background-color: #6ba0b0 !important;
    color: #fff !important;
}

.btn.ModalBtn:focus {
    box-shadow: 0 0 0 0.2rem #add8e6 !important;
}

.EditBtns {
    margin: 60px 10px 0 0;
    color: red !important;
    display: inline-flex;
}

.row.rowAdjust {
    margin: 0;
}

.close {
    color: lightgray !important;
    text-shadow: 0 1px 0 #000 !important;
    opacity: 1 !important;
    outline: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.close:hover {
    color: #fff !important;
}

.close:focus {
    box-shadow: 0 0 0 0.2rem #add8e6 !important;
}

.facCarModal .btn.btn-secondary {
    color: #333333 !important;
    background-color: darkgray !important;
    outline: none;
    border: none;
    border-radius: 0;
}

.facCarModal .btn.btn-secondary:hover {
    background-color: gray !important;
    color: #fff !important;
}

.facCarModal .btn.btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem #add8e6 !important;
}

.txt-box-bit h3, .txt-box-bit h4, .txt-box-bit p {
    text-align: left;
}

    /*------------------------- Modal -------------------------*/

    .facCarModal .modal-content {
    background-color: #333333 !important;
}

.facCarModal .modal-header {
    border-bottom: 1px solid #242020 !important;
}

.facCarModal .modal-footer {
    border-top: 1px solid #242020 !important;
}

.fit-to-modal {
    position: initial !important;
    transform: translateY(0) !important;
}

@media (min-width: 576px) {
    .facCarModal .modal-dialog {
        max-width: 1200px !important;
    }
}


/*-------------------- Carousel Styling --------------------*/

.FacultyCarousel a:not(.EditBtns) {
    color: lightblue !important;
}

.FacultyCarousel {
    max-width: 80rem;
    width: 90%;
}

    .FacultyCarousel .carousel-inner {
        -webkit-box-shadow: 0px 8px 34px -1px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 8px 34px -1px rgba(0,0,0,0.75);
        box-shadow: 0px 8px 34px -1px rgba(0,0,0,0.75);
    }

    .FacultyCarousel .carousel-item {
        width: 100%;
        height: 35rem;
        padding: 1rem 0;
    }

.circle-img {
    object-fit: cover;
    width: 18rem;
    max-width: 18rem;
    height: 18rem;
    max-height: 18rem;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 23px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 23px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 23px 2px rgba(0,0,0,0.75);
}

.circle-img-top{
    margin-bottom: auto !important;
}

.circle-img.pad {
    margin-left: 8rem;
}

.btn.btn-primary.imanagement-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 0 !important;
    border: 0 !important;
    background-color: #710a2c !important;
    z-index: 99;
}

.cfcine-no-body .btn.btn-primary.imanagement-btn {
    bottom: 30px !important;
    left: 50%;
    right: unset !important;
    transform: translateX(-50%);
    width: 100%;
    max-width: 80%;
    text-align: center;
    padding: 8px 20px;
}

.btn.btn-primary.imanagement-btn:hover {
    background-color: #710a2ccc !important;
}

.faculty.carousel-indicators {
    display: inline-block;
    width: fit-content;
    margin-right: 0;
    list-style: none;
    top: 0;
    position: relative;
    justify-content: left;
    margin-left: 0;
}

    .faculty.carousel-indicators li.pimg {
        background-color: rgba(0,0,0,0);
        float: left;
    }

        .faculty.carousel-indicators li.pimg, .faculty.carousel-indicators li.pimg.active {
            width: 6rem;
            height: 6rem;
            position: relative;
            margin: 0 10px;
        }

    .faculty.carousel-indicators li.pimg:after {
        border-radius: 50%;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0, 0.5);
        transition: all .3s linear;
        height: 100%;
    }

    .faculty.carousel-indicators li.pimg.active:after {
        background: none;
    }

    .faculty.carousel-indicators img {
        object-fit: cover;
        position: absolute;
        width: 100%;
        border-radius: 50%;
        height: 100%;
        top: 0;
        left: 0;
        color: #242020;
        background-color: #242020;
    }

        .faculty.carousel-indicators img:before {
            background-color: blue;
        }

.addNewItem {
    display: inline-block;
    margin-left: 0;
}

.addNewItem li {
    margin: 10px;
    position: relative;
    width: 6rem;
    height: 6rem;
    list-style:none;
    box-shadow: 0 0 5px 0 black inset;
    border-radius: 100%;
    transition: box-shadow 0.15s;
    outline: 1px solid black;
    cursor: pointer;
}

.addNewItem li span {
    position: absolute;
    color: lightgray;
    top: 50%;
        transform: translateY(-50%);
    width: 100%;
    text-align: center;
    user-select: none;
    transition: color 0.15s;
}

.addNewItem li:hover {
    box-shadow: 0 0 10px black inset;
}

.addNewItem li:hover span {
    color: gray;
}

.txt-box-bit h3 {
    text-transform: uppercase;
    font-family: "Times New Roman", Times, serif;
    letter-spacing: 4px;
    color: white;
    left: 10%;
}

.txt-box-bit h4 {
    text-transform: uppercase;
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    letter-spacing: 4px;
    color: white;
    left: 10%;
    margin-right: 10rem;
    margin-top: 40px;
}

.txt-box-bit {
    color: white;
    padding: 1rem;
}

.biography {
    margin-top: 10px;
    box-shadow: 0 0 5px 0 black;
    background-color: rgba(64, 64, 64, 0.5);
    color: white;
}

.bio-header {
    padding: 8px 20px;
    border-bottom: 1px solid gray;
    color: white;
}

    .bio-header h4 {
        text-transform: uppercase;
        font-family: "Times New Roman", Times, serif;
        margin: 5px 0;
    }

.bio-content {
    max-height: 350px;
    overflow: scroll;
    overflow-x: hidden;
    padding: 8px 20px;
}

    .bio-content::-webkit-scrollbar {
        width: 3px;
    }

.bio-content::-webkit-scrollbar-track {
    background: transparent;
}

.bio-content::-webkit-scrollbar-thumb {
    background: #888;
}

    .bio-content::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

@media (max-width:1500px) {
    .circle-img {
        object-fit: cover;
        width: 14rem;
        height: 14rem;
        border-radius: 50%;
        margin-bottom: 0;
    }
        .circle-img.pad {
            margin-left: 2rem;
        }
}

@media (max-width:992px) {
    .circle-img {
        object-fit: cover;
        width: 10rem;
        height: 10rem;
        border-radius: 50%;
        margin-bottom: 1rem;
        margin-left: 0;
        margin-bottom: 20px !important;
    }
        .circle-img.pad {
            margin-left: 0;
        }

    .carousel-text {
        text-align: center;
        left: 50%;
        transform: translate(-50%,0);
    }

    .carousel-item p {
        margin-right: 0;
    }

    .carousel-item h3 {
        margin-right: 0;
    }

    .txt-box-bit {
        margin: 0 8%;
        padding: 0.4rem;
    }

    .faculty.carousel-indicators {
        display: none;
    }

    .FacultyCarousel .carousel-item {
        height: 45rem;
    }
}


/* Icon CSS */
.gg-pen {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: rotate(-45deg) scale(var(--ggs,1)) translate(-50%, -50%);
    width: 14px;
    height: 4px;
    border-right: 2px solid transparent;
    box-shadow: 0 0 0 2px, inset -2px 0 0;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    top: 37.5%;
    left: 50%;
}

    .gg-pen::after,
    .gg-pen::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute
    }

    .gg-pen::before {
        background: currentColor;
        border-left: 0;
        right: -6px;
        width: 3px;
        height: 4px;
        border-radius: 1px;
        top: 0
    }

    .gg-pen::after {
        width: 8px;
        height: 7px;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-right: 7px solid;
        left: -11px;
        top: -2px
    }



/* Image Management Modal */
.imanageModal .modal-header {
    position: relative;
    background-color: #710a2c;
    color: white;
    font-family: helvetica neue, Helvetica;
    text-align: center;
    border-radius: 0;
}

    .imanageModal .modal-header .close {
        z-index: 2;
    }

    .imanageModal .modal-header h5 {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-size: 22px;
        font-weight: bold;
        user-select: none;
    }

.imanageModal .modal-content {
    border-radius: 0;
    border: none;
    border-bottom: 5px solid #710a2c;
    min-height: 500px;
}

.imanageModal.small-height .modal-content {
    min-height: 200px;
}

.imanageModal .imSearchBar {
    width: 100%;
    margin-bottom: 16px;
    user-select: none;
}

.imanageModal .modal-body {
    position: relative;
}

.imanageModal .noimgError {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    user-select: none;
    pointer-events: none;
    color: gray;
    width: 100%;
    text-align: center;
}

.imanageModal .uploadImagesBtn {
    color: white;
    background-color: #880c35;
    border: none;
    box-shadow: 0 0 0 1px gray, 0 0 0 0 gray inset;
    transition: box-shadow 0.15s;
    padding: 3px;
}

    .imanageModal .uploadImagesBtn:hover {
        box-shadow: 0 0 0 1px gray, 0 0 5px 0 white inset;
    }

/* Image Upload Styling */
.fu-dialogue {
    width: 100%;
}

.fu-dialogue .fu-header {
    background-color: #710a2c;
    color: white;
    font-family: helvetica neue, Helvetica;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 8px 20px;
}

    .fu-dialogue .fu-body {
        position: relative;
        border: 5px solid #710a2c;
        border-top: none;
        padding: 8px 20px;
        min-height: 200px;
    }
    
    .fu-body {
        overflow :hidden;
    }

    .fu-body .no-file {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        text-align: center;
        color: gray;
        font-size: 18px;
        display: block;
        opacity: 1;
        transition: opacity 0.15s;
    }

    .fu-body .no-file p {
        margin-bottom: 0;
        user-select: none;
    }

    .fu-body:hover .no-file {
        opacity: 0;
    }

    .fu-body .upload {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(128, 128, 128, 0.5);
        opacity: 0;
        transition: opacity 0.15s;
    }

    .fu-body .upload p {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        color: white;
        font-size: 22px;
        font-weight: 300;
        font-family: helvetica neue, Helvetica;
        transform: translateY(-50%);
    }

    .fu-body:hover .upload {
        opacity: 1;
        cursor: pointer;
    }


    .fu-body.selected .no-file {
        display: none;
    }

    .fu-body .file-selected {
        display: none;
    }

    .fu-body.selected .file-selected {
        display: block;
    }

.file-selected p {
    margin-bottom: 0;
}

.file-selected span:not(.nbb) {
    display: block;
    margin-bottom: 1rem;
}

.nbb {
    word-wrap: break-word;
}

.warningMessage {
    margin: 5px 0;
    display: block;
    padding: 8px 20px;
    background-color: #ffff0033;
    outline: 1px solid gold;
    color: black;
    display: none;
}

.im-modal-finalize {
    position: relative;
    height: 100%;
}

    .im-modal-finalize .imupload-state.error span.error,
    .im-modal-finalize .imupload-state.loading span.loading,
    .im-modal-finalize .imupload-state.success span.success,
    .im-modal-finalize .imupload-state.override div.override-dialog,
    .im-modal-finalize .imupload-state.override div.override-dialog button,
    .im-modal-finalize .imupload-state.normal button.upload-btn {
        display: inline-block;
    }

    .im-modal-finalize .imupload-state.override div.override-dialog button {
        margin-top: 10px;
        float: right;
    }

    .im-modal-finalize .imupload-state div,
    .im-modal-finalize .imupload-state span,
    .im-modal-finalize .imupload-state button {
        display: none;
    }

        .ren-error,
        .im-modal-finalize .imupload-state div.override-dialog p,
        .im-modal-finalize .imupload-state span.error {
            color: black;
            background-color: #ff000033;
            outline: 1px solid red;
            padding: 8px 20px;
            margin: 0;
        }

    .ren-success,
    .im-modal-finalize .imupload-state span.success {
        color: black;
        background-color: #00ff0033;
        outline: 1px solid green;
        padding: 8px 20px;
    }

    .im-modal-finalize .imupload-state {
        position: absolute;
        bottom: 0;
        right: 15px;
    }

    .im-modal-finalize button {
        background-color: #710a2c;
        padding: 8px 20px;
        color: white;
        font-family: helvetica neue, Helvetica;
        border: none;
        transition: background-color 0.15s;
    }

    .im-modal-finalize button:hover {
        background-color: #710a2ccc;
    }


.imanageDispRow {
    max-height: 500px;
    min-height: 500px;
    overflow: scroll;
    overflow-x: hidden;
}

.iup-img-contain {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    aspect-ratio: 3/4;
    margin-bottom: 20px;
    user-select: none;
}

    .iup-img-contain img {
        width: 100%;
        height: 100%;
    }

    .iup-img-contain div.overlay {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .iup-img-contain:hover div.overlay {
        opacity: 1;
    }

        .iup-img-contain .iup-edit {
            position: absolute;
            height: 50%;
            width: 100%;
            background-color: rgba(128, 128, 128, 0.6);
            transition: background-color 0.3s;
        }

            .iup-img-contain .iup-edit:hover {
                background-color: rgb(128, 128, 128);
                cursor: pointer;
            }

.iup-delete span,
.iup-edit span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: helvetica neue, Helvetica;
}

        .iup-img-contain .iup-delete {
            position: absolute;
            top: 50%;
            height: 50%;
            width: 100%;
            background-color: rgba(255, 0, 0, 0.6);
            font-weight: bold;
            font-family: helvetica neue, Helvetica;
            transition: background-color 0.3s;
            cursor: pointer;
        }

        .iup-img-contain .iup-delete:hover {
            background-color: rgb(255, 0, 0);
            cursor: pointer;
        }

        .iup-img-contain .file-name {
            position: absolute;
            overflow: hidden;
            white-space: nowrap;
            background-color: gray;
            color: white;
            bottom: 0;
            text-align: center;
            width: 100%;
            user-select: none;
        }

        .modmodbtn {
            background-color: #710a2c;
            outline: 2px solid #710a2c;
            color: white;
            border: none;
            transition: background-color 0.15s, outline 0.15s;
        }

        .modmodbtn.rename {
            margin-left: -4px;
        }

        .modmodbtn:hover {
            background-color: #710a2ccc;
            outline: 2px solid #710a2ccc;
        }

            .modmodbtn:disabled {
                background-color: #710a2c22;
                outline: 2px solid #710a2c22;
                color: gray;
                cursor: not-allowed;
            }

            .modmodbtn.delete {
                padding: 8px 20px;
                font-size: 18px;

            }

        .fitcenter {
            width: fit-content;
            margin: 0 auto;
            text-align: center;
        }

        .rel100 .fitcenter {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .rel100 {
            position: relative;
            height: 100%;
            width: 100%;
        }

.ren-success,
.ren-error {
    margin-top: 10px;
}

.imanageModal .modal-title {
    color: white;
}
/* GGIcons */
.gg-cloud {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 8px;
    height: 2px;
    background: currentColor;
    margin-bottom: -20px
}

    .gg-cloud::after,
    .gg-cloud::before {
        content: "";
        display: block;
        position: absolute;
        border: 2px solid;
        box-sizing: border-box;
        bottom: 0
    }

    .gg-cloud::before {
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        border-right: 0;
        left: -6px;
        width: 7px;
        height: 12px
    }

    .gg-cloud::after {
        width: 16px;
        height: 16px;
        border-radius: 100px;
        border-left-color: transparent;
        right: -8px;
        transform: rotate(-45deg)
    }

.gg-arrow-up {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px
}

    .gg-arrow-up::after,
    .gg-arrow-up::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        top: 4px
    }

    .gg-arrow-up::after {
        width: 8px;
        height: 8px;
        border-top: 2px solid;
        border-left: 2px solid;
        transform: rotate(45deg);
        left: 7px
    }

    .gg-arrow-up::before {
        width: 2px;
        height: 16px;
        left: 10px;
        background: currentColor
    }
/* ------------------------------------------------------------------
   Headshot cropping
   ------------------------------------------------------------------
   The carousel draws every photo in a circle, so whatever does not fit is
   discarded. Editors choose which part survives; the chosen framing is emitted
   as an inline style on the <img> (object-position for panning, transform:
   scale() for zoom) and this wrapper does the clipping.

   The <img> is kept rather than switching to a CSS background so the alt text
   stays available to screen readers and image search. An image with no stored
   framing gets no inline style at all and renders exactly as it did before.
   ------------------------------------------------------------------ */

.crop-frame {
    display: block;
    overflow: hidden;
    position: relative;
}

    /* The image is sized to --z times the frame on BOTH axes and cover-fits into
       that box, so the element overflows the frame by (z-1) on each axis. left/top
       slide that overflow; object-position slides the aspect crop inside the
       element. Both read the same --fx/--fy, so a single focal point moves the
       picture coherently and both axes gain travel as soon as zoom passes 1.

       The earlier version panned with object-position and zoomed with
       transform: scale(). That cannot work -- a transform does not change how
       object-fit crops, because the object-fit box stays the element's
       untransformed size -- so whichever axis was locked at 1x stayed locked at
       every zoom level.

       An image with no stored crop emits no inline style, so these fallbacks
       (centred, unzoomed) are what it renders with, identical to before. */
    .crop-frame > img {
        display: block;
        position: absolute;
        width: calc(100% * var(--z, 1));
        height: calc(100% * var(--z, 1));
        object-fit: cover;
        object-position: calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%);
        left: calc((1 - var(--z, 1)) * var(--fx, 50) * 1%);
        top: calc((1 - var(--z, 1)) * var(--fy, 50) * 1%);
    }

/* The nav thumbnails: the wrapper has to fill the 6rem li and take the
   circle, and the inner img must drop the absolute positioning the older
   indicator rule applies. */
.faculty.carousel-indicators li.pimg .crop-frame {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

    .faculty.carousel-indicators li.pimg .crop-frame > img {
        /* Deliberately NOT position:static any more -- the crop model needs the
           image absolutely positioned so left/top can slide it. The wrapper is
           what the older indicator rule was really trying to place. */
        border-radius: 50%;

        /* The whole crop geometry has to be restated here, not just inherited from
           .crop-frame > img. The pre-existing rule ".faculty.carousel-indicators img"
           near the top of this file sets width and height to 100% and top and left to
           0. That selector is (0,2,1) and .crop-frame > img is only (0,1,1), so the
           older rule wins and pins the image to the frame: zoom collapses to 1x and
           the left/top slide is forced to zero. object-position was never overridden,
           which is why the thumbnails looked slightly cropped but never zoomed or
           panned -- a half-working symptom that reads like the crop data is missing
           when it is actually arriving intact. This selector is (0,3,1) and beats it.
           Keep these four values identical to .crop-frame > img.
           No braces in this comment on purpose: they break naive rule parsing. */
        width: calc(100% * var(--z, 1));
        height: calc(100% * var(--z, 1));
        object-fit: cover;
        object-position: calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%);
        left: calc((1 - var(--z, 1)) * var(--fx, 50) * 1%);
        top: calc((1 - var(--z, 1)) * var(--fy, 50) * 1%);
    }

/* ---- Crop editor (upload panel and the per-image edit dialog) ---- */

.crop-editor {
    display: block;
    margin-bottom: 1rem;
}

    .crop-editor .crop-hint {
        font-size: 12px;
    }

.crop-stage {
    display: flex;
    justify-content: center;
    margin: 0.25rem 0 0.5rem;
}

/* Sized to the largest circle the carousel actually draws (18rem), scaled down
   so it fits the dialog while staying the same shape and therefore honest about
   what will be cropped. */
.crop-preview {
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: #f4f4f4;
    cursor: grab;
    touch-action: none; /* let the drag handler own the gesture */
    user-select: none;
}

    .crop-preview.dragging {
        cursor: grabbing;
        border-color: #888;
    }

    .crop-preview > img {
        pointer-events: none; /* drags belong to the frame, not the image */
        user-select: none;
    }

.crop-zoom-label {
    font-size: 12px;
}

input[type="range"].crop-zoom {
    width: 100%;
    display: block;
    margin-bottom: 0.5rem;
}

.crop-editor .crop-reset {
    background: none;
    border: 1px solid #999;
    font-size: 12px;
    padding: 2px 8px;
}

.crop-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

/* Cursor reflects which way this particular photo can actually be dragged.
   Filling a circle with 'cover' leaves spare image on one axis only, so at 1x a
   portrait photo pans vertically and a landscape one horizontally; zooming gives
   both axes something to slide into view. */
.crop-preview.pan-both { cursor: grab; }
.crop-preview.pan-y    { cursor: ns-resize; }
.crop-preview.pan-x    { cursor: ew-resize; }
.crop-preview.pan-none { cursor: default; }

.crop-preview.pan-both.dragging,
.crop-preview.pan-y.dragging,
.crop-preview.pan-x.dragging { cursor: grabbing; }