@charset "utf-8";
/* CSS Document */

/*
Z-index, zIndex settings in PhotoComp

    1000 - Bootstrap - most elements starting points, e.g. dropdown
    1020 - Bootstrap - many parts
    1030 - Bootstrap - many parts
    2000 to 2104 - Light Gallery
    2250 - PhotoCompModal, bootstrap default 1050, must be above Light Gallery
    3070 - popover, bootstrap default 1070, must be above modals
    3080 - tooltips, bootstrap default 1080, most be above modals
    5000 - JudgeIndicatorArea
    5010 - Gallery Primary footer message
    5011 - Gallery Counter message
    7000 - PhotoCompPageLoadingElement
    8000 - FatalErrorDialog
*/

.nav-tabs .nav-link {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s, transform 0.3s;
}

.nav-tabs .nav-link:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.nav-tabs .nav-link.active {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #000000, #007bff); /* Added gradient background */
    color: #fff;
    border: 4px;
}

.popover.show {
    overflow: visible !important; /* Allow popover to overflow outside the modal */
}

.tooltip.show {
    --bs-tooltip-opacity: 0.95;
}

.popover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Add a shadow */
    min-width: 400px;
    max-width: 800px;
    width: auto; /* Automatically adjust width within the defined constraints */
    z-index: 3070;
}

/* For all browsers */
input::placeholder {
    color: red;
    font-style: italic;
    font-size: 0.9rem;
    /* Add any other styles you want */
}

.form-floating > label {
    margin-bottom: 0.5rem;
    color: var(--bs-info);
    font-size: 0.8rem;
    font-weight: normal;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 255, 0, 0.175) !important; /* Red with some transparency */
}

.popover-header {
    border: 2px solid var(--bs-success); /* Set border width, style, and color */
    background-color: var(--bs-success);
    color: #ffffff;
    font-weight: 500;
}
.popover-body {
    border: 2px solid var(--bs-success); /* Set border width, style, and color */
    background-color: #f8f9fa;
    color: #212529;
}

.tooltip {
    z-index: 3080; /* Higher than the modal's z-index */
}

.tooltip-inner {
    background-color: #f8f9fa; /* Light background for the tooltip body */
    color: #000000; /* Dark text color for contrast */
    font-weight: 500;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Add a shadow */
    border: 2px solid var(--bs-success); /* Set border width, style, and color */
}

.pulse-icon {
    animation: pulse 1.5s infinite ease-in-out;
    display: inline-block;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    } /* Larger scale for more effect */
}

.photocomp-PlaceFirstInline {
    /* gold */
    border-style: solid;
    border-width: 5px;
    border-image: linear-gradient(135deg, #ffd700 90%, #ff0000 100%) 1;
}

.photocomp-PlaceFirst {
    /* gold */
    border-style: solid;
    border-width: 5px;
    border-image: linear-gradient(135deg, #ffd700 90%, #ff0000 100%) 1;
    display: inline;
    margin: 10px;
}

.photocomp-PlaceSecond {
    /* silver */
    border-style: solid;
    border-width: 5px;
    border-image: linear-gradient(135deg, #c0c0c0 90%, #ff0000 100%) 1;
    display: inline;
}

.photocomp-PlaceThird {
    border-style: solid;
    border-width: 5px;
    border-image: linear-gradient(135deg, #cd7f32 90%, #ff0000 100%) 1;
    margin: 10px;
    display: inline;
}

.photocomp-PlaceForth {
    border-style: solid;
    border-width: 5px;
    border-image: linear-gradient(135deg, #2f4f4f 90%, #ff0000 100%) 1;
    margin: 10px;
    display: inline;
}

.photocomp-PlaceFifth {
    border-style: solid;
    border-width: 5px;
    border-image: linear-gradient(135deg, #223131 90%, #ff0000 100%) 1;
    margin: 10px;
    display: inline;
}

.photocomp-PlaceHonorableMention {
    border-style: solid;
    border-width: 5px;
    border-image: linear-gradient(135deg, #434ec1 90%, #ff0000 100%) 1;
    margin: 10px;
    display: inline;
}

.photocomp-UnPlaced {
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    margin: 3px;
    display: inline;
}

.photocomp-Disqualify {
    border-style: dashed;
    border-width: 4px;
    border-color: #000000;
    margin: 3px;
    display: inline;
}

.photocomp-Deleted {
    border-style: dashed;
    border-width: 4px;
    border-color: #ff0000;
    margin: 3px;
    display: inline;
}

.photocomp-UnPlacedWithScore {
    border-style: solid;
    border-width: 1px;
    border-color: #262626;
    margin: 10px;
    display: inline;
}

.photocomp-AlwaysOpen {
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff;
    margin: 10px;
    display: inline;
}

.photocomp-BestInShow {
    border-style: solid;
    border-width: 10px;
    border-image: linear-gradient(135deg, #ffff00 90%, #0000ff 100%) 1;
    margin: 10px;
    display: inline;
}

.photocomp-PeoplesChoice {
    border-style: solid;
    border-width: 5px;
    border-image: linear-gradient(135deg, #00804d 90%, #ff0000 100%) 1;
    margin: 5px;
    display: inline;
}

.photocomp-Judges1Choice {
    border-style: solid;
    border-width: 10px;
    border-image: linear-gradient(135deg, #ff8888 90%, #0000ff 100%) 1;
    margin: 10px;
    display: inline;
}

.photocomp-Judges2Choice {
    border-style: solid;
    border-width: 10px;
    border-image: linear-gradient(135deg, #d75e83 90%, #0000ff 100%) 1;
    margin: 10px;
    display: inline;
}

.photocomp-Judges3Choice {
    border-style: solid;
    border-width: 10px;
    border-image: linear-gradient(135deg, #af347e 90%, #0000ff 100%) 1;
    margin: 10px;
    display: inline;
}

.photocomp-Judges4Choice {
    border-style: solid;
    border-width: 10px;
    border-image: linear-gradient(135deg, #870a79 90%, #0000ff 100%) 1;
    margin: 10px;
    display: inline;
}

.photocomp-Judges5Choice {
    border-style: solid;
    border-width: 10px;
    border-image: linear-gradient(135deg, #800080 90%, #0000ff 100%) 1;
    margin: 10px;
    display: inline;
}
.photocomp-browse-thumbnail-button {
    position: absolute;
    left: 12px;
    top: 10px;
    --bs-btn-color: gray;
    --bs-btn-border-width: 0px;
    --bs-btn-padding-y: 0px;
    --bs-btn-padding-x: 0px;
}

.photocomp-score-thumbnail-button {
    position: absolute;
    left: 32px;
    top: 10px;
    --bs-btn-color: #1a0dab;
    padding-left: 10px;
    padding-right: 10px;
}

.photocomp-remotejudge-current-score {
    --bs-btn-bg: #00804d;
    --bs-btn-border-width: 5px;
    --bs-btn-border-color: #ffce19;
    --bs-btn-hover-border-color: #ffb114;
    --bs-btn-active-bg: #00804d;
    --bs-btn-hover-bg: #005a46;
    padding-left: 2px !important;
    padding-right: 2px !important;
    width: 60px;
    font-size: 120%;
}

.photocomp-remotejudge-thumbtoolbar-score {
    --bs-btn-bg: #00804d;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: #ffce19;
    --bs-btn-hover-border-color: #ffb114;
    --bs-btn-active-bg: #00804d;
    --bs-btn-hover-bg: #005a46;
    --bs-btn-disabled-bg: #00804d;
    --bs-btn-disabled-border-color: #ffb114;
    opacity: 1 !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    color: white;
}

/* used to hide graphical artifact in Image ly themes v2.0 */
.sidr {
    display: none;
}

.photocomp-schedule-season-form {
    background-color: #fffff5;
    margin: 0.5rem;
    color: white;
    text-align: left;
    max-width: 50rem;
    width: 75%;
}

.photocomp-schedule-rule-modal {
    max-width: 50rem;
    width: 75%;
}

.modal-xl {
    max-width: min(90vw, 2000px); /* Use the smaller of the two values */
    margin: 1.75rem auto;
}

.modal-lg {
    max-width: min(90vw, 1000px); /* Use the smaller of the two values */
    margin: 1.75rem auto;
}

.photocomp-75p-75r-modal {
    max-width: 75rem;
    width: 75%;
}

.photocomp-schedule-season-tiny {
    background-color: #fffff5;
    margin: 0.15rem;
    padding: 0rem;
    color: black;
    text-align: center;
    width: 3rem;
    max-width: 3rem;
    height: 3rem;
    max-height: 3rem;
    font-size: 0.7rem;
    line-height: 1.3;
    border-style: solid;
    border-width: 4px 1px 1px 1px;
    border-color: #338f54;
    user-select: none;
}

.photocomp-schedule-season-tiny-current {
    background-color: rgb(201, 222, 236);
    margin: 0.15rem;
    padding: 0rem;
    color: black;
    text-align: center;
    width: 3rem;
    max-width: 3rem;
    height: 3rem;
    max-height: 3rem;
    font-size: 0.7rem;
    line-height: 1.3;
    border-style: solid;
    border-width: 4px 1px 1px 1px;
    border-color: #338f54;
    user-select: none;
}

.photocomp-schedule-season-tiny:hover,
.photocomp-schedule-season-tiny:active:hover {
    background-color: #000f73;
    color: white;
}

.photocomp-schedule-add-card:hover,
.photocomp-schedule-add-card:active:hover {
    background-color: #cccccc;
    color: white;
    cursor: pointer;
}

.photocomp-schedule-event-tiny {
    background-color: #fffff5;
    margin: 0.15rem;
    padding: 0rem;
    color: black;
    text-align: center;
    width: 3rem;
    max-width: 3rem;
    height: 3rem;
    max-height: 3rem;
    font-size: 0.7rem;
    line-height: 1.3;
    border-style: solid;
    border-width: 4px 1px 1px 1px;
    border-color: #093b4e;
}

.photocomp-schedule-event-tiny:hover,
.photocomp-schedule-event-tiny:active:hover {
    background-color: #000f73;
    color: white;
}

.photocomp-schedule-event-tiny-current {
    background-color: rgb(201, 222, 236);
    margin: 0.15rem;
    padding: 0rem;
    color: black;
    text-align: center;
    width: 3rem;
    max-width: 3rem;
    height: 3rem;
    max-height: 3rem;
    font-size: 0.7rem;
    line-height: 1.3;
    border-style: solid;
    border-width: 4px 1px 1px 1px;
    border-color: #093b4e;
}

.photocomp-schedule-activity-tiny {
    background-color: #fffff5;
    margin: 0.15rem;
    padding: 0rem;
    color: black;
    text-align: center;
    width: 3rem;
    max-width: 3rem;
    height: 3rem;
    max-height: 3rem;
    font-size: 0.7rem;
    line-height: 1.3;
    border-style: solid;
    border-width: 4px 1px 1px 1px;
    border-color: #7d460a;
}

.photocomp-schedule-activity-tiny:hover,
.photocomp-schedule-activity-tiny:active:hover {
    background-color: #000f73;
    color: white;
}

.photocomp-schedule-activity-tiny-current {
    background-color: rgb(201, 222, 236);
    margin: 0.15rem;
    padding: 0rem;
    color: black;
    text-align: center;
    width: 3rem;
    max-width: 3rem;
    height: 3rem;
    max-height: 3rem;
    font-size: 0.7rem;
    line-height: 1.3;
    border-style: solid;
    border-width: 4px 1px 1px 1px;
    border-color: #7d460a;
}

.photocomp-schedule-season-form .card-header {
    background-color: #338f54;
    padding: 0.25rem !important;
    font-weight: 550;
    text-align: center;
}

.photocomp-schedule-season-form .card-body {
    color: black;
}

.photocomp-schedule-season-form .card-footer {
    text-align: center;
    background-color: #6c757d;
    padding: 0.2rem !important;
}

.photocomp-schedule-season {
    max-width: 15rem;
    width: 15rem;
    background-color: #fffff5;
    margin: 0.5rem;
    color: white;
    text-align: center;
}

.photocomp-schedule-season .card-header {
    background-color: #338f54;
    padding: 0.25rem !important;
    font-weight: 550;
}

.photocomp-schedule-season .card-body {
    color: black;
}

.photocomp-schedule-season .card-footer {
    background-color: #6c757d;
    padding: 0.2rem !important;
}

.photocomp-schedule-event {
    max-width: 15rem;
    width: 15rem;
    background-color: #fffff5;
    margin: 0.5rem;
    color: white;
    text-align: center;
}

.photocomp-schedule-event-form {
    background-color: #fffff5;
    margin: 0.5rem;
    color: white;
    text-align: left;
    width: 50rem;
}

.photocomp-schedule-event-form .card-header {
    background-color: #093b4e;
    padding: 0.25rem !important;
    font-weight: 550;
    text-align: center;
}

.photocomp-schedule-event-form .card-body {
    color: black;
}

.photocomp-schedule-event-form .card-footer {
    text-align: center;
    background-color: #6c757d;
    padding: 0.2rem !important;
}

.photocomp-schedule-event .card-header {
    background-color: #093b4e;
    padding: 0.25rem !important;
    font-weight: 550;
}

.photocomp-schedule-event .card-body {
    color: black;
}

.photocomp-schedule-event .card-footer {
    background-color: #6c757d;
}

div.PageHeaderLeft {
    position: fixed;
    top: 40px;
    left: 20px;
    font-size: 14px;
    color: #ffffff;
    text-shadow: 2px 2px 10px #000000;
    z-index: 2081;
}

/* Main Container */
/* Backdrop */

.lg-backdrop {
    z-index: 2000 !important; /* Original: 1040 */
}

.lg-outer {
    z-index: 2001 !important; /* Original: 1000 */
}

/* Navigation and Controls */
.lg-toolbar,
.lg-actions {
    z-index: 2050 !important; /* Original: 1050 */
}

.lg-image {
    z-index: 2051 !important; /* Original: 1051 */
}
.lg-prev,
.lg-next {
    z-index: 2052 !important; /* Original: 1051 */
}

/* Sub HTML (Captions, etc.) */
.lg-sub-html {
    z-index: 2080 !important; /* Original: 1080 */
}

/* Fullscreen Button */
.lg-fullscreen {
    z-index: 2100 !important; /* Original: 1100 */
}

/* Zoom In/Out Buttons */
.lg-zoom-in,
.lg-zoom-out {
    z-index: 2101 !important; /* Original: 1101 */
}

/* Close Button */
.lg-close {
    z-index: 2102 !important; /* Original: 1102 */
}

/* Progress Bar */
.lg-progress-bar {
    z-index: 2103 !important; /* Original: 1103 */
}

/* Loading Indicator (Spinner) */
.lg-loading-overlay {
    z-index: 2104 !important; /* Original: 1104 */
}

.lg-toolbar {
    background-color: #262626; /* Use !important to ensure override */
}

.lg-toolbar .lg-icon {
    color: linen !important; /* Use !important to ensure override */
}
/* judge score indicator area */

.pc-judge-score-success {
    color: #ffffff;
    background-color: var(--bs-primary-bg-subtle);
    border-color: #ffffff;
}

.pc-judge-score-empty {
    background-color: black;
    border-color: #ffffff;
}

/* New Transition 1 - Spiral In */
.lg-css3.lg-spiral-in .lg-item {
    opacity: 0;
    transform: rotate(360deg) scale(0.5);
}
.lg-css3.lg-spiral-in .lg-item.lg-current {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    transition: transform 0.8s ease-in-out, opacity 0.8s ease;
}

/* New Transition 2 - Bounce and Fade */
.lg-css3.lg-bounce-fade .lg-item {
    opacity: 0;
    transform: translateY(-50px);
}
.lg-css3.lg-bounce-fade .lg-item.lg-current {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.6s ease-out, opacity 0.6s ease;
    animation: lg-bounce 0.6s;
}
@keyframes lg-bounce {
    0% {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* New Transition 3 - Flip Horizontal */
.lg-css3.lg-flip-horizontal .lg-item {
    opacity: 0;
    transform: rotateY(90deg);
}
.lg-css3.lg-flip-horizontal .lg-item.lg-current {
    opacity: 1;
    transform: rotateY(0deg);
    transition: transform 0.8s ease, opacity 0.8s ease;
}

/* New Transition 4 -  Slide and Scale Down */
.lg-css3.lg-slide-scale-down .lg-item {
    opacity: 0;
    transform: translateX(100px) scale(1.2);
}
.lg-css3.lg-slide-scale-down .lg-item.lg-current {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: transform 0.7s ease, opacity 0.7s ease;
}

/* New Transition 5 -  Elastic Zoom */
.lg-css3.lg-elastic-zoom .lg-item {
    opacity: 0;
    transform: scale(0.5);
}
.lg-css3.lg-elastic-zoom .lg-item.lg-current {
    opacity: 1;
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s ease;
}

/* New Transition 6 -  Skew and Fade In */
.lg-css3.lg-skew-fade-in .lg-item {
    opacity: 0;
    transform: skewX(20deg);
}
.lg-css3.lg-skew-fade-in .lg-item.lg-current {
    opacity: 1;
    transform: skewX(0deg);
    transition: transform 0.6s ease-out, opacity 0.6s ease;
}

/* New Transition 7 -  Rotate and Fade Out */
.lg-css3.lg-rotate-fade-out .lg-item {
    opacity: 1;
    transform: rotate(0deg);
}
.lg-css3.lg-rotate-fade-out .lg-item.lg-current {
    opacity: 0;
    transform: rotate(-30deg);
    transition: transform 0.7s ease-in, opacity 0.7s ease;
}

/* New Transition 8 -  3D Flip Horizontal */
.lg-css3.lg-3d-flip-horizontal .lg-item {
    opacity: 0;
    transform: perspective(1000px) rotateY(90deg);
}
.lg-css3.lg-3d-flip-horizontal .lg-item.lg-current {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg);
    transition: transform 1s ease, opacity 1s ease;
}

/* New Transition 9 -  Slide Up and Scale Up */
.lg-css3.lg-slide-up-scale-up .lg-item {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
}
.lg-css3.lg-slide-up-scale-up .lg-item.lg-current {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: transform 0.8s ease-out, opacity 0.8s ease;
}

/* New Transition 10 -  Perspective Slide */
.lg-css3.lg-perspective-slide .lg-item {
    opacity: 0;
    transform: perspective(800px) translateX(-100px);
}
.lg-css3.lg-perspective-slide .lg-item.lg-current {
    opacity: 1;
    transform: perspective(800px) translateX(0);
    transition: transform 0.7s ease, opacity 0.7s ease;
}

/* ripple Effect 0: Expanding Circle (6s, Constrained to Div, Always a Circle) */
.ripple-effect-0 {
    background-color: rgba(0, 0, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.ripple-effect-0:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10%;
    height: 10%;
    background-color: rgba(0, 0, 255, 0.2);
    border-radius: 50%; /* Ensures the shape is always a circle */
    transform: translate(-50%, -50%);
    animation: ripple-0 10s linear infinite;
}

@keyframes ripple-0 {
    0% {
        width: 10%;
        height: 10%;
        opacity: 1;
    }
    100% {
        width: 90%;
        height: 90%;
        opacity: 0;
    }
}