:root {
    font-size: 75%; /* this resets the font scale to 1 rem = 12 px */

    /* let's define all of our custom colors! now you can just use "color: var(--color-blue-med);" to call that variable's stored hex code */
    --color-blue-med:    #00539f;
    --color-blue-dark:   #003c71;
    --color-blue-light:  #00a0df;
    --color-gold:        #ffd200;
    --color-gold-pale:   #fff688;
    --color-gray-light:  #e5e9ed;
    --color-gray-med:    #bdbdbd;
}

button {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
}

#ud__search-open {
    position: absolute;
    right: 0;
    top: 0;
    height: 3.6667rem;
    padding: 0.875rem;
    box-sizing: border-box;
    width: 6rem;
}

.ud__search-open #ud__search-open {
    /* padding: 8px; */
}

.ud__search-open #search-box {
    display: block;
    visibility: visible;
}

#ud__search-open svg {
    stroke-width: 4px;
    stroke: var(--color-blue-med);
    overflow: visible;
    width: auto;
    height: 100%;
    margin: 0 auto;
    display: block;
}

#ud__search-open .ud__search-up,
[data-viewport="desktop"].ud__search-open #ud__search-open svg:not(.ud__search-up) {
    display: none;
}

[data-viewport="desktop"].ud__search-open #ud__search-open .ud__search-up {
    display: block;
}

[data-viewport="mobile"] #ud__search-open:hover {
    background: var(--color-blue-light);
}
/*
[data-viewport="mobile"] #ud__menu-button::before {
    content: '';
    position: fixed;
    background: var(--color-blue-dark);
    width: 12px;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0.001;
    z-index: 1;
    display: none;
    transition: 0.3s ease opacity, 0s 0.75s ease width;
}

[data-viewport="mobile"] #ud__menu-button span {
    background: #fff;
    width: 100%;
    height: 2px;
    margin: 3px 0;
    border-radius: 2px;
    z-index: 1;
}
*/

[data-viewport="mobile"] #ud__search-open:after,
[data-viewport="mobile"] #ud__menu-button:after {
    content: '.';
    height: 100vh;
    background: rgba(20,20,60,0.65);
    width: 100vw;
    position: absolute;
    top: 65px;
    top: 0;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease all;
    left: 0;
}

[data-viewport="mobile"].ud__sidemenu-open #ud__menu-button:after {
    opacity: 1;
    z-index: 1;
    display: block;
    visibility: visible;
}

[data-viewport="mobile"] #ud__search-open {
    height: 100%;
    /*padding: 1.5rem 0;
    right: -100vw;
    width: 6rem;
    */
    flex: 0 0 6rem;
    position: relative;
}

[data-viewport="mobile"].ud__search-open #ud__search-open {
    z-index: 999;
    background: var(--color-blue-light);
}

[data-viewport="mobile"] #ud__search-open svg {
    stroke: #fff;
    stroke-width: 5px;
    max-height: 2.375rem;
}

[data-viewport='mobile'] #UDLibraryHeader .ud__subhead-wrap {
    position: relative;
}

.ud__sidemenu-open[data-viewport="mobile"] {
    overflow: hidden;
}

/* agnostic menu fix - RPN 20210424 */
[data-viewport="mobile"] #UDLibraryHeader .ud__menu {
    margin-top: -65px;
}

[data-viewport="mobile"].ud__sidemenu-open #ud__menu-button {
    /* left: 275px; */
    /* left: calc(100vw - 66px); */
    z-index: 9999999;
    /* background: #fff; */
}

[data-viewport="mobile"].ud__sidemenu-open #ud__menu-button::before {
    width: 100vw;
    opacity: 0.7;
    transition: 0.2s ease opacity, 0s ease width;
}

.ud__search-open[data-viewport="mobile"] #live-chat-widget,
.ud__sidemenu-open[data-viewport="mobile"] #live-chat-widget,
.ud__menu-body-open[data-viewport="mobile"] #live-chat-widget {
    right: -50vw;
}

[data-viewport="mobile"].ud__search-open {
    overflow: hidden;
}

[data-viewport="mobile"] #ud-search-form {
    padding: 2rem 1.5rem;
    border-radius: 2rem;
    max-width: 34rem;
    position: relative;
}

[data-viewport=mobile] #search-drop-wrap {
    display: block;
    font-size: 1.25rem;
    line-height: 4rem;
}

input#search-button-hide:after {content: 'Search';}

span.advanced-title:after {content: '?';}

[data-viewport=mobile] #search-choices #search-prefix {
    display: none;
    margin: 0 0;
}

[data-viewport=mobile] #search-selector {
    width: 100%;
    font-size: 1.25rem;
    height: auto;
}

[data-viewport="mobile"].ud__menu-body-open #ud__menu-button:after,
[data-viewport="mobile"].ud__search-open #ud__search-open:after {
    opacity: 1;
    visibility: visible;
    z-index: 0;
}

[data-viewport="mobile"].ud__search-open #ud__search-open:after {
    right: 0;
    left: initial;
    z-index: -1;
}

[data-viewport="mobile"].ud__search-open #search-box {
    right: 0;
    visibility: visible;
}





/* ====== */

#search-box {
    display: none;
    visibility: hidden;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border-top: 0;
    padding: 44px 44px;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    border-bottom: 0;
  	right: -200vw;
}

[data-viewport="mobile"] #search-box {
    transition: 0.3s ease all;
}

[data-viewport="mobile"] #search-box {
    display: flex;
    visibility: hidden; /* lets keyboard focus bypass the unopened search box */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    margin: 0 auto;
    padding: 1rem;
    z-index: 999;
    width: 90vw;
    max-width: 34rem;
    height: auto;
    padding: 0;
    border-radius: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

#ud-search-form,
#ud-search-form input,
#ud-search-form select {
    font-family: 'greycliff_semibold';
    letter-spacing: -.25px;
}

#ud-search-form {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

#ud-search-field {
    display: flex;
    height: auto;
    height: 55px;
    background: #e8e8e8;
    background: var(--color-gray-light);
    border-radius: 55px;
    box-shadow: none;
}

#ud-search-field #search-input {
    flex-grow: 1;
    margin-right: 0;
    position: relative;
    height: auto;
    border-bottom: none;
    border-radius: 0;
    background: transparent;
    line-height: 4.5rem;
}

#query {
    height: 100%;
    width: 100%;
    border: none;
    font-size: 20px;
    padding: 0 26px;
    background: transparent;
    color: var(--color-blue-dark);
    letter-spacing: -.25px;
    border-radius: 55px 0 0 55px;
    box-shadow: none;
}

#search-click {
    flex: 0 0 66px;
    height: 100%;
    padding: 14px 0;
            box-sizing: border-box;
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    background: transparent;
    border-radius: 0 55px 55px 0;
}

#search-click:hover {
    background: var(--color-blue-light);
}

#search-click svg {
    stroke-width: 4px;
    stroke: var(--color-blue-med);
    overflow: visible;
    width: 33px;
    height: 100%;
    padding-right: 4px;
    margin: 0 auto;
    display: block;
}

#search-click:hover svg {
    stroke: #fff;
}

input#search-button-hide,
input#search-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: 0;
    color: transparent;
    opacity: 0;
    cursor: pointer;
    box-shadow: none;
    letter-spacing: 0.5px;
}

#search-choices {
    position: relative;
    z-index: 0;
    padding: 22px 22px 0 26px;
    line-height: 30px;
    font-size: 16px;
    color: var(--color-blue-med);
}

#search-choices #search-prefix {
    display: inline-block;
    margin-right: 3px;
}

#search-drop-wrap {
    background: #e8e8e8;
    background: var(--color-gray-light);
    border-radius: 55px;
    display: inline-block;
    position: relative;
    z-index: 0;
}

#search-selector {
    position: relative;
    z-index: 2;
    background: transparent;
    cursor: pointer;
    border: none;
    padding: 0 30px;
    font-weight: 500;
    font-family: 'greycliff_semibold';
    letter-spacing: -.25px;
    font-size: inherit;
    line-height: inherit;
    color: var(--color-blue-med);
    appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: auto;
    border-radius: 55px;
    box-shadow: none;
}

#search-drop-arrow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 33px;
    z-index: 1;
}

#search-drop-arrow svg {
    stroke: var(--color-blue-dark)!important;
    stroke-width: 4px;
    fill: var(--color-blue-med);
    stroke: none;
    height: 100%;
    width: 33px;
    box-sizing: border-box;
    padding: 6px 6px 5px;
}

#search-drop-arrow polyline {
    fill: var(--color-blue-med);
    stroke: none;
}

.search-box-adv-search {
    font-size: 15px;
    line-height: 18px;
    float: right;
}

.search-box-adv-search a {
    color: var(--color-blue-med);
    text-decoration: none;
    text-align: center;
    display: block;
    position: relative;
}

span.offsite-arrow {
    position: absolute;
    margin-left: -18px;
    height: 20px;
}

#advanced-span {
    display: block;
    font-size: 13px;
    /* color: var(--color-blue-light); */
}

#advanced-span:before {
    content: 'Go to ';
    content: 'Try ';
}

span.offsite-arrow svg {
    height: 100%;
    width: auto;
    padding: 2px;
    box-sizing: border-box;
}

span.offsite-arrow svg polyline {
    fill: var(--color-blue-med);
    stroke: none;
}




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

[data-viewport="mobile"] #search-box {
    right: -200vw;
}

[data-viewport="mobile"] #ud-search-field {
    position: relative;
}

[data-viewport="mobile"] #query {
    font-size: 1.5rem;
    padding: 0 1.5rem;
    border-radius: 55px;
}

[data-viewport="mobile"] #search-click {
    flex: 0 0 55px;
    padding: 10px 0;
    width: 100%;
    background: var(--color-blue-med);
    height: 100%;
    flex-basis: 100%;
    border-radius: 6rem;
    margin-top: 1.5rem;
    margin: 1.5rem auto 2rem;
}

[data-viewport=mobile] input#search-button-hide {
    opacity: 1;
    color: #fff;
}

[data-viewport="mobile"] #search-choices {
    padding: 14px 6px 0 6px;
    padding: 1.5rem 0 0;
    font-size: 14px;
    line-height: 36px;
}

[data-viewport="mobile"] .search-box-adv-search {
    float: none;
}

[data-viewport="mobile"] #advanced-span {
    font-size: inherit;
    display: initial;
    text-decoration: underline;
}

[data-viewport="mobile"] span.offsite-arrow {
    top: -2px;
    display: none;
}

}




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

[data-viewport="mobile"] #search-choices {
    padding: 1.5rem 0 0;
}

[data-viewport="mobile"] #search-choices #search-prefix {
    display: none;
}

[data-viewport="mobile"] #search-selector {
    padding-right: 1.5rem;
    padding-left: 2rem;
}

[data-viewport="mobile"] #search-drop-arrow svg {
    padding: 6px 9px 5px;
}

}



section.vwidth {
    display: none;
    margin: 0 auto;
    font-size: 6vw;
    text-align: center;
    line-height: 20vw;
    background: coral;
    font-family: 'greycliff_semibold';
    color: #fff;
}