.header-icon-display-none {
    display: none !important;
}

.hide {
    display: none !important;
}

.visible-hidden {
    visibility:hidden;
}

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 0px solid transparent;
    border-radius: .25rem;
}

.error-title {
    font-weight: bold;
    font-size: 18px;
    color: #005685;
    padding-bottom: 5px;
    border-bottom: 2px solid #005685;
}

.error-message {
    color: #005685;
}

.error-details {
    text-align: center;
    word-break: break-word;
    color: transparent;
}

.choose {
    border-left: 4px solid #368EC4;
    background-color: #f1f1f1;
    padding-left: 10px;
}

.progress {
    cursor: progress !important;
}

.lg-width {
    width: 19.5rem !important;
}

.loader {
    border: 1px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid #3498db;
    border-bottom: 2px solid #3498db;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#loading-icon {
    align-items: center;
    background-color: transparent;
    color: #3d3d3d;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    z-index: 1;
}

#loading-icon .loading-content-wrapper {
    left: 0;
    right: 0;
    text-align: center;
    cursor: default;
}

#loading-icon .loading-content-wrapper p {
    font-family: "3DSRegular", Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}

#loading-icon .loading-content-wrapper .loading-icons {
    display: inline-block;
    vertical-align: middle;
    height: 14px;
    padding: 5px;
}

#loading-icon .loading-content-wrapper .loading-icons > div {
    float: left;
    background: #005686;
    height: 100%;
    width: 3px;
    margin-right: 2px;
    display: inline-block;
    animation: stretchdelay 1s infinite ease-in-out;
}

#loading-icon .loading-content-wrapper .loading-icons .bar2 {
    animation-delay: -0.9s;
}

#loading-icon .loading-content-wrapper .loading-icons .bar3 {
    animation-delay: -0.8s;
}

#loading-icon .loading-content-wrapper .loading-icons .bar4 {
    animation-delay: -0.7s;
}

@keyframes stretchdelay {
    15% {
        transform: scaleY(1.5);
    }
}

@media screen and (max-width: 639px) {

    #loading-icon .loading-content-wrapper {
        top: 24% !important;
    }
}


/*Desktop*/
#clear-img-1 {
    display: none;
    position: relative;
    left: -3.5rem;
    font-size: small;
    color: #808080;
}

/* VRN8: Added CSS for search suggest */
#suggest-clear-img-1 {
    display: none;
    position: absolute;
    right:6rem;
    font-size: small;
    color: #808080;
}

.search-box-container {
    width: 10rem;
    height: 1.5rem;
}

.search1-box-container {
    width: 100%;
    height: 32px;
}

.search-result-list {
    border-radius: 3px;
    position: absolute;
    z-index: 99999;
    background: #F7F8F7;
    width: 10rem;
}

.mobile-search-result-list {
    margin-left: 5px;
    width: calc(100% - 42px);
}

.suggest-search-ul {
    margin: 0;
    padding: 0px;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    box-sizing: border-box;
}

#searchEx-search-result {
    width: 20rem;
}

.suggest-search-data {
    cursor: pointer;
    font-size: 12px;
    padding: 4px 14px;
    border-bottom: 1px solid #e2e4e3;
    margin-top: 0px;
    box-sizing: border-box;
}

.suggest-search-data:hover {
    background-color: #f1f1f1;
}

@media screen and (max-width: 959px) {
    #suggest-clear-img-1 {
        right: 7rem;
    }
    #suggest-search-ul,.search-box-container{
        display: none;
    }
}
@media screen and (max-width: 365px) {
    #suggest-clear-img-1 {
        right: 5.5rem;
    }
}
@media screen and (min-width: 366px) and (max-width: 380px) {
    #suggest-clear-img-1 {
        right: 6.5rem;
    }
}
@media screen and (min-width: 381px) and (max-width: 400px) {
    #suggest-clear-img-1 {
        right: 7.5rem;
    }
}
@media screen and (min-width: 401px) and (max-width: 600px) {
    #suggest-clear-img-1 {
        right: 8rem;
    }
}

/*  ARN6: End of Added CSS for search suggest. 
    This css for Bug - Help Viewer - Page Scroll - See Also section not displayed correctly(>2021 version). It blocks the content.
*/
td samp {
    overflow-wrap: anywhere;
}
/*  ARN6: image overlap on Refining Ramps page.
    FW: 2023x GA user assistance final build (build of 13 October 2022)
*/
td p+br+img.image:not([src*="Icons"]) {
    margin-top: 0;
}

/*
    BCN23 2023 July
    Below are css for the green alert box that would pop up when
    copy link button clicked, indicating the link has been successfully
    generated and copied to user clipboard
*/
/*pop up container*/
.popup {
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*popup content (text and layout)*/
.popup .popuptext {
    visibility: hidden;
    width: 300px;
    background-color: #e6f3e4;
    color: #2f333c;
    text-align: center;
    padding: 8px 0;
    position: absolute;
    z-index: 9999;
    bottom: 80%;
    left: 40%;
    margin-left: -80px;
    font-size: 14px;
    border-left-style: solid;
    border-left-color: #3dc53d;
    border-left-width: thick;
}

/* check mark icon on the left*/
.correct {
    color: #3dc53d;
    position: absolute;
    left: 10px;
    /*padding: 10px;*/
    font-size: 24px;
}

/* corss icon on the right*/
.cross {
    bottom: 3px;
    color: gray;
    position: absolute;
    right: -2px;
    line-height: 0;
}

/* the cross icon turns gray when hovered*/
.wux-ui-3ds-wrong:hover {
    color: darkslategray;
}

/* enables toggling the visibility of the pop up + fade in animation*/
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

 /*Copy url success popup fadein animation*/ 
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*SSI54: This will fix the issue of extra long (gray) div for firefox(only) browser, caused due to DSDocUI_XML34.css. 
Overwritting the height property of this class*/
td.Intro1Only, div.Intro1Only {
    height: unset;
}