/* #6833 Phase 5 — native Page Image slideshow. Replaces the legacy Gallery/Old `.ig-*` slideshow
   CSS so the element carries no dependency on the old widget. Structural only; the per-slide <img>
   crop geometry comes from translateZoomProperties inline styles. */

.sk-pi-slideshow {
   width: 100%;
}

/* Aspect crop box: height:0 + padding-bottom (set inline) establishes the cover-frame ratio; the
   banner (.pageImage, height:auto) wraps it. Ports the legacy `.ig-crop-wrapper`. */
.sk-pi-slideshow-frame {
   position: relative;
   width: 100%;
   height: 0;
   margin: 0 auto;
   overflow: hidden;
}

.sk-pi-slide {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
}

/* The inline width/height/left/top/transform from translateZoomProperties position the image inside
   the crop box, so max-width must not clamp it. */
.sk-pi-slide-img {
   position: absolute;
   display: block;
   max-width: none;
}

/* 'zoom*' transitions: a Ken Burns scale on the current slide, layered on the fade crossfade (ports the
   legacy fade_zoom effect). This wrapper is a positioned box (same as the slide) so the img keeps its
   crop geometry; the scale animates over the slide dwell (set inline) and is clipped by the frame. */
.sk-pi-slide-zoom {
   position: absolute;
   inset: 0;
}
@keyframes sk-pi-kb-in {
   from {
      transform: scale(1);
   }
   to {
      transform: scale(1.1);
   }
}
@keyframes sk-pi-kb-out {
   from {
      transform: scale(1.1);
   }
   to {
      transform: scale(1);
   }
}

/* Per-slide link fills the slide so the whole cover area is clickable; the img crops within it. */
.sk-pi-slide-link {
   position: absolute;
   inset: 0;
   display: block;
}

/* 'slide' transition: a horizontal flex track translated by the current index. Track items flow side
   by side (relative), each filling the crop box; the img inside stays absolutely positioned. */
.sk-pi-slide-track {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   height: 100%;
}

.sk-pi-slide-track-item {
   position: relative;
   flex: 0 0 100%;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

/* --- Animated caption -------------------------------------------------------------------------- */
.sk-pi-caption {
   position: absolute;
   z-index: 2;
   color: #fff;
}

/* Entrance replays on each slide change (the parent keys the caption by the current index). The
   FROM opacity/translate come from inline CSS vars set per caption_animation; duration is inline. */
.sk-pi-caption-animated {
   animation-name: sk-pi-caption-in;
   animation-timing-function: ease;
   animation-fill-mode: both;
}

@keyframes sk-pi-caption-in {
   from {
      opacity: var(--sk-pi-cap-from-op, 0);
      transform: translate(var(--sk-pi-cap-from-x, 0), var(--sk-pi-cap-from-y, 0));
   }
   to {
      opacity: 1;
      transform: translate(0, 0);
   }
}

/* --- Navigation (dots / numbers / buttons) ------------------------------------------------------ */
.sk-pi-nav {
   position: absolute;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 10px;
}

.sk-pi-nav-bottom {
   bottom: 18px;
}
.sk-pi-nav-top {
   top: 18px;
}
.sk-pi-nav-center {
   left: 50%;
   transform: translateX(-50%);
}
.sk-pi-nav-left {
   left: 18px;
}
.sk-pi-nav-right {
   right: 18px;
}

.sk-pi-nav-dot {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.5);
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
   cursor: pointer;
   transition: background 0.2s ease;
}
.sk-pi-nav-dot.sk-pi-nav-selected {
   background: #fff;
}

.sk-pi-nav-number {
   min-width: 22px;
   height: 22px;
   padding: 0 4px;
   line-height: 22px;
   text-align: center;
   color: #fff;
   font-size: 12px;
   background: rgba(0, 0, 0, 0.35);
   border-radius: 4px;
   cursor: pointer;
}
.sk-pi-nav-number.sk-pi-nav-selected {
   background: rgba(0, 0, 0, 0.7);
}

.sk-pi-nav-nums {
   color: #fff;
   font-size: 13px;
   text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

/* --- Buttons (nav prev/next, inside prev/next, play/pause) -------------------------------------- */
.sk-pi-nav-btn,
.sk-pi-inside-btn,
.sk-pi-play-btn {
   border: 0;
   padding: 0;
   background-color: transparent;
   cursor: pointer;
}
.sk-pi-nav-btn:disabled,
.sk-pi-inside-btn:disabled {
   opacity: 0.35;
   cursor: default;
}

/* Chevron arrows drawn with a rotated border (no image dependency). */
.sk-pi-nav-btn,
.sk-pi-inside-btn {
   position: relative;
   width: 40px;
   height: 40px;
}
.sk-pi-nav-btn::before,
.sk-pi-inside-btn::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 12px;
   height: 12px;
   border-top: 3px solid #fff;
   border-right: 3px solid #fff;
   filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
.sk-pi-nav-prev::before,
.sk-pi-inside-prev::before {
   transform: translate(-30%, -50%) rotate(-135deg);
}
.sk-pi-nav-next::before,
.sk-pi-inside-next::before {
   transform: translate(-70%, -50%) rotate(45deg);
}

.sk-pi-inside-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 3;
}
.sk-pi-inside-prev {
   left: 12px;
}
.sk-pi-inside-next {
   right: 12px;
}

.sk-pi-play-btn {
   position: absolute;
   bottom: 12px;
   left: 12px;
   z-index: 3;
   width: 34px;
   height: 34px;
}
.sk-pi-play-btn::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
.sk-pi-play-btn.sk-pi-paused::before {
   border-style: solid;
   border-width: 8px 0 8px 13px;
   border-color: transparent transparent transparent #fff;
}
.sk-pi-play-btn.sk-pi-playing::before {
   width: 12px;
   height: 14px;
   border-left: 4px solid #fff;
   border-right: 4px solid #fff;
}

.sk-input-field-wrapper {
   margin: 10px 0;
}

.sk-input-field-input-container {
   position: relative;
   width: 100%;
}

.sk-input-field-input {
   width: 100%;
   box-sizing: border-box;
   border-radius: 6px;
   border: 1px solid #808080;
   background: #FAFAFA;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   color: #444444;
}

.sk-input-field-input::placeholder {
   color: #777777;
}

.sk-input-field-input.small {
   height: 24px;
   font-size: 12px;
}

.sk-input-field-input.small,
.sk-input-field-input.small:focus:placeholder-shown {
   padding: 0 6px;
}

.sk-input-field-input.medium {
   height: 32px;
   font-size: 14px;
}

.sk-input-field-input.medium,
.sk-input-field-input.medium:focus:placeholder-shown {
   padding: 0 9px;
}

.sk-input-field-input.large {
   height: 40px;
   font-size: 16px;
}

.sk-input-field-input.large,
.sk-input-field-input.large:focus:placeholder-shown {
   padding: 0 12px;
}

.sk-input-field-input:hover {
   background: #F2F2F2;
}

.sk-input-field-input:focus {
   outline: none;
}

.sk-input-field-input:focus-visible {
   background: #FFFFFF;
   border-color: #0075C4;
   box-shadow: inset 0 0 0 1px #0075C4;
   outline: none;
   color: #444444;
}

.sk-input-field-input:disabled {
   background: #E6E6E6;
   border: 1px solid #B1B1B1;
   color: #B1B1B1;
}

.sk-input-field-input.error {
   border: 1px solid #D50101;
}

.sk-input-field-input.error:focus-visible {
   border-color: #D50101;
   box-shadow: inset 0 0 0 1px #D50101;
}

.sk-input-field-input.error.small {
   padding-right: 30px;
}

.sk-input-field-input.error.medium {
   padding-right: 34px;
}

.sk-input-field-input.error.large {
   padding-right: 38px;
}

.sk-input-field-error-icon {
   position: absolute;
   top: 50%;
   right: 10px;
   width: 18px;
   height: 18px;
   transform: translateY(-50%);
   background-image: url('/Shared/UIComponents/React/InputField/Images/error_icon.svg');
   background-repeat: no-repeat;
   background-size: contain;
   pointer-events: none;
}

.sk-input-field-label {
   display: block;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   white-space: nowrap;
   color: #222222;
}

.sk-input-field-label.small,
.sk-input-field-label.medium {
   font-size: 12px;
   margin-bottom: 5px;
}

.sk-input-field-label.large {
   font-size: 14px;
   margin-bottom: 8px;
}

.sk-input-field-label-required-star {
   color: #D50101;
   white-space: pre;
}

.sk-input-field-error {
   font-family: Lato2, Helvetica, Arial, sans-serif;
   color: #D50101;
   white-space: pre-line;
}

.sk-input-field-error.small,
.sk-input-field-error.medium {
   font-size: 12px;
   margin-top: 5px;
}

.sk-input-field-error.large {
   font-size: 14px;
   margin-top: 8px;
}

.sk-input-field-input.range {
   -webkit-appearance: none;
   appearance: none;
   height: 8px;
   min-height: 8px;
   background: #0075C4;
   outline: none;
   margin: 0;
}

.sk-input-field-input.range:focus {
   outline: none;
}

.sk-input-field-input.range::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 16px;
   height: 16px;
   background: #FFFFFF;
   border-radius: 16px;
   border: 3px solid #0075C4;
   cursor: pointer;
}

.sk-input-field-input.range::-moz-range-thumb {
   width: 16px;
   height: 16px;
   background: #FFFFFF;
   border-radius: 16px;
   border: 3px solid #0075C4;
   cursor: pointer;
}

.sk-input-field-hint {
   font-family: Lato2, Helvetica, Arial, sans-serif;
   color: #6E6E6E;
   white-space: pre-line;
}

.sk-input-field-hint.small,
.sk-input-field-hint.medium {
   font-size: 10px;
   margin-top: 3px;
}

.sk-input-field-hint.large {
   font-size: 12px;
   margin-top: 5px;
}

.sk-select-wrapper {
   display: flex;
   flex-direction: column;
   margin: 10px 0;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.sk-select-label {
   font-size: 12px;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   white-space: nowrap;
   color: #222222;
   margin-bottom: 5px;
}

.sk-select-options-wrapper {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 30px;
   padding: 0 6px;
   border-radius: 6px;
   border: 1px solid #808080;
   background-color: #FAFAFA;
   font-size: 14px;
   cursor: pointer;
}

.sk-select-options-wrapper:hover {
   background-color: #F2F2F2;
}

.sk-select-options-wrapper:focus-visible {
   outline: none;
   border-color: #0075C4;
   box-shadow: inset 0 0 0 1px #0075C4;
}

.sk-select-options-wrapper.active {
   border-color: #0075C4;
   box-shadow: inset 0 0 0 1px #0075C4;
   background-color: #FFFFFF;
}

.sk-select-options-wrapper.disabled,
.sk-select-options-wrapper[aria-disabled="true"] {
   background-color: #E6E6E6;
   border-color: #B1B1B1;
   color: #B1B1B1;
   cursor: default;
}

.sk-selected-option-title {
   max-width: 80%;
   color: #444444;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.sk-selected-option-arrow {
   width: 20px;
   height: 20px;
   background-image: url(/Shared/UIComponents/React/Select/Images/expand_more_icon.svg);
   background-size: contain;
   background-repeat: no-repeat;
}

.sk-selected-option-arrow.active {
   background-image: url(/Shared/UIComponents/React/Select/Images/expand_less_icon.svg);
}

.sk-selected-cover {
   position: fixed;
   inset: 0;
   z-index: 1;
   cursor: default;
}

.sk-select-options {
   display: none;
   position: absolute;
   top: 35px;
   width: 100%;
   max-height: 140px;
   padding: 8px 0;
   font-size: 14px;
   left: 0;
   text-align: left;
   background-color: #FFFFFF;
   border-radius: 6px;
   border: 1px solid #808080;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   box-sizing: border-box;
   z-index: 2;
   overflow: auto;
}

.sk-select-options.active {
   display: block;
}

.sk-select-option {
   height: 32px;
   padding: 0 6px;
   line-height: 32px;
   cursor: pointer;
   color: #444444;
}

.sk-select-option:not(.disabled):not(.selected):hover {
   background-color: #F2F2F2;
}

.sk-select-option.selected {
   background-color: #E5F1F9;
   background-image: url(/Shared/UIComponents/React/Select/Images/checkmark.svg);
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 20px 20px;
   padding-right: 36px;
}

.sk-select-option:not(.disabled):focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 2px #0075C4;
   border-radius: 0;
}

.sk-select-option.disabled {
   background-color: #E6E6E6;
   color: #B1B1B1;
   cursor: default;
}

/* Keyboard focus indicator on the currently-focused option. :focus-visible
   only triggers on keyboard navigation, not mouse clicks - so mouse users see
   the existing :hover background and keyboard users see a blue outline. */
.sk-select-option:focus-visible {
   outline: 2px solid #007ba0;
   outline-offset: -2px;
}

/* Same focus indicator for the combobox trigger. */
.sk-select-options-wrapper:focus-visible {
   outline: 2px solid #007ba0;
   outline-offset: 2px;
}

.sk-select-option-label {
   max-width: 80%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: inherit;
}

.sk-select-hint {
   margin-top: 3px;
   font-size: 10px;
   color: #777;
   white-space: pre-line;
}

.sk-input-with-units-wrapper {
   display: block;
   width: 100%;
   margin: 10px 0;
}

.sk-input-field-with-units {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: baseline;
}

.sk-input-field-with-units .sk-input-field-wrapper,
.sk-input-field-with-units .sk-select-wrapper {
   margin: 0;
}

.sk-input-field-with-units .sk-input-field-wrapper {
   flex-grow: 1;
}

.sk-input-field-with-units .sk-select-wrapper {
   max-width: 90px;
   flex: 1 1 75px;
}

.sk-input-field-with-units .sk-select-options-wrapper {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-color: transparent;
}

.sk-input-field-with-units .sk-select-options-wrapper.active {
   border-left-color: #0075C4;
}


.sk-input-field-with-units .sk-input-field-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}
.sk-validation-error-message {
   font-family: Lato2, Helvetica, Arial, sans-serif;
   color: #D50101;
   white-space: pre-line;
}

.sk-validation-error-message.small,
.sk-validation-error-message.medium {
   font-size: 12px;
}

.sk-validation-error-message.large {
   font-size: 14px;
   margin-top: 3px;
}

.sk-validation-error-message.x-large {
   font-size: 16px;
   margin-top: 6px;
}

.sk-validation-red-outline:focus,
.sk-validation-red-outline:not(:focus) {
   border: 1px solid #D50101;
}

.sk-validation-red-outline:focus-visible {
   border-color: #D50101;
   box-shadow: inset 0 0 0 1px #D50101;
}
body:has(.sk-popup-outer-container) {
    overflow: hidden;
}

.sk-popup-outer-container {
    position: fixed;
    inset: 0;
    z-index: 10003; /* Same as modal z-index */
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 0;
}

.sk-popup-container {
    position: absolute;
    max-width: 30vw;
}

.sk-popup-container-full-width {
   max-width: unset;
}

.sk-popup-container.sk-popup-no-background-blur {
    position: fixed;
    z-index: 10003; /* Same as modal z-index */
    opacity: 0;
}

.sk-popup-container.sk-popup-hidden {
    display: none;
}

.sk-popup-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: #FFFFFF;
    z-index: 10001;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.sk-popup-container:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.sk-popup-inner-container {
    position: relative;
    width: 100%;
    z-index: 10002;
}

.sk-popup-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: fit-content;
    padding: 15px;
    border-radius: 4px;
    background: #FFFFFF;
    font-family: Lato2, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #000000;
}

.sk-popup-title {
    font-size: 14px;
    font-weight: bold;
    color: #222222;
}

.sk-popup-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background-image: url(/Shared/UIComponents/React/Popup/Images/close_icon.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 0px 0px;
    cursor: pointer;
}

.sk-popup-footer-container {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-top: 10px;
}

.sk-popup-steps-text {
    display: flex;
    flex-shrink: 1;
    align-items: center;
    font-size: 12px;
    color: rgba(68, 68, 68, 0.7);
}

.sk-popup-buttons-container {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 10px;
}

.sk-popup-fade-out {
    -webkit-animation: sk-popup-fade-out-animation 0.1s linear forwards;
    animation: sk-popup-fade-out-animation 0.1s linear forwards;
}

@-webkit-keyframes sk-popup-fade-out-animation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

@keyframes sk-popup-fade-out-animation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

.sk-popup-fade-in {
    -webkit-animation: sk-popup-fade-in-animation 0.1s linear forwards;
    animation: sk-popup-fade-in-animation 0.1s linear forwards;
}

@-webkit-keyframes sk-popup-fade-in-animation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@keyframes sk-popup-fade-in-animation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 600px) {    
   .sk-popup-container {
      max-width: 70vw;
   }

   .sk-popup-container.sk-popup-container-full-width {
      max-width: 100%;
   }
}
.sk-tooltip-container .sk-popup-content {
    padding: 7px 10px;
}
.sk-button {
   position: relative;
   border-radius: 6px;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   font-weight: normal;
   cursor: pointer;
}

.sk-button.small {
   height: 24px;
   min-height: 24px;
   padding: 0 10px;
   font-size: 12px;
}

.sk-button.medium {
   height: 32px;
   min-height: 32px;
   padding: 0 15px;
   font-size: 14px;
}

.sk-button.large {
   height: 40px;
   min-height: 40px;
   padding: 0 20px;
   font-size: 16px;
}

.sk-button.primary {
   background: #0075C4;
   border: 1px solid #0075C4;
   color: #FFFFFF;
}

.sk-button.primary:hover,
.sk-button.primary:not(:disabled):active,
.sk-button.primary:not(:disabled).active {
   background: #005D9D;
   border-color: #005D9D;
}

.sk-button.primary:focus-visible {
   outline: 2px solid #0075C4;
   outline-offset: 2px;
}

.sk-button.primary:disabled {
   background: #E6E6E6;
   border-color: #E6E6E6;
   color: #B1B1B1;
   cursor: inherit;
}

.sk-button.primaryOutlined {
   background: transparent;
   border: 1px solid #0075C4;
   color: #0075C4;
}

.sk-button.primaryOutlined:hover,
.sk-button.primaryOutlined:not(:disabled):active,
.sk-button.primaryOutlined:not(:disabled).active {
   background: #0075C4;
   color: #FFFFFF;
}

.sk-button.primaryOutlined:focus-visible {
   outline: 2px solid #0075C4;
   outline-offset: 2px;
}

.sk-button.primaryOutlined:disabled {
   border-color: #B1B1B1;
   color: #B1B1B1;
   background: transparent;
   cursor: inherit;
}

.sk-button.whiteOutlined {
   background: transparent;
   border: 1px solid #FFFFFF99;
   color: #FFFFFF;
}

.sk-button.whiteOutlined:hover,
.sk-button.whiteOutlined:not(:disabled):active,
.sk-button.whiteOutlined:not(:disabled).active {
   border-color: #FFFFFF;
   color: #FFFFFF;
}

.sk-button.whiteOutlined:focus-visible {
   outline: 2px solid #0075C4;
   outline-offset: 2px;
}

.sk-button.whiteOutlined:disabled {
   border-color: #FFFFFF4D;
   color: #FFFFFF4D;
   background: transparent;
   cursor: inherit;
}

.sk-button.text {
   background: transparent;
   border: none;
   color: #0075C4;
}

.sk-button.text:hover,
.sk-button.text:not(:disabled):active,
.sk-button.text:not(:disabled).active {
   color: #005D9D;
}

.sk-button.text:focus-visible {
   outline: 2px solid #0075C4;
   outline-offset: 2px;
   border-radius: 6px;
}

.sk-button.text:disabled {
   color: #B1B1B1;
   cursor: inherit;
}

.sk-button.accent {
   background: #DD7A1F;
   border: 1px solid #DD7A1F;
   color: #222222;
}

.sk-button.accent:hover,
.sk-button.accent:not(:disabled):active,
.sk-button.accent:not(:disabled).active {
   background: #E4954C;
   border-color: #E4954C;
}

.sk-button.accent:focus-visible {
   outline: 2px solid #0075C4;
   outline-offset: 2px;
}

.sk-button.accent:disabled {
   background: #E6E6E6;
   border-color: #E6E6E6;
   color: #B1B1B1;
   cursor: inherit;
}

.sk-button.alert {
   background: #D50101;
   border: 1px solid #D50101;
   color: #FFFFFF;
}

.sk-button.alert:hover,
.sk-button.alert:not(:disabled):active,
.sk-button.alert:not(:disabled).active {
   background: #B30101;
   border-color: #B30101;
}

.sk-button.alert:focus-visible {
   outline: 2px solid #0075C4;
   outline-offset: 2px;
}

.sk-button.alert:disabled {
   background: #E6E6E6;
   border-color: #E6E6E6;
   color: #B1B1B1;
   cursor: inherit;
}

.sk-button.success {
   background: #00A53B;
   border: 1px solid #00A53B;
   color: #222222;
}

.sk-button.success:hover,
.sk-button.success:not(:disabled):active,
.sk-button.success:not(:disabled).active {
   background: #029F3A;
   border-color: #029F3A;
}

.sk-button.success:focus-visible {
   outline: 2px solid #0075C4;
   outline-offset: 2px;
}

.sk-button.success:disabled {
   background: #E6E6E6;
   border-color: #E6E6E6;
   color: #B1B1B1;
   cursor: inherit;
}

.sk-button:focus {
   outline: none;
   box-shadow: none;
}

.sk-button.loading {
   background: #FFFFFF !important;
   color: #FFFFFF !important;
}

.sk-button.primary.loading,
.sk-button.primaryOutlined.loading,
.sk-button.text.loading {
   border: 1px solid #0075C4;
}

.sk-button.whiteOutlined.loading {
   border: 1px solid rgba(255, 255, 255, 1);
}

.sk-button.accent.loading {
   border: 1px solid #DD7A1F;
}

.sk-button.alert.loading {
   border: 1px solid #D50101;
}

.sk-button.success.loading {
   border: 1px solid #00A53B;
}

.sk-button.loading::after {
   content: "";
   position: absolute;
   width: 12px;
   height: 12px;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   border: 2px solid transparent;
   border-radius: 50%;
   animation: button-loading-spinner 1s ease infinite;
}

.sk-button.primary.loading::after,
.sk-button.primaryOutlined.loading::after,
.sk-button.text.loading::after {
   border-top-color: #0075C4;
}

.sk-button.whiteOutlined.loading::after {
   border-top-color: rgba(255, 255, 255, 1);
}

.sk-button.accent.loading::after {
   border-top-color: #DD7A1F;
}

.sk-button.alert.loading::after {
   border-top-color: #D50101;
}

.sk-button.success.loading::after {
   border-top-color: #00A53B;
}

@keyframes button-loading-spinner {
   from {
       transform: rotate(0turn);
   }

   to {
       transform: rotate(1turn);
   }
}

.sk-section-selector-wrapper {
   display: flex;
   position: relative;
}

.sk-section-selector-select-text {
   font-size: 13px;
   color: #222222;
}

.sk-section-selector-select-title {
   display: inline-block;
   max-width: 85px;
   padding-left: 4px;
   font-size: 13px;
   color: #0075C4;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   cursor: pointer;
}

.sk-section-selector-select-title-arrow {
   width: 15px;
   height: 15px;
   display: inline-block;
   background: url(/Shared/Images/AdminArea/new-opb-sprite.svg) no-repeat transparent -14px -1747px;
   cursor: pointer;
}

.sk-section-selector-select-option-wrapper {
   display: none;
}

.sk-section-selector-select-option-wrapper.active {
   display: block;
   position: absolute;
   top: 20px;
   right: 0;
   padding: 8px 0;
   text-align: left;
   z-index: 2;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   font-size: 13px;
   background-color: #FFFFFF;
   border-radius: 6px;
   color: #444444;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   overflow: hidden;
}

.sk-section-selector-selectable-option {
   padding: 10px 13px;
   color: #444444;
   font-size: 13px;
   line-height: normal;
   cursor: pointer;
   white-space: nowrap;
}

.sk-section-selector-selectable-option.selected {
   background-color: #E5F1F9;
   background-image: url(/Shared/UIComponents/React/Select/Images/checkmark.svg);
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 20px 20px;
   padding-right: 38px;
}

.sk-section-selector-selectable-option:not(.disabled):not(.selected):hover {
   background-color: #F2F2F2;
}

.sk-section-selector-selectable-option:not(.disabled):focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 2px #0075C4;
   border-radius: 0;
}

.sk-section-selector-selectable-option.disabled {
   background-color: #E6E6E6;
   color: #B1B1B1;
   cursor: default;
}

.sk-button-with-dropdown-container {
   display: flex;
   height: fit-content;
}

.sk-button-with-dropdown-container.primary,
.sk-button-with-dropdown-container.alert {
   color: #FFFFFF;
}

.sk-button-with-dropdown-container.accent,
.sk-button-with-dropdown-container.success {
   color: #222222;
}

.sk-button-with-dropdown-container.primaryOutlined,
.sk-button-with-dropdown-container.text {
   color: #0075C4;
}

.sk-button-with-dropdown-container.whiteOutlined {
   color: #FFFFFF;
}

.sk-button-with-dropdown-container.whiteOutlined:not(.disabled):hover {
   color: #FFFFFF;
}

.sk-button-with-dropdown-container.disabled {
   color: #B1B1B1;
}

.sk-button-with-dropdown-btn {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

.sk-button-with-dropdown-divider {
   position: relative;
   width: 1px;
   background-color: currentColor;
}

.sk-button-with-dropdown-dropdown-btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

.sk-button-with-dropdown-dropdown-btn.small {
   padding: 0 10px !important;
}

.sk-button-with-dropdown-dropdown-btn.medium {
   padding: 0 14px !important;
}

.sk-button-with-dropdown-dropdown-btn.large {
   padding: 0 18px !important;
}

.sk-button-with-dropdown-dropdown-btn:after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   mask-image: url('/Shared/Images/AdminArea/new-opb-sprite.svg');
   -webkit-mask-image: url('/Shared/Images/AdminArea/new-opb-sprite.svg');
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   background-color: currentColor;
}

.sk-button-with-dropdown-dropdown-btn.small:after {
   mask-size: 36px;
   -webkit-mask-size: 36px;
   mask-position: center -1521px;
   -webkit-mask-position: center -1521px;
}

.sk-button-with-dropdown-dropdown-btn.small.opened:after {
   mask-position: center -1546px;
   -webkit-mask-position: center -1546px;
}

.sk-button-with-dropdown-dropdown-btn.medium:after {
   mask-size: 40px;
   -webkit-mask-size: 40px;
   mask-position: center -1687px;
   -webkit-mask-position: center -1687px;
}

.sk-button-with-dropdown-dropdown-btn.medium.opened:after {
   mask-position: center -1715px;
   -webkit-mask-position: center -1715px;
}

.sk-button-with-dropdown-dropdown-btn.large:after {
   mask-size: 44px;
   -webkit-mask-size: 44px;
   mask-position: center -1854px;
   -webkit-mask-position: center -1854px;
}

.sk-button-with-dropdown-dropdown-btn.large.opened:after {
   mask-position: center -1884px;
   -webkit-mask-position: center -1884px;
}

.sk-button-with-dropdown-dropdown.small {
   top: 26px !important;
}

.sk-button-with-dropdown-dropdown.medium {
   top: 34px !important;
}

.sk-button-with-dropdown-dropdown.large {
   top: 42px !important;
}

/*
 * Layout for the native React CropZoomEditor (Page Image, #6833). The zoom control (slider + -/+
 * buttons) is built from the shared React components (InputField / Button) and inherits their styling,
 * so this file only holds the on-banner overlay layout + the drag caption/icon. No legacy sprite.
 */

.sk-pi-crop-container {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
}

.sk-pi-crop-drag {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

/* The pan surface takes keyboard focus (arrow keys pan the crop), so it needs a visible ring. Matches the
   shared Button's focus treatment, but drawn INSIDE: this element fills the banner and clips its own
   overflow, so an outward outline would be cut off. :focus-visible, not :focus, keeps a pointer drag --
   which focuses the surface on pointerdown -- from leaving a ring behind on the banner. */
.sk-pi-crop-drag:focus-visible {
   outline: 2px solid #0075c4;
   outline-offset: -2px;
}

.sk-pi-crop-drag-inner {
   display: table;
   width: 100%;
   height: 100%;
   font: 13px/15px Lato2, Helvetica, Arial, sans-serif;
   color: #fff;
   background: rgba(0, 0, 0, 0.4);
}

.sk-pi-crop-drag-inner > div {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

.sk-pi-crop-drag-overlay {
   position: absolute;
   inset: 0;
   cursor: move;
}

.sk-pi-crop-drag-icon {
   display: block;
   margin: 0 auto 8px;
}

.sk-pi-crop-caption {
   display: block;
   font: bold 18px Lato2, Helvetica, Arial, sans-serif;
   text-transform: uppercase;
}

.sk-pi-crop-subcaption {
   display: block;
}

/*--- Zoom control (shared InputField slider + Button -/+), laid out along the banner bottom ---------*/

.sk-pi-crop-zoom {
   position: absolute;
   left: 50%;
   bottom: 16px;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 2px;
   z-index: 2;
   padding: 2px 8px;
   background: #fff;
   border-radius: 20px;
   /* Soft elevation so the control reads clearly on any banner (dark or light). */
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), 0 4px 14px rgba(0, 0, 0, 0.18);
}

.sk-pi-crop-zoom .sk-pi-crop-slider {
   width: 150px;
   margin: 0; /* drop the shared InputField wrapper's 10px vertical margin */
}

.sk-pi-crop-zoom .sk-pi-crop-slider .sk-input-field-input-container {
   display: flex;
   align-items: center;
   margin: 0;
   min-height: 0;
   height: 18px; /* just enough for the 16px thumb; slims the pill */
}

/* Compact borderless -/+ glyph buttons inside the pill (beat the shared .sk-button sizing). */
.sk-pi-crop-zoom .sk-button.sk-pi-crop-zoom-btn {
   min-width: 0;
   min-height: 0;
   height: 20px;
   padding: 0 6px;
   font-size: 16px;
   line-height: 1;
}

video#page-image-video {
   position: absolute;
   top: 50%;
   left: 50%;
   width: auto;
   height: auto;
   min-width: 100%;
   min-height: 100%;
   -ms-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   object-fit: cover;
}

.sk-pi-image-video-wrapper {
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.pi-tooltips {
   max-width: none;
   white-space: nowrap;
}

.sk-pi-overlaytable {
   position: relative;
   z-index: 1;
   display: table;
   table-layout: fixed;
   width: 100%;
}

.pageImage {
   background-repeat: no-repeat;
}

.pageImage.sk-em-in-edit-mode .sk-pi-overlaytable,
.pageImage.sk-em-in-edit-mode .sk-pi-overlayinner2 {
   z-index: auto;
}

.sk-pi-overlaycell {
   display: table-cell;
   width: 50%;
   vertical-align: top;
}

.sk-pi-overlayinner {
   width: 200%;
   position: relative;
}

.sk-pi-overlayinner1 {
   height: 100%;
}

.sk-pi-overlayinner2 {
   z-index: 2;
   margin-left: -100%;
}

.sk-pi-hide-content {
   display: none;
}

.sk-pi-relative {
   position: relative;
}

.sk-pi-z-index {
   z-index: 99 !important;
}

.pageImage.sk-pi-display-placeholder {
   display: block !important;
   background: #ffffff !important;
}

.sk-pi-display-placeholder .sk-pi-empty-placeholder {
   display: block;
}

.pageImage.sk-pi-admin-view {
   display: block !important;
   height: auto !important;
   min-height: 0 !important;
   max-height: none !important;
   padding: 0 !important;
}

.pageImage.sk-pi-admin-view > div,
.pageImage div.sk-zero-footprint {
   display: none;
}

.pageImage.sk-pi-admin-view div.sk-zero-footprint {
   display: block;
}


/**
 * Empty placeholder styles
 */

.sk-pi-empty-placeholder {
   position: absolute;
   top: 50%;
   width: 100%;
   background: #ffffff;
   transform: translateY(-60%)
}

.sk-pi-container {
   width: 450px;
   max-width: 100%;
   margin: 0 auto;
   color: #aaaaaa;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   text-align: center;
}

.sk-pi-label-banner-text {
   display: block;
   width: 100%;
   font-size: 26px;
}

.sk-pi-banner-text {
   font-size: 14px;
}

.sk-pi-small-banner-text {
   font-size: 10px;
}

.sk-pi-banner-icon {
   display: inline-block;
   width: 69px;
   margin: 20px 0;
   height: 80px;
   background: url('/Shared/Images/thumbnails_preview.svg') center no-repeat;
}

/* Slideshow inline editor */
.sk-pi-slideshow-caption span {
   display: none;
   position: absolute;
   right: 0;
   top: 0;
   width: 20px;
   height: 20px;
   cursor: pointer;
   background-image: url('/Core/Page/Image/Images/se-btn-delete.svg');
}

.sk-pi-slideshow-caption:hover span {
   display: block;
}

.pageImage.ig-type-slideshow-animated .ig-caption {
   display: block;
   z-index: 21;
}

/* Fixes the additional space in the slideshow caused by the html5 doctype */
.pageImage .ig-type-slideshow-animated .ig-mask {
   font-size: 0;
}

@media only screen and (min-width : 1024px) {
   video#page-image-video {
      max-width: fill-available;
      max-width: -webkit-fill-available;
      max-width: -moz-available;
   }
}

@media only screen and (max-width : 768px) {
   video#page-image-video {
      width: 100%;
      object-fit: contain;
   }
}