/*
global vars
*/
/**************/
:root {
    /*mobile vh/vw isn't as fluid as the desktop version. this is a substitute, treat this as a polyfill. *************/
    --vw-1fr: 0px;
    --vh-1fr: 0px;
    --vw: calc((var(--vw-1fr, 1vh) * 100));
    --vh: calc((var(--vh-1fr, 1vh) * 100));
    /*--animation-speed: root value to base css/js animation on *************/
    --animation-speed: .5s;
    /*--defualt lighten / darken % *************/
    --lighten-percentage: 15%;
    --darken-precentage: 15%;
    /*--color contrast *************/
    /*--contrast-threshold: 60%;*/
}



/*
preferences
*/
/**************/
@media (prefers-reduced-motion) {
    :root {
        --animation-speed: 0s;
    }
}

@media (prefers-contrast) {
}

@media (prefers-color-scheme: dark) {

}

@media (prefers-reduced-transparency) {
}

@media (prefers-reduced-data) {
}






/*
colors
*/
/**************/
:root {
    /* neutral colors *************/
    --color-neutral-25: 0,0%,25%; /*tundora*/
    --color-neutral-40: 0,0%,40%; /*gray 40*/
    --color-neutral-50: 0,0%,50%; /*gray*/
    --color-neutral-70: 0,0%,70%; /*nobel*/
    --color-neutral-85: 0,0%,85%; /*alto*/
    --color-neutral-94: 0,0%,94%; /*gallery*/
    /* carousel *************/
    --carousel-controls-arrow-boundingbox-color-hsla: hsla(0,0%,100%,1);
    --carousel-controls-arrow-bg-focus-hsla: hsla(0,0%,50%,1);
    --carousel-controls-arrow-bg-hover-hsla: hsla(0,100%,50%,1);
    --carousel-controls-arrow-bg-hsla: hsla(0,0%,0%,0);
    --carousel-controls-arrow-outline-hover-hsla: hsla(0,100%,50%,1);
    --carousel-controls-arrow-outline-hsla: hsla(0,0%,0%,1);
    --carousel-controls-arrow-color-hover-hsla: hsla(0,100%,50%,1);
    --carousel-controls-arrow-color-hsla: hsla(0,0%,100%,1);
    --carousel-controls-outline-hover-hsla: hsla(0,100%,50%,1);
    --carousel-controls-outline-hsla: hsla(0,0%,100%,1);
    --carousel-controls-color-hover-hsla: hsla(0,100%,50%,1);
    --carousel-controls-color-hsla: hsla(0,0%,100%,1);
}


.gray-bg {
    background: rgb(230, 230, 230);
}






.nav-pills .nav-link.active:hover {
    background-color: hsl(var(--color-primary-dark));
}

svg.svg-inline--fa.fa-asterisk.validationSummary {
    width: .5em !important;
}


















/*
utilities
*/
/**************/
.InvisibleLink {
    visibility: hidden;
    display: none;
}


.errorContainer {
    width: 100%;
    font-size: .8rem;
    color: #721c24;
    background-color: #f8d7da;
    padding: .25rem;
    border-radius: .25rem;
    margin-top: .25rem;
    margin-bottom: .25rem;
}























/* ----------------------------------------- */
/*progress indicator: is the busy or wait screen between data/page refresh*/
/* ----------------------------------------- */
.ProgressIndicatorInline {
    position: relative;
}

.progress-indicator {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 9999;
}

.progress-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
}

    .progress-backdrop.fade {
        opacity: 0;
    }

        .progress-backdrop.fade.show {
            opacity: 0.5;
        }

        .progress-backdrop.fade.show {
            animation: fade-in-progress-backdrop .25s ease-in-out 1 normal;
        }

@keyframes fade-in-progress-backdrop {
    from {
        opacity: 0
    }

    to {
        opacity: .5
    }
}


.progress-image {
    /*color: #fff;*/
    color: var(--progress-bg-hsl);
    -webkit-text-stroke-color: hsl(var(--progress-border-color-hsl));
    -moz-text-stroke-color: hsl(var(--progress-border-color-hsl));
    & svg {
        stroke: hsl(var(--progress-border-color-hsl));
    }
}

    .progress-image.fade {
        transition: opacity 2.5s linear;
        position: fixed;
        top: 25%;
        left: 50%;
    }

        .progress-image.fade.show {
            animation: fade-in-progress-image .75s ease-in-out 1 normal;
        }

@keyframes fade-in-progress-image {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.progress-image.slide-left-middle-right {
    animation: slide-left-middle-right 4s ease-in-out infinite normal;
    position: fixed;
    top: 25%;
    width: 100%;
}

@keyframes slide-left-middle-right {
    0% {
        transform: translate3d(-10%, 0px, 0px);
    }

    15% {
        transform: translate3d(50%, 0px, 0px);
    }

    85% {
        transform: translate3d(50%, 0px, 0px);
    }

    100% {
        transform: translate3d(110%, 0px, 0px);
    }
}


.progress-image.slide-right-middle-left {
    animation: slide-right-middle-left 4s ease-in-out infinite normal;
    position: fixed;
    top: 25%;
    width: 100%;
}

@keyframes slide-right-middle-left {
    0% {
        transform: translate3d(110%, 0px, 0px);
    }

    15% {
        transform: translate3d(50%, 0px, 0px);
    }

    85% {
        transform: translate3d(50%, 0px, 0px);
    }

    100% {
        transform: translate3d(-10%, 0px, 0px);
    }
}


.progress-image.slide-top-bottom {
    animation: slide-top-bottom 4s ease-in-out infinite normal;
    position: fixed;
    top: -10%;
    left: 50%;
    width: 1em;
}

@keyframes slide-top-bottom {
    0% {
        top: -10%;
    }

    100% {
        top: 110%;
    }
}

.fileDisplayText {
    /*color: #232323;
  font-size: 9pt;
  font-weight: bold;
  text-align: left;
  padding: 5px;*/
}

    .fileDisplayText a {
        /*background-image: url('/Common/Icons/file_16x16.gif');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 12px;
    color: #F69000;*/
    }

        .fileDisplayText a span {
            /*color: #F69000;*/
        }

.fileDisplayIFrame {
    /*width: 100%;
  height: 100%;
  z-index: 0;
  border-style: hidden;
  min-height: 400px;*/
}

.fileDownloadIFrame {
    display: none;
    width: 0px;
    height: 0px;
}

.uploadProgressContainer {
    /*width: 300px;*/
    height: 20px;
    background-color: #ffffff;
    border: solid 1px #666666;
}

.uploadProgressBar {
    position: relative;
    left: 0px;
    width: 0px;
    top: 0px;
    background-color: #455769;
    height: 100%;
    width: 100%;
}

.hiddenProgress {
    display: none;
    visibility: hidden;
}

.RESULTSMESSAGE {
    color: Green;
    font-weight: bold;
    font-size: 13px;
}

.SECTIONTITLELINE {
    display: block;
    text-align: justify;
    border-bottom: solid 1pt #776655;
    margin-bottom: 5px;
    margin-top: 13px;
    background-color: #d8550f;
}

.SECTIONTITLE {
    page-break-after: always;
    page-break-before: always;
    color: #212121;
    font-weight: bold;
    font-size: 14px;
    padding-left: 7px;
    padding-top: 11px;
}

.downloadItemText {
    margin: 0px 0px 5px 0px;
    text-align: center;
    font-size: 12px;
}

.downloadFileMessage {
    text-align: center;
    font-weight: normal;
    font-style: italic;
    color: Red;
}

.offerDownloadIntroText {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    width: 100%;
}

.offerDownloadLinkTableContainer {
    text-align: center;
}

.offerDownloadTimeDescription {
    font-size: 10px;
    white-space: normal;
    color: Red;
    text-align: center;
    color: #656565;
}

.offerDownloadTimeTableContainer {
    color: Red;
    margin: 5px 0px 10px;
    text-align: center;
    font-size: 10px;
    color: #656565;
}

.offerDownloadTimeTableBandwidth {
    text-align: left;
}

.offerDownloadTimeTableBandwidthValue {
    text-align: right;
}

#AlertCount {
    background: #5e9a0a;
    font-weight: 400;
}

.hidden {
    display: none;
}

.disableWindow, .disableScreen {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    background-color: #808080;
    opacity: 0.5;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: none;
    z-index: 99999;
}

/*
    File Download CSS
*/

/*.fileDownload_fileDownloadText {
  padding: 10px;
  width: unset;
  text-align: left;
}

.fileDownload_container_downloadStatus {
  margin-top: 20px;
  padding-bottom: 10px;
}

.fileDownload_container_downloadStatus_right {
  padding-right: 10px;
  float: right;
}*/




/* ----------------------------------------- */
/* FAQ STYLES */
/* ----------------------------------------- */
.SECTION_TITLE, .SECTION_TITLE a {
    font-size: 1.25rem;
    color: hsl(var(--color-primary));
    font-weight: bold;
    text-decoration: underline;
}

.SectionLink {
    cursor: pointer;
}

.BACK_TO_TOP {
    font-size: .85rem;
    color: hsl(var(--color-primary-dark)) !important;
    cursor: pointer;
}

p.MsoNormal, li.MsoNormal, div.MsoNormal, .clientPolicyNotice, .clientPolicyNotice font {
    font-size: 1rem !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 4px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 4px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 4px;
}

.ui-widget-content {
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #ffffff;
    border: 1px solid #aaaaaa;
    color: #222222;
}

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}

.ui-slider-horizontal {
    height: 0.8em;
}

.ui-slider {
    position: relative;
    text-align: left;
    width: auto;
}

.ui-slider-horizontal .ui-slider-handle {
    margin-left: -0.6em;
    top: -0.3em;
}

.ui-slider .ui-slider-handle {
    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background-color: #e6e6e6;
    border: 1px solid #999;
    color: #555555;
    font-weight: normal;
}

/**
 * @author zhixin wen <wenzhixin2010@gmail.com>
 */

.ms-parent {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 100%;
}

.ms-choice {
    display: block;
    width: 100%;
    height: 26px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #aaa;
    text-align: left;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
}

    .ms-choice.disabled {
        background-color: #f4f4f4;
        background-image: none;
        border: 1px solid #ddd;
        cursor: default;
    }

    .ms-choice > span {
        position: absolute;
        top: 0;
        left: 0;
        right: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        padding-left: 8px;
    }

        .ms-choice > span.placeholder {
            color: #999;
        }

    .ms-choice > div {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 25px;
        background: url('/Common/Images/multiple-select.png') left top no-repeat;
    }

        .ms-choice > div.open {
            background: url('/Common/Images/multiple-select.png') right top no-repeat;
        }

.ms-drop {
    width: 100%;
    overflow: hidden;
    display: none;
    margin-top: -1px;
    padding: 0;
    position: absolute;
    z-index: 1000;
    background: #fff;
    color: #000;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 0.65rem;
}

    .ms-drop.bottom {
        top: 100%;
        -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
        -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
        box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    }

    .ms-drop.top {
        bottom: 100%;
        -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
        -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
        box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
    }

.ms-search {
    display: inline-block;
    margin: 0;
    min-height: 26px;
    padding: 4px;
    position: relative;
    white-space: nowrap;
    width: 100%;
    z-index: 10000;
}

.ms-drop ul {
    overflow: auto;
    margin: 0;
    padding: 5px 8px;
}

    .ms-drop ul > li {
        list-style: none;
        display: list-item;
        background-image: none;
        position: static;
    }

        .ms-drop ul > li .disabled {
            opacity: .35;
            filter: Alpha(Opacity=35);
        }

        .ms-drop ul > li.multiple {
            display: block;
            float: left;
        }

        .ms-drop ul > li.group {
            clear: both;
        }

        .ms-drop ul > li.multiple label {
            width: 100%;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ms-drop ul > li label {
            font-weight: normal;
            display: block;
            white-space: nowrap;
        }

            .ms-drop ul > li label.optgroup {
                font-weight: bold;
            }

.ms-drop input[type="checkbox"] {
    vertical-align: middle;
}

.ms-drop .ms-no-results {
    display: none;
}

ul.ui-autocomplete {
    position: absolute;
    font-size: 12px;
    width: auto;
    padding: 5px;
    list-style-type: none;
    z-index: 9999;
    max-height: 400px;
    overflow: hidden;
}

    ul.ui-autocomplete li.ui-menu-item a.ui-corner-all:not(:hover) {
        color: Black;
    }

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid #003eff;
    background: #007fff;
    font-weight: normal;
    color: #ffffff;
}

.ui-helper-hidden-accessible {
    display: none;
}

.WordSection1 > .MsoNormal > a.btn-primary {
    margin-top: 20px;
}

.h-80 {
    height: 80% !important;
}

:where(.svg-inline--fa) {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em
}

.justify-content-right {
    justify-content: right !important;
}

#PopupWindowContainer {
    z-index: 2147; /* we should probably be more careful about applying maximum values everywhere. in this case, we needed the gear icon to show above the popup. using the maximum prevents this. */
}

#DownloadContainer, .daterangepicker.ltr, .MagicZoomBigImageCont {
    z-index: 2147483634 !important;
}

/* Login Page */ 
body:has(.formAreaLogin) {
    .formAreaLogin {
        padding: 15px 0;
    }
}


/* Customizer */ 
body:has(.dragAndDropUploadContainer) {
    #PopupWindow {
        top: 50px !important;
        margin: .5rem auto;
        max-height: calc(100vh - 1rem);
        height: 100vh;

        > .modal-content {
            height: 100%;  

            > .modal-footer {
                flex: 0 1 auto;
            }
        }
    }
}

/* Checkout */ 
body:has(#CheckoutWindowBaseContentArea, #CheckoutWindowContent) {
    #CheckoutWindowContent {
        .cwSummaryItemOne {
            overflow-wrap: break-word;
        }
    }
}





/* ✏️ */
@layer customizer {
    .customizerBlockMessage {
        text-align: center; 
        /*overflow: auto;*/   
    }
    .customizerBlockMessage:not(:has(#HTML5PreviewFrame)) {
        --pointer-events-state: var(--disable-multimedia-links, auto);
        pointer-events: var(--pointer-events-state);
    }
}