/*      Request ID: a66fc0ce8db1c574b73824188aa914c7_1778550035 (06/05/2026 3:14pm) (NctBDoAgDETRGzFHMlgnKUkLxhaNt5eNu/cXHzqcqDOydRHwZs8ofxceE+fcrcmm6QZrNx+tRqRyjTIuIvI1xrL76GUxPg==)      */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.lw_clearfix:before,
.lw_clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}
.lw_clearfix:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.lw_clearfix {
    *zoom: 1;
}

:root {
  --fa-style-family: 'Font Awesome 7 Pro', 'Font Awesome 7 Sharp';
}
// Common UI
.lw_spinner {
    // changes to this element for LW3
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background: #fff url(/live/resource/image/spinner.gif) no-repeat center center;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;

    &:before {
      --fa: '\f1ce';
      content: var(--fa);
      animation-name: fa-spin;
      animation-direction: normal;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-name: fa-spin;
      animation-timing-function: steps(8);
      font-family: var(--fa-style-family);
      font-size: 2rem;
    }
}
.lw_clear {
    height: 0;
    clear: both;
}
.lw_paginate {
    position: relative;
    clear: left;
}
.lw_paginate_placeholder {
    position: relative;
    display: none;
}
.lw_hidden {
    display: none !important;
    visibility: hidden !important;
}
.lw_element {
    // LiveWhale Messages and Prompts
    .lw_prompt {
        a {
            font-weight: bold;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    }
    // LiveWhale interfaces
    h1 {
        display: inline-block;
        font-size: 3.2em;
        margin-top: 30px;
        font-weight: 200;
    }
    h1+.lw_cancel {
        position: relative;
        top: -0.2em;
    }
    .lw_cancel {
        color: #707070;
        margin-left: 5px;
        a {
            color: #d00;
        }
    }
}

/*  JP commented out some code for notices in common.less because it's duplicated (differently) in private.scss */ 
// // success, warning, and failure message bars that are fixed to the top of page
// .lw_msg {
//     padding: 10px;
// }
// .lw_msg_top .lw_msg_success,
// .lw_msg_top .lw_msg_warning,
// .lw_msg_top .lw_msg_failure {
//     width: 100%;
//     font-weight: bold;
//     margin: 0;
//     padding: 3px 8px;
//     left: 0;
// }
// 
// /* general styles for success, warning, and failure messages */
// .lw_element .lw_msg_success {
//   color: #3c763d;
//   border: #d6e9c6;
//   background-color: #dff0d8;
// }
// .lw_element .lw_msg_warning {
//   color: #8a6d3b;
//   border: #faebcc;
//   background-color: #fcf8e3;
// }
// .lw_element .lw_msg_failure {
//   color: #a94442;
//   border: #ebccd1;
//   background-color: #f2dede;
// }
.lw_image_preview {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 100px;
    width: 100px;
    text-align: center;
    padding: 0;
    border: none;
    border-radius: 5px;

    .lw_overlay_contents {
        background-color: #000;
        border-radius: 5px;
    }
    .lw_image_preview_image img {
        position: absolute;
        z-index: 1060;
        left: 0;
        transition: opacity .5s ease-in-out;

        &.loading {
            position: static;
            opacity: 0;
        }
        &.active {
            z-index: 1061;
            opacity: 1;
        }
    }
    &.lw_overlay {
        border: none;
    }
    .lw_overlay_header {
        height: 0;
        padding: 0;
        border: none;

        button {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 1075;
            background: #fff;
            width: 18px;
            height: 18px;
            line-height: 15px;
            padding: 0 0 3px;
            border: 0;
            text-align: center;
            border-radius: 9px;
            opacity: .6;
        }
    }
    .lw_overlay_footer {
        background-color: #fff;
        opacity: 0;

        > p {
            font-size: 13px;
            text-align: center;
            margin: 0;
            color: #333;
        }
    }
    .lw_overlay_contents:hover a.lw_scroll {
        opacity: 1;
    }
    a.lw_scroll {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 40px;
        height: 60px;
        z-index: 1099;
        background-color: rgba(0, 0, 0, 0.3);
        cursor: pointer;
        opacity: 0;
        transition: opacity .2s ease-in-out;

        &.lw_prev:after {
            left: -2px;
            border-right-color: rgba(255, 255, 255, 0.7);
        }
        &.lw_next {
            right: 0;
            &:after {
                left: 14px;
                border-left-color: rgba(255, 255, 255, 0.7);
            }
        }
        &:after {
            content: " ";
            position: absolute;
            right: 0;
            top: 50%;
            height: 0;
            width: 0;
            pointer-events: none;
            border: solid transparent;
            border-width: 12px;
            margin-top: -12px;
        }
    }
    .lw_overlay_body {
        padding: 0;
        position: relative;
    }
    .lw_spinner {
        opacity: 0.5;
        background-color: #000;
        z-index: 1065;
    }
}
.lw_widget_forms {
    fieldset legend {
        display: none;
    }
    .lw_spinner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.35);
    }
    .lw_uploader {
        position: relative;

        > .lw_uploader_progress {
            display: none;
        }
        ul {
            padding: 0;
        list-style-type: none;
        }
    }
    .lw_uploader_progress {
        background-color: #FAFAFA;
        border: 1px solid #ddd;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
    }
    .lw_uploader_filename {
        padding: 3px 0 2px 3px;
        color: #666;
        white-space: nowrap;
    }
    .lw_uploader_complete {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        overflow: hidden;

        &.lw_complete .lw_uploader_complete_filename {
            color: #383;
            background-color: #efe;
        }
        &.lw_failed .lw_uploader_complete_filename {
            color: #c22;
            background-color: #fee;
        }
    }
    .lw_uploader_complete_filename {
        padding: 3px 0 2px 3px;
        color: #469;
        background-color: #d0def1;
        white-space: nowrap;
    }
    .lw_uploader_message {
        font-weight: bold;
        em {
            font-weight: normal;
            font-style: normal;
        }
    }
}
// Image alignment
picture.lw_image {
    display: inline-block;
    line-height: 0;
}
img,
picture,
.lw_image_caption {
    &.lw_align_left {
        float: left;
        margin-right: 0.5em;
    }
    &.lw_align_right {
        float: right;
        margin-left: 0.5em;
    }
    &.lw_align_center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    &.lw_block {
        display: block;
        float: none;
    }
    &.lw_column_width_full {
        max-width: 100%;
        height: auto;
    }
    &.lw_column_width_half {
        max-width: 50%;
        height: auto;
    }
    > img {
        max-width: 100%;
        height: auto;
    }
}
picture.lw_align_center {
    text-align: center; // so img inside gets centered

    img {
      display: inline-block; // centering does not work if display block
    }
}
// this allows us to set the caption width and display below image without inserting a break.
// we should consider using a div tag rather than a span
.lw_image_caption {
    display: block;
}
.lw_image_caption.lw_align_left {
    clear: left;
}
.lw_image_caption.lw_align_right {
    clear: right;
}
.lw_image_credit {
    float: right;
    font-style: italic;
    color: #999;
}

// Push page down for page editor or LWCO toolbar
#lw_page {
    width: 100%;
    margin-top: 40px;
    -webkit-transition: margin-top .25s ease-out;
    -moz-transition: margin-top .25s ease-out;
    -o-transition: margin-top .25s ease-out;
    transition: margin-top .25s ease-out;
}

// remove close button on session overlays; JS will do this moving forward, but fix isn't patchable
// because it involves an LWUI update.
.session_monitor .lw_overlay_close {
    display: none;
}

// show certain text for screen readers only
.lw_sr_only,
.lw_sr_only_focusable {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    background: #fff;
    color: #000;
}
.lw_sr_only_focusable:active,
.lw_sr_only_focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
}

// show skip link on focus for sr and keyboard nav
.lw_skip_link {
    position: absolute;
    display: block;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
    &:focus {
        position: static;
        width: auto;
        height: auto;
        overflow: auto;
        z-index: 999;
        padding: 5px;
        color: #0000ff;
        background-color: #ffff99;
        border: 1px solid #999933;
        text-align: center;
    }
    &.absolute:focus {
        position: absolute;
        z-index: 9999;
    }
    .star + &.absolute:focus { // align with star on manager view
        left: 37px;
        top: 11px;
    }
}

// responsive iframe css used by embedded google maps
.lw_responsive_iframe_wrapper {
  position: relative;
  overflow: hidden;
  padding-top: 100%; /* responsive iframes are square by default */

  &.four_three {
    padding-top: 75%;
  }
  &.three_four {
    padding-top: 133%;
  }
  &.sixteen_nine {
    padding-top: 56.25%;
  }
  &.nine_sixteen {
    padding-top: 178%;
  }

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

// Implement readonly input types that don't normally support this property
input[readonly] {
	pointer-events: none;
	opacity:50%;
}