/* Minification failed. Returning unminified contents.
(240,156): run-time error CSS1019: Unexpected token, found '{'
(240,162): run-time error CSS1030: Expected identifier, found ' '
(240,163): run-time error CSS1031: Expected selector, found 'rect('
(240,163): run-time error CSS1025: Expected comma or open brace, found 'rect('
(240,199): run-time error CSS1030: Expected identifier, found ' '
(240,200): run-time error CSS1031: Expected selector, found 'inset('
(240,200): run-time error CSS1025: Expected comma or open brace, found 'inset('
(240,219): run-time error CSS1030: Expected identifier, found ' '
(240,220): run-time error CSS1031: Expected selector, found '1px'
(240,220): run-time error CSS1025: Expected comma or open brace, found '1px'
(240,231): run-time error CSS1030: Expected identifier, found ' '
(240,232): run-time error CSS1031: Expected selector, found '1px'
(240,232): run-time error CSS1025: Expected comma or open brace, found '1px'
(240,244): run-time error CSS1030: Expected identifier, found ' '
(240,245): run-time error CSS1031: Expected selector, found '-'
(240,245): run-time error CSS1025: Expected comma or open brace, found '-'
(240,260): run-time error CSS1030: Expected identifier, found ' '
(240,267): run-time error CSS1031: Expected selector, found ';'
(240,267): run-time error CSS1025: Expected comma or open brace, found ';'
(240,278): run-time error CSS1030: Expected identifier, found ' '
(240,279): run-time error CSS1031: Expected selector, found '0'
(240,279): run-time error CSS1025: Expected comma or open brace, found '0'
(240,291): run-time error CSS1030: Expected identifier, found ' '
(240,300): run-time error CSS1031: Expected selector, found ';'
(240,300): run-time error CSS1025: Expected comma or open brace, found ';'
(240,301): run-time error CSS1019: Unexpected token, found '}'
 */
/* Normalize + Reset */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
audio, canvas, video {display: inline-block; *display: inline; *zoom: 1;}
audio:not([controls]) {display:none; height: 0;}
[hidden] {display: none;}

::-moz-selection {background:#b3d4fc; text-shadow:none;}
::selection {background: #b3d4fc; text-shadow: none;}

.chromeframe {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}
html {
    background: #fff;
    color: #000;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
html, button, input, select, textarea {font-family: sans-serif; color: #222;}
body {margin: 0; font-size: 1em; line-height: 1.4;}

a:focus {outline: thin dotted;}
a:active, a:hover {outline: 0;}
abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: bold;}
blockquote {margin: 1em 40px;}
hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
mark {background: #ff0; color: #000;}
pre {margin: 1em 0;}
code, kbd, pre, samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;}
q {quotes: none;}
q:before, q:after {content: ''; content: none;}
small {font-size: 80%;}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
dl, menu, ol, ul {margin: 1em 0;}
dd {margin: 0 0 0 40px;}
menu, ol, ul {padding: 0 0 0 40px;}
nav ul, nav ol {list-style: none; list-style-image: none;}
img {border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle;}
svg:not(:root) {overflow: hidden;}
figure {margin: 0;}
form {margin: 0;}
fieldset {border: 0; margin: 0; padding: 0;}
legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px;
}
textarea {resize: vertical;}
button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
}
button, input {line-height: normal;}
button, select {text-transform: none;}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {-webkit-appearance: button; cursor: pointer; *overflow: visible;}
button[disabled], html input[disabled] {cursor: default;}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px;
}
input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner,
input::-moz-focus-inner {border: 0; padding: 0;}
textarea {overflow: auto; vertical-align: top;}
table {border-collapse: collapse; border-spacing: 0;}
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}
.hidden {display: none !important; visibility: hidden;}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
.invisible {visibility: hidden;}
.clearfix:before,
.clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

.column {
    float: left;
    width: 50%;
    display: table-cell;
    vertical-align: bottom;
}


.row{
    display: flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 0;
}

    .row > div:nth-child(2) {
        text-align: right;
    }
    .wrapper > .row:first-child {
        border-bottom: 1px solid #000;
    }


.wrapper{
    display:flex;
    flex-direction:column;
}
/*@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
*/

/*clearfix*/
.cf:before,.cf:after{content:" ";display:table}
.cf:after{clear:both}
.cf{*zoom:1}
/*end*/

/*dialog*/
.veil{position:fixed;top:0;left:0;bottom:0;right:0;z-index:100;opacity:0.6;background-color:gray}
.dlg{padding:0px;box-shadow:5px 5px 5px rgba(33,33,33,0.16);background-color:white;border:1px solid #777;z-index:600;width:500px;position:fixed;line-height:1.5}
.dlg *{box-sizing:border-box}
.dlg.narrow{width:340px}
    .dlg input[type=text]{height:50px}
    .dlg select{padding-left:4px}
    .dlg .dlg-head {
        padding: 10px 20px 0px 20px;
        font-family: Verdana,Sans-Serif;
        font-size: 26px
    }
    .dlg .dlg-body{padding:20px 20px 20px 20px;position:relative}
    .dlg .dlg-body i{position:absolute;left:15px;font-size:30px}
    .dlg .dlg-body i.fa-exclamation-triangle{color:#F7882F}
    .dlg .dlg-body i.fa-info-circle{color:#3A94DE}
    .dlg .dlg-body i.fa-times-circle{color:#ff0000}
    .dlg .dlg-msg{margin-bottom:20px}
    .dlg .dlg-control{margin-top:20px;clear:both}
    .dlg .dlg-control button{float:right;margin-left:10px;margin-top:10px} /* buttons should wrap when screen too tight*/
/*end*/

/*main*/
html{background-color:#F1F2F4}
body {
    font-size: 16px;
    font-family: Verdana,Sans-Serif;
    color: black;
    line-height: 1.5;
    background-color: white
}
.container{width:100%;margin:0 auto} /* legacy */
p{margin:0;padding:0}
strong, .strong {
    font-family: Verdana,Sans-Serif;
    font-weight: 600
}
.loading{position:fixed;background:url(../image/loading_transparent.gif) no-repeat center;background-color:whitesmoke;opacity:0.6;overflow:hidden;left:0;top:0;bottom:0;right:0;z-index:1000}

/* links */                                                                                                                                                                                                                                                      
a:link, a:visited, a:active{color:#1a65b9}
a:hover{color:#145094}
*:focus{outline:none}
 span:focus,span:focus, a:focus, h2:focus,img:focus, button:focus, input:focus, div.gets-focus[tabindex]:focus{outline:3px solid #0099fe} /*some divs require focus for kicks, only gets-focus divs will receive outline when in focus, this is for custom */

/* buttons */
button, input[type=button]{cursor:pointer;color:white;background-color:#1a65b9;text-transform:uppercase;height:50px;font-size:14px;font-family:Verdana,Sans-Serif;border:0;padding:0px 20px 0px 20px;letter-spacing:2px}
button:hover, input[type=button]:hover, button.hollow:hover{background-color:#145094;color:white}
button.hollow{background-color:white;color:#1a65b9;border:1px solid #1a65b9}
button.flat{background-color:transparent;color:#1a65b9}
button.flat:hover{color:#145094;text-decoration:underline}

/* input */
input[type=text] {
    height: 50px;
    border: 1px solid #6F7174;
    padding: 0px 10px 0px 10px;
    box-sizing: border-box;
    font-family: Verdana,Sans-Serif;
}

/* screen reader- to hide on screen but make avaialble for screen reader(ada) */
.sr-allow{clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden;  padding: 0; position: absolute;}{clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden;  padding: 0; position: absolute;}

/* banner */
#top{min-height:80px;padding:0px 10px 5px 35px;box-sizing:border-box;background-color:#F1F2F4}
a#logo{display:block;float:left;margin-top:20px}
    a#logo img{width:168px;height:35px}
div#emailSubscriber{float:right;text-align:right}
div.banner{background-color:#244671;padding:10px 35px 10px 35px;margin-bottom:20px;clear:both;height:80px;position:relative;color:white}
    div.banner .region-selector{position:absolute;top:35px;right:35px;text-align:right}
main{background:#FFF;min-height:400px;padding:0 10px 10px 10px}

/* logged in user status*/
p.user-email {
    font-family:Verdana,Sans-Serif;
    font-size: 20px;
    color: #244671;
    margin: 10px 0 5px 0
}
a.update-email{border-left:#ababab 1px solid;padding-left:5px}
a.change-email{padding-right:5px}

/* heading styles*/
h1 {
    margin: 0;
    padding: 0;
    color: white;
    font-family: Verdana,Sans-Serif;
    font-size: 40px;
    font-weight: normal;
    padding-top: 13px
}
h2 {
    margin: 20px 0px 20px 0px;
    font-size: 24px;
    font-family: Verdana,Sans-Serif;
    font-weight: normal
}
    h2 .number{height:36px;width:36px;border-radius:18px;text-align:center;background-color:#244671;color:white;margin-right:10px;font-size:22px;display:inline-block}

/*Express Subscribe (when launched from PIMCO.COM)*/
body.express-subscribe{padding:0 5px 0 5px} /* remove padding as the iframe pimco uses to call SMS is padded iframe is padded, 
                                            leave padding on the right so that button outline does not get cut off*/
    body.express-subscribe h1 {
        margin: 0;
        padding: 0;
        font-family: Verdana,Sans-Serif;
        font-size: 34px;
        font-weight: normal;
        border-bottom: 2px solid #858e93;
        color: black
    }
    body.express-subscribe h2 {
        margin: 0;
        padding: 0;
        font-family: Verdana,Sans-Serif;
        font-size: 20px;
        font-weight: normal;
        padding: 10px 0
    }
body.express-subscribe #offeringList{margin-bottom:20px}
body.express-subscribe section{min-width:1px;margin-bottom:5px}
body.express-subscribe .grecaptcha-badge {position:fixed;top:10px;right:10px}

/* login section */
div.highlight-box{background-color:#F0F0F1;border:1px solid #DDDDDD;overflow:hidden;padding:10px 20px 10px 20px;box-sizing:border-box;min-height:120px;margin-bottom:20px}
input.user-email{width:60%;margin-right:10px;max-width:695px}
span.error{padding-left:21px;background:url(../image/ic_warning.png) no-repeat 0 9px;color:#dc0000}

/* tabs */
.tabs{width:100%;overflow:visible}
    .tabs li{width:auto;margin:0;padding:0;float:left;margin:9px 3px 0;letter-spacing:2px}
        .tabs li a {
            padding: 8px 25px;
            font-family: Verdana,Sans-Serif;
            font-size: 14px;
            display: block;
            background-color: #1a65b9;
            border: 1px solid #1a65b9;
            border-bottom: 0;
            color: #FFF;
            text-transform: uppercase;
            text-decoration: none;
            outline-offset: -3px
        }
    .tabs li a:hover{background-color:#145094;text-decoration:none;border-bottom:0}
    .tabs li.tab-active{margin-top:0}
    .tabs li.tab-active a{background-color:#FFF;position:relative;top:1px;padding:12px 25px;border:1px solid #1a65b9;border-bottom:1px solid white;color:#1a65b9}
    .tabs li a span{display:inline-block;width:12px;height:12px;background:url(../image/ic_lock_white.png) no-repeat;background-size:12px 12px}
    .tabs li.tab-active a span{background:url(../image/ic_lock.png) no-repeat;background-size:12px 12px}
    .tabs li a span.unlock{background:url(../image/ic_lock_open_white.png) no-repeat;background-size:12px 12px}
    .tabs li.tab-active a span.unlock{background:url(../image/ic_lock_open.png) no-repeat;background-size:12px 12px}
    /*on scroll to make tabs work with sticky table heads*/
    .tabs.tabs-stick{padding-top:10px;position:fixed;top:0;right:10px;left:10px;width:auto;margin-top:0;border-bottom:1px solid #1a65b9;background-color:white;z-index:10}

/* content block under tabs */
div.cat-tab-body{padding:20px 40px 10px 40px}
    div.cat-tab-body section{position:relative} /*some elements of Resources tab require absolute positioning*/

div.tabs-extra-text{padding:15px 40px 0px 40px}
/* tab housing */
div#masterCategories{border-bottom:1px solid #1a65b9}
/* Web Categories */
section.coll-section{width:33%;margin-bottom:30px;box-sizing:border-box}
span.category-header {
    font-family: Verdana,Sans-Serif;
    color: black;
    font-size: 24px;
    display: block
}
span.sub-category-header {
    font-family: Verdana,Sans-Serif;
    display: block
}
a.question{width:16px;height:16px;display:inline-block;margin-left:5px;background:url(../image/ic_help.png) no-repeat 0 0;background-size:16px 16px}

/* Offerings */
ul{margin:0;padding:0;list-style-type:none}
ul.coll-category-offerings li{overflow:hidden;margin-bottom:4px}
ul.col{margin-bottom:20px;width:49%;float:left}

li.header *{display:inline-block}
    li.header div.selectAll{position:static}
/* Individual Offering */
label{padding-bottom:4px;display:inline-block;margin:0;white-space:nowrap}
label>span.checkbox{margin-right:5px}
label>span.tooltipContainer{border-bottom:1px dotted #212121;color:#212121;display:inline-block}
label>span.tooltipContainer[disabled]{border-bottom:1px dotted #C2C6C9;color:#C2C6C9}
label:hover>span.tooltipContainer:not([disabled]){border-bottom:1px solid black;color:black}
div.tip{cursor:default;left:0;box-shadow:3px 3px 3px #999;background-color:white;color:black;border:1px solid #777;z-index:600;font-size:14px;position:absolute;padding:10px 25px 10px 10px;width:300px;box-sizing:border-box;white-space:normal}
    div.tip p{margin:0 0 10px 0;padding:0}    
    div.tip a.tip-close{cursor:pointer;width:16px;height:16px;position:absolute;top:5px;right:5px;background:url(../image/ic_cancel.png) no-repeat 0 0;background-size:16px 16px}    
/* select all on Resources */
div.selectAll{position:absolute;right:0;top:10px}

footer{padding:10px 10px 90px 10px;background-color:#F1F2F4}
    footer>.legal{float:left;width:100%}
    footer>.legal p{margin-top:1.2em}
    nav ul{margin:0;padding:0}
    nav li{width:auto;padding:0 10px 0 0}

/* fixed footer at the bobbom of the page */
.smart-control{position:fixed;bottom:0;left:0;right:0;height:80px;box-sizing:border-box;box-shadow:0 -2px 7px #ababab;background-color:#244671;z-index:10}
    .smart-control .button-panel{padding:15px 15px 0 0;float:right;width:auto}
    .smart-control .text-panel{padding:10px 5px 15px 15px;color:white}
    .smart-control .text-panel a{color:white}
    .smart-control button{color:#1a65b9;background-color:white;float:right}
    .smart-control button.hollow{background-color:transparent;color:white;border:1px solid white}
    .smart-control button.hollow:hover{background-color:transparent}
    .smart-control button:hover{background-color:#DFE3E5}
    .smart-control #btn-cart{background-image:url(../image/ic_cart.png);background-repeat:no-repeat;background-position:10px center;padding-left:40px;padding-right:30px;position:relative}
    .smart-control #btn-cart.selected{background-image:none;background-repeat:no-repeat;background-position:10px center;padding-left:10px;padding-right:10px;position:relative}
    .smart-control #btn-cart.unselected{background-image:url(../image/ic_cart.png);background-repeat:no-repeat;background-position:10px center;padding-left:40px;padding-right:10px;position:relative}
    .smart-control #btn-cart span.cart-toggle{display:none!important}
    .smart-control #btn-cart span.count{color:#1a65b9;display:block;line-height:50px}
    .smart-control #btn-cart span.cart-toggle{position:absolute;display:block;width:20px;right:0;top:0;bottom:0;background-image:url(../image/ic_arrow_drop_up_blue.png);background-repeat:no-repeat;background-position:0px center}
    .smart-control #btn-cart.open span.cart-toggle{background-image:url(../image/ic_arrow_drop_down_blue.png)}
    .smart-control #lbl-unsubscribe-prompt{width:50%} /* prevent button interference in floats*/
    .smart-control #btn-unsubscribe-all{color:#cd0b0b}
    .smart-control #btn-unsubscribe-all, .smart-control #btn-subscribe-now{margin-left:15px}
    
    .smart-control button#btn-cart span.cart-manager { line-height: 50px;}
    .smart-control button#btn-cart span.count { float: right; padding-left: 2px;}
    .smart-panel-wrap button, input[type=button] {   margin-left: 10px;}
    .smart-control #btn-cart-mobile{display:none;}
    .smart-control #btn-cart{display:block;}
    .smart-panel-wrap #btnclosecard {   display:none}

.smart-countrol-center { display: flex; flex-direction: row-reverse; justify-content: space-between }

/* custom checkbox via span*/
span.checkbox{box-sizing:border-box;position:relative;display:inline-block;border:2px solid #53565a;height:20px;width:20px;margin:auto;vertical-align:middle;background-color:white}
span.checkbox[checked]{background-color:#1a65b9;border-color:#1a65b9}
span.checkbox[checked]:after{display:block;content:'';width:5px;height:10px;position:absolute;top:0px;left:5px;transform:rotate(40deg);border:2px solid white;border-top:none;border-left:none}
span.checkbox:hover{cursor:pointer}
span.checkbox[disabled]{border-color:#C2C6C9}
span.checkbox[checked][disabled]{background-color:#C2C6C9}

/* sms-chk (replaces the above) */
span.sms-chk{position:relative;padding-bottom:1px;display:inline-block}
    span.sms-chk input{height:20px;width:20px;position:absolute;top:3px;left:3px/*need to allow for outline to be displayed and it's hard with legacy html*/;opacity:0;cursor:pointer;z-index:1}
    span.sms-chk label {margin-left:30px;display:inline-block;padding-bottom:0px /*overwrite legacy label styling */}
    span.sms-chk input + label::before{content:'';border:2px solid #53565a;height:20px;width:20px;position:absolute;left:3px;top:3px;box-sizing:border-box}
    span.sms-chk input + label::after{content:'';width:5px;height:10px;position:absolute;top:5px;left:10px;transform:rotate(40deg);border:2px solid white;border-top:none;border-left:none;opacity:0}
    span.sms-chk input:disabled{cursor:default}
    span.sms-chk input:disabled + label::before{border-color:#C2C6C9}
    span.sms-chk input:disabled:checked + label::before{background-color:#C2C6C9;border-color:#C2C6C9}
    span.sms-chk input:checked + label::after{opacity:1}
    span.sms-chk input:checked + label::before{background-color:#1a65b9;border-color:#1a65b9}
    span.sms-chk input:disabled + label{border-color:#C2C6C9;color:#C2C6C9}
    span.sms-chk input:focus + label::before{outline:3px solid #0099fe}
    span.sms-chk.offering label{border-bottom:1px dotted #212121} /* only offering checkbox is set to display tooltip and should be styled this way */
    span.sms-chk.offering input:not([disabled]) + label:hover{border-bottom:1px solid black}

/*Literature tab/Fund table*/
table.fund-lit{width:100%;border:none;margin-bottom:20px}
    table.fund-lit td, table.fund-lit th{text-align:center;padding:5px;border:none;color:black}
    table.fund-lit thead{border-top:1px solid #ddd;background-color:white;z-index:10/*for when it assumes fixed position under sticky tabs*/}
    table.fund-lit th{font-weight:normal;border-bottom:1px solid #6F7174;width:9.14%}
    table.fund-lit thead tr.table-header th {
        border-bottom: 2px solid #6F7174;
        font-family: Verdana,Sans-Serif;
    }
    table.fund-lit td.share-class-col {
        font-family: Verdana,Sans-Serif;
    }
    table.fund-lit th.share-class{text-align:left;padding:10px 0px 10px 5px}
    table.fund-lit th.share-class span.sms-chk{margin-left:10px}
    table.fund-lit th.results{text-align:right;padding:10px 0px}
    table.fund-lit th.fund-name,table.fund-lit td.fund-name{width:36%;min-width:200px;text-align:left}
    table.fund-lit span.checkbox{margin-top:-4px}
    table.fund-lit thead.stick{position:fixed !important;top:57px}
    table.fund-lit tr.odd{background-color:#f5f5f6}
    table.fund-lit tr:hover td, table.fund-lit td.hover{background-color:rgb(219,231,242)}
    table.fund-lit td.hover.crosshair{background-color:rgb(191,212,239)}
    
/* Literature Filters */
div.sub-tab{padding:15px 0px;background-color:white;z-index:10/*for when it assumes fixed position under sticky tabs*/}
    div.sub-tab.stick{position:fixed;top:58px;left:10px;right:10px;padding-top:10px}
    div.sub-tab a.active, div.fund-control a.active {
        font-family: Verdana,Sans-Serif;
        color: #163355;
        padding-right: 5px
    }
    div.sub-tab li, div.fund-control li, #searchResultsText li{border-right:#ababab 1px solid;padding:0 5px}
    div.sub-tab li:last-child, div.fund-control li:last-child{border-right:none}
    div.sub-tab ul, div.fund-control ul{margin:0;padding:0}
    div.sub-tab li, .fund-control li{float:left}
    div.sub-tab .frequency li a{text-decoration:none;font-size:14px;letter-spacing:2px;outline-offset:-3px}
    div.sub-tab .frequency li{float:right;border:none;padding-right:0px}
        div.sub-tab .frequency li.frequency-links a {
            text-transform: uppercase;
            color: black;
            background-color: #f0f0f1;
            border: 1px solid #ccc;
            display: block;
            float: left;
            padding: 5px 10px;
            border-right: none;
            font-family: Verdana,Sans-Serif;
        }
    div.sub-tab .frequency li.frequency-links a:last-child{border-right:1px solid #ccc}
    div.sub-tab .frequency li.frequency-links a.active{color:white;background-color:#244671;border-color:#244671}
   
div.fund-control{padding-bottom:10px;margin-top:10px}
    div.fund-control.bottom-line{border-bottom:1px solid #ddd}
    div.fund-control ul{float:left}
    div.fund-control #txtSearchFunds{width:400px;padding-left:40px;background-image:url(../image/ic_search.png);background-repeat:no-repeat;background-position:10px center}

/* REGION HANDLING */
/* open/close region-related popups*/
.arrow-down{height:8px;width:8px;border-style:solid;border-width:0px 1.5px 1.5px 0px;transform:rotate(45deg);margin-top:10px}
.arrow-up{height:8px;width:8px;border-style:solid;border-width:0px 1.5px 1.5px 0px;transform:rotate(225deg);margin-top:15px}

/* one region in the dropdown or list for selection*/
.region-item{cursor:pointer;padding-left:10px;box-sizing:border-box;position:relative;min-height:50px;color:black}
.region-item > *{display:inline-block;margin-right:10px}
.region-item .country-name{line-height:50px;text-transform:uppercase}
.region-item img{} 
.region-item.selected, .region-item.selected:hover{background-color:#244671;color:white}
.region-item:hover{background-color:#e0e0e0;color:black}

/* Region Dropdown in the Dialog for new User */
.region-dropdown{position:relative}
    .region-dropdown > .selection{height:50px;border:1px solid #6F7174;padding:0px 10px;cursor:pointer}
    .region-dropdown > .selection *{float:left}
    .region-dropdown > .selection img{float:left;margin-top:7px} 
    .region-dropdown > .selection span.country-name{float:left;line-height:50px;margin-left:10px;text-transform:uppercase}
    .region-dropdown > .selection span.selector-arrow.arrow-down{margin-top:17px;float:right} 
    .region-dropdown > .selection span.selector-arrow.arrow-up{margin-top:22px;float:right} 
    .region-dropdown > .menu{position:absolute;left:0;top:50px;right:0;height:180px;z-index:30;border:1px solid #6F7174;background-color:white;overflow-y:auto}
        .region-dropdown > .menu > .region-group {
            text-align: left;
            font-family: Verdana,Sans-Serif;
            padding-left: 10px;
            padding-right: 10px
        }
/* language selector appearing under dropdown after selection is made that requires language */
.lang-selector-container{height:20px;padding-top:15px}
    .lang-selector-container > .lang-selector{text-align:center}

/* Region List in the dialog for multi-user Subscriber */
.region-list {
    border: 1px solid #6F7174;
    max-height: 200px;
    overflow-y: auto;
    box-sizing: content-box !important;
    min-width: 285px;
    max-width: 320px;
    margin: 0 auto;
}
    .region-list .region-item .lang-selector{clear:both}
    .region-list .region-item .lang-selector label{cursor:pointer}

/* Region Selector in the Banner area */
.region-selector *{cursor:pointer}
    .region-selector .language{display:inline;float:left;padding-right:10px; margin-top:5px;color:white}
    .region-selector .selection > img{float:right}
    .region-selector .selection > .selector-arrow{float:left;margin-right:10px}
    .region-selector .selection > .country-name{float:left;margin-right:10px;margin-top:5px !important;text-align:right}
    .region-selector .menu{text-align:left;box-sizing:border-box;z-index:30;border:1px #777 solid;min-width:285px; max-width: 320px;position:absolute;top:40px;right:-10px;box-shadow:3px 3px 3px #999;max-height:305px;overflow-y:auto;background-color:white}
    .region-selector .menu .region-item span{line-height:50px}
    .region-selector .menu .region-item img{position:absolute;right:0;top:7px} /*using absolute due to tight space and some country names being long*/
/* END REGIONS */

/* placeholder coloring */
input[type="text"].placeholder,
input[type="email"].placeholder,
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
[placeholder]:-ms-input-placeholder,
[placeholder]{color:#6F7174}

/* Cart */
.smart-panel-wrap{z-index:20;position:fixed;top:0;bottom:80px;left:0;right:0;background-color:white;padding:15px 20px 0px 20px}
    .smart-panel-wrap h2{margin:0;padding:0;float:left;font-size:30px;color:#174a7c}
    .smart-panel-wrap h3 {
        font-family: Verdana,Sans-Serif;
        color: black;
        font-size: 24px;
        margin: 0;
        padding: 0;
        font-weight: normal;
        text-transform: capitalize
    }
    .smart-panel-wrap em{float:left;clear:left;font-style:normal}
    .smart-panel-wrap .remove-checked{float:right;}
    .smart-panel-wrap .cross-image{display:inline;width:12px; height:12px;padding:5px}
.smart-panel{position:absolute;top:110px;left:20px;right:20px;bottom:20px;overflow-y:auto;padding:10px;margin-top:20px;}
    .smart-panel hr{border-top:2px solid #ddd;margin-top:15px}
    .smart-panel li a{visibility:hidden}
    .smart-panel.edit li {cursor:pointer;padding-left:25px;background-image:url(../image/ic_clear.png);background-repeat:no-repeat; background-size:12px 12px;background-position:3px center}
    .smart-panel.edit li:focus{outline:3px solid #0099fe}
    .smart-panel li:focus{outline:3px solid #0099fe}
    .smart-panel.edit li:hover{background-color:none}
    .smart-panel.edit li.removed {background-image:none;background-color:none;color:#aaa;background:none; background-image: url(../image/ic_clear.png);background-repeat:no-repeat;background-size: 12px 12px;background-position: 3px center;padding-left: 25px;}
    .smart-panel.edit li.removed a{float:right;visibility:visible;min-width:80px;}
    .smart-panel.edit li a:focus{outline:0}
    .smart-panel .remove-all-link{float:right;padding-top:8px;padding-bottom:8px;color:#AE2016}
    .smart-panel .cart-italic-text{margin-left:10px;vertical-align:text-bottom;font-size:14px}

/* Survey */
#unsubscribe-survey {margin:0;padding:0 35px 20px 35px}
#unsubscribe-survey #survey-form p{margin-top:10px;margin-bottom:10px}
#unsubscribe-survey #survey-form ul{margin-top:20px}
#unsubscribe-survey #survey-form li{margin-bottom:5px}
#unsubscribe-survey #survey-form #txtOther{display:block}


@media only screen and (max-width: 1200px) 
{
    .smart-control .text-panel{line-height:1} /* at thsi point test is starting to wrap for some cultures*/
}

@media only screen and (max-width: 1050px) 
{
    /*.smart-control #btn-cart span.cart-manager {line-height: 30px!important;}*/ /* this needs to go away earlier for fr and de languages*/
    /*.smart-control .button-panel{width:450px}*/
    /*.smart-control .text-panel{margin-right:450px;}*/
    /*.smart-control .text-panel{line-height:1}*/
}

@media only screen and (max-width: 980px) 
{
    section.coll-section { width: 50% }
    .col { width: 49%; margin-right: 1% }

    button {
        height: 40px;
        letter-spacing: 1px;
    }
    .smart-countrol-center {
        display: grid;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        flex-direction: unset;
        justify-content: center;
    }
    
    .smart-control button#btn-cart span.count {
        float: right;
        padding-left: 2px;
        color: #FFF;
        display: block;
        line-height: 40px;
    }

    .smart-control button#btn-cart span.cart-manager {
        line-height: 40px;
    }

    .smart-control #btn-cart.unselected {
        background: unset;
        padding-left: 10px;
        padding-right: 10px;
    }

    .smart-control .button-panel {
        padding: 5px 5px;
        float: unset;
        width: auto;
        margin: 0 auto;
    }

    .smart-control .text-panel {
        margin-right: auto;
        padding: 0 5px;
        color: white;
    }

        .smart-control .text-panel div {
            display: none;
        }

    .smart-control #btn-cart {
        display: block;
        background-color: transparent;
        color: white;
        border: 1px solid white;
    }
       
}

@media only screen and (max-width: 767px) 
{
    .dlg{width:340px}
    .tabs li.tab-active a{padding:12px 10px}
    div#emailSubscriber{float:left;text-align:left;clear:left;}
    div.highlight-box{padding:5px}
    input.user-email{width:50%}
    section.coll-section{width:100%;margin-bottom:20px}
    div.cat-tab-body{padding:10px 10px 10px 10px}
    div#top{padding-left:10px}
    a#logo{margin-top:0px}
    p.user-email{margin:0}
    h1{font-size:26px;padding-top:0}
    div.banner{padding:0px 10px 0px 10px;margin-bottom:10px;height:70px}
        div.banner .region-selector{top:30px;right:10px}
   
    .region-selector .selection > img {
        display: none;
    }
    
    .tabs-extra-text{display:none;}
    
	ul.col {width:100%;}
    
    /*region selector*/
    div.banner .region-selector { left: 10px;}
    div.banner .region-selector .menu { left: -10px;}

    /* bottom panel */
    .smart-panel-wrap #btneditcard { padding-left:5px;padding-right:5px;}
    .smart-panel.edit li:focus{outline:1px solid #0099fe}
    .smart-panel li:focus{outline:1px solid #0099fe}
    .smart-panel hr {  border-top: 1px solid #000;    margin-top: 3px;width:100%}
    .smart-panel-wrap #btnclosecard { display:none;}
   .smart-control{padding:5px}
        .smart-control button{padding-left:5px;padding-right:5px}
        /*.smart-control button{height:30px;padding-left:5px;padding-right:5px}*/
        .smart-control .button-panel{padding:0 0 5px 0;float:left;width:auto}
    .smart-control .text-panel {
        padding: 0px 0px 5px 0px;
        clear: left;
        float: left;
        margin-right: 0;
        font-size: 14px;
    }
    
        .smart-control #btn-cart span.count{line-height:30px}
        .smart-control #btn-unsubscribe-all, .smart-control #btn-subscribe-now{margin-left:5px}

    /* cart */
    .smart-panel { /*margin-top: 70px;*/margin-bottom: 50px;}
    .smart-panel .remove-all-link {float: none; padding-top: 0px; color: #AE2016;font-size:16px;}
    /*.smart-control #btn-cart span.cart-manager {line-height: 30px!important;}*/ 
    .smart-panel { /*margin-top: 70px;*/margin-bottom: 0px;left: 0px;right: 5px;bottom: 5px;}
    .smart-panel-wrap #btneditcard{margin-left: 5px;margin-bottom: 5px;}
    .smart-panel-wrap #btnclosecard{margin-left: 5px; height: 30px; font-size: 12px; }
    .smart-panel-wrap button, input[type=button] {float:right;  }
    .smart-panel-wrap em { padding-top: 20px; padding-bottom: 20px;font-size: 16px;}

    .smart-panel-wrap em {
        padding-top: unset;
        padding-bottom: 20px;
        font-size: 14px;
    }

    .smart-panel-wrap {
        font-size: 12px;
        font-family: Verdana,Sans-Serif;
    }

    .smart-panel-wrap {z-index: 20;position: fixed; top: 0; bottom: 80px; left: 0; right: 0; background-color: #fff; padding: 10px 10px 0 10px;}
        .smart-panel-wrap h3 {
            font-family: Verdana,Sans-Serif;
            color: #000;
            font-size: 24px;
            margin: 0;
            padding: 0;
            font-weight: normal;
            float: none !important;
            vertical-align: text-bottom;
        }
      
    .smart-panel-wrap h2 {
          font-size: 24px;
    }

    .smart-panel .cart-italic-text { margin-left: 0px;    vertical-align: text-bottom;    font-size: 12px;}
    .smart-panel hr {  border-top: 1px solid #000;    margin-top: 3px;width:100%}
    .smart-panel-wrap { z-index: 1;margin-bottom:0px;}
    .smart-panel-wrap {
        font-size: 12px;
        font-family: Verdana,Sans-Serif;
        z-index: 1;
        margin-bottom: 0px
    }
    .smart-panel.edit li span {    text-overflow: ellipsis;font-size: 16px;overflow: hidden;} 
    .smart-panel li span {    text-overflow: ellipsis;font-size: 16px;overflow: hidden;}


    .half-page {width:100%;}

    .tabs li:first-child + li.literature-tab {display:none;}

    #unsubscribe-survey {padding-left:10px;padding-right:10px}

}

@media only screen and (max-width: 400px) 
{
    /*.smart-control #btn-cart{background-image:none;padding-left:5px; padding-right:5px}*/
    /*.smart-control #btn-cart.unselected {background-image: none;padding-left:10px; padding-right: 10px; }*/
    /*.smart-control #btn-cart-mobile{display:block;background-color: transparent;color:white;border:1px solid white;}*/
    /*.smart-control #btn-cart{display:none;}*/
    /*.smart-control .text-panel div{display:none}*/
    div.selectAll{position:static} /* make it flow with the text, otherwise absolute positioning is making it to overlap content on smaller width*/
    button {
        letter-spacing: unset;
        font-size: 11px;
    }
}