body{// Hide content from emerging sub-menus for Mobile #WEBA-1621 overflow-x:hidden}
.globalNewNavigation{top:0;height:auto;// mixins:@mixin animateHamburguerMenuWrapper{transform:translate(0);transition:transform .8s ease,width $animation-speed-05}
@mixin animationHamburguerMenuTabs{transform:translate(0vw,0vh);transition:$trans05}
@mixin separatorTab{display:block;border-right:1px solid $border-secondary;padding-right:15px;height:24px;padding-top:2px;&:last-of-type{border-right:0;padding-right:0}
}
@mixin tabIndicator{.tab-indicator{position:absolute;top:75px;display:block;height:0;background-color:$brand-primary-darker;transition:height .5s;width:100%;left:0;@media only screen and (max-width:$tablet){display:none}
}
&:hover>.tab-indicator{@media only screen and (min-width:$tablet){height:2px;background-color:$brand-primary-darker}
}
}
@mixin burguerMenuTop75px{left:0;top:75px;bottom:0;right:0}
@mixin boxShadowA{-webkit-box-shadow:$box-shadow-a;-moz-box-shadow:$box-shadow-a;box-shadow:$box-shadow-a}
@mixin boxShadowB{-webkit-box-shadow:$box-shadow-off;-moz-box-shadow:$box-shadow-off;box-shadow:$box-shadow-off}
@mixin flexRow{display:flex;flex-direction:row}
@mixin flexCol{display:flex;flex-direction:column}
@mixin transparentNoBorder{background-color:transparent;border:0}
@mixin fontSmallUppercase{font-size:$font-sm;text-transform:uppercase}
@mixin fontSmallBold{font-size:$font-sm;font-weight:bold}
@mixin fontPrimaryColorBold{color:$brand-primary;font-weight:bold}
@mixin fontPrimaryInlineBlock{display:inline-block;color:$brand-primary}
@mixin fullWidthNoMargin{width:100%;margin:0}
@mixin fullWidthCenteredItems{width:100%;align-items:center}
@mixin fullHeightCenteredItems{height:100%;align-items:center}
@mixin fullHeightAndWidth{width:100%;height:100%}
@mixin tabContentMobile{z-index:5;opacity:1;left:0 !important;top:0;position:absolute;transform:translate(120vw,0vh);background-color:$base;transition:$trans05}
@mixin variableList{padding:0;display:auto;border:0}
@mixin navMeasures{height:13px;width:11px}
@mixin menuOptionMeasure{height:21px;min-width:21px}
@mixin blueCarot{display:inline-block;background:url('../../../../apps/corteva/components/content/globalNewNavigation/v1/globalNewNavigation/clientlib/vectors/blue-carot.svg') center no-repeat;background-size:contain}
@mixin countryFlagIcon{border:1px solid $foundation-tertiary;width:22px;min-width:22px;height:16px;vertical-align:middle;box-sizing:content-box}
// mixins END & ~ .root.responsivegrid{margin-top:116px;transition:margin-top .5s;@media only screen and (max-width:$tablet){margin-top:75px}
}
// navigation expantion and contraption animation &.scrollable{@include boxShadowA;background-color:$base;position:fixed;width:100%;display:block;transition:top $animation-speed-05,height $animation-speed-05;z-index:$nav-z-index}
// Do the same if we are a direct child of globalNewNavigation,safeguard from Target activity &>.nav{&.scrollable{@include boxShadowA;background-color:$base;position:fixed;width:100%;display:block;transition:top $animation-speed-05,height $animation-speed-05;z-index:$nav-z-index}
}
.icon-blue-carot:before{// mobile only icons display:none;@media only screen and (max-width:$tablet){display:inline-block}
font-size:13px;color:$brand-primary}
.selector-location-container__form .close{display:block !important;@media only screen and (max-width:$tablet){display:none !important}
}
.nav{align-items:center;font-size:$font-sm;justify-content:center;position:relative;font-family:$body-font;background-color:$base;box-shadow:0 7px 10px -11px rgba(0,0,0,0.75);// Internet Explorer remove list style. ul li::before{content:'';a{color:$foundation-primary}
}
&__topline{@include flexRow;@include fullWidthCenteredItems;height:40px;background-color:$base;justify-content:space-between;max-width:$desktop-xl;margin:0 auto;z-index:15;&_brand{@include fontSmallBold;line-height:1;white-space:nowrap}
&--left{@include flexRow;align-items:center;margin:0 15px;.flag-icon{@include countryFlagIcon}
.icon-globe{color:$border-secondary}
.label_country{font-size:$font-sm}
.location__button{@include transparentNoBorder;@include fontSmallUppercase;@include fontPrimaryColorBold;cursor:pointer;margin-left:10px;padding:0;font-family:$brand-font;line-height:1;&:hover{text-decoration:underline}
}
}
&_language{@include fontSmallBold;@include fontPrimaryInlineBlock;position:relative;.language__selector{border:0;cursor:pointer;text-transform:uppercase;font-family:$brand-font;&:after{@include fontPrimaryInlineBlock;font-family:'corteva_icon';content:'\e901';font-size:10px;transform:$rotate90;transition:$trans05}
}
.language__dropdown{@include boxShadowA;display:none;position:absolute;background-color:$foundation-duodenary;min-width:58px;z-index:100;font-size:$font-sm;a{color:$brand-primary;padding:12px 16px;text-decoration:none;display:block;text-transform:uppercase;font-family:$brand-font;&:hover{background-color:$foundation-duodenary-darken-tone-1}
&.selected{@include fontPrimaryColorBold}
}
}
&:hover{.language__selector{&:after{transform:$rotate-90;transition:$trans05}
}
.language__dropdown{display:block}
}
}
&--right{@include flexRow;align-items:center;a{color:$foundation-primary;cursor:pointer;margin:0 5px;text-decoration:none;font-size:$font-sm;&:hover{text-decoration:underline}
}
.utility-link{@include separatorTab}
.account-utility{@include separatorTab;font-weight:700;color:$brand-primary}
.separator--tabs{margin:0 10px}
.action-call{@include fontSmallUppercase;background-color:$brand-primary;border:0;cursor:pointer;color:$base;font-weight:700;font-family:$brand-font;white-space:nowrap;&:hover{background-color:$brand-primary-darker}
}
.login{min-width:160px;height:40px;margin:0 0 0 10px;padding:0 10px;text-align:center}
.auth__menu{position:relative;z-index:200;cursor:pointer;&_head{@include flexRow;@include fontSmallUppercase;@include fontPrimaryColorBold;background-color:$base;transition:$bg-transition;padding-left:10px;padding-right:10px;padding-bottom:5px;padding-top:5px;border:0;z-index:-10;min-width:160px;justify-content:space-between;align-items:center;&:hover{background-color:$brand-primary-lighten-tone-2;transition:$bg-transition}
p{@include fontSmallUppercase;margin:0;display:inline-block;color:$brand-primary;font-family:$brand-font;font-weight:700;margin:0;margin-left:10px;margin-right:10px}
.seal{width:24px;height:24px;background-color:$brand-table;color:$base;border-radius:24px;position:relative;display:flex;align-items:center;justify-content:center;font-size:11px;&:after{content:'.';width:22px;height:22px;border-radius:22px;border:2px dotted $base;position:absolute;z-index:0;overflow:hidden;text-indent:100px;left:1px;top:1px}
}
.nav__tab_icon{transform:$rotate90;transition:$trans05}
}
&_btn{&:hover{.auth__menu_options{top:100%;transform:scaleY(1);@include boxShadowA;transition:$trans05,box-shadow $animation-speed-05,-moz-box-shadow $animation-speed-05,-webkit-box-shadow $animation-speed-05;li{opacity:1;transition:opacity .8s}
}
.nav__tab_icon{transform:$rotate-90;transition:$trans05}
}
}
&_options{@include fullWidthNoMargin;@include boxShadowB;position:absolute;z-index:-1;top:100%;left:0;padding:0;transform-origin:top;transform:scaleY(0);background-color:$base;transition:transform .5s,box-shadow $animation-speed-05,-moz-box-shadow $animation-speed-05,-webkit-box-shadow $animation-speed-05;li{opacity:0;transition:background-color .8s,opacity .2s;a{@include flexRow;margin:0;justify-content:flex-start;align-items:center;text-transform:capitalize;font-size:$font-sm;font-weight:normal;font-family:$body-font;padding:20px;&:hover{text-decoration:none}
}
&:hover{background-color:$brand-primary-lighten-tone-2;transition:$bg-transition}
}
.menu__option{@include menuOptionMeasure;margin:0 20px 0 0;color:$brand-primary;font-size:22px}
}
.nav__tab_icon{@include fontPrimaryInlineBlock;font-size:10px;transform:$rotate90;transition:$trans05}
}
}
@media only screen and (max-width:$tablet){display:none}
}
&__main{@include flexRow;@include fullWidthCenteredItems;background-color:$base;height:75px;justify-content:space-between;max-width:$desktop-xl;margin:0 auto;&_tabs{@include flexRow;@include fullHeightCenteredItems;width:80%;z-index:11;.logo{margin:0 15px;width:181px;cursor:pointer;img{width:100%;@media only screen and (max-width:$tablet){width:$mobile-nav-logo-width}
}
@media only screen and (max-width:$tablet){margin:0 auto}
}
.mobile__tab{display:none;@media only screen and (max-width:$tablet){&.mobile__tab-shows{@include fontSmallUppercase;display:inline-block;font-weight:bold;margin:0 auto;min-width:fit-content}
}
}
.arrow--left{display:none;overflow:hidden;.arrow__text{height:0;width:0;visibility:hidden}
@media only screen and (max-width:$tablet){&.arrow--left-shows{display:inherit;color:$brand-primary;transform:$rotate-180}
}
}
.hambuger__menu_icon{display:none;position:relative;.hambuger__menu_text{height:0;visibility:hidden;width:0}
@media only screen and (max-width:$tablet){@include fontPrimaryInlineBlock;border:0;font-size:17px;margin-right:10px;position:relative;outline:0;&.hambuger__menu_icon--close{order:1}
.hambuger__menu_text{display:none}
}
}
.nav__tab{@include fontSmallUppercase;@include fontPrimaryColorBold;cursor:pointer;text-decoration:none;font-family:$brand-font;text-align:left;&:hover{color:$chart-blue-background-color}
@media only screen and (max-width:$tablet){width:100%}
}
.hamburger__menu_wrapper{@media only screen and (min-width:$tablet){@include fullHeightAndWidth}
width:100%;min-width:350px;position:relative;.separator--nav{@include transparentNoBorder;bottom:0;height:2px;left:0;margin:0 auto;max-width:$content-width;right:0;position:absolute;z-index:-1;width:100%;transition:background-color .9s}
&:hover .separator--nav{background-color:$foundation-quaternary;transition:background-color .8s;z-index:1}
.hamburger__menu_options{@include flexRow;@include fullHeightCenteredItems;padding:0;margin:0 15px;.tabs__content__editor{top:103%;left:0;opacity:1;transform:translate(0,0vh);z-index:1;position:absolute}
@media only screen and (max-width:$tablet){@include fullWidthNoMargin;flex-direction:column;&.hamburger__menu_options-hide{display:none !important}
.tabs__content__editor{top:103%;left:0;opacity:1;transform:translate(0,0vh);z-index:1;position:absolute}
}
li{@include flexRow;@include fullHeightCenteredItems;border-bottom:2px solid transparent;list-style:none;margin:0 15px;position:relative;line-height:20px;transition:border-bottom $animation-speed-05;@include tabIndicator;ul{padding:0;margin:0}
&:hover{a{color:$brand-primary-darker}
}
&:hover>.tabs__content{top:75px}
@media only screen and (min-width:$tablet){&:hover>.tabs__content{opacity:1;transform:scaleY(1);-webkit-transition-delay:$animation-speed-02;-webkit-transition-duration:.1s;-moz-transition-delay:$animation-speed-02;-moz-transition-duration:.1s;-o-transition-delay:$animation-speed-02;-o-transition-duration:.1s;.tabs__content--row{opacity:1;transition:opacity 1s;-webkit-transition-delay:$animation-speed-02;-webkit-transition-duration:.1s;-moz-transition-delay:$animation-speed-02;-moz-transition-duration:.1s;-o-transition-delay:$animation-speed-02;-o-transition-duration:.1s}
}
}
@media only screen and (max-width:$tablet){&:hover>.tabs__content{top:0}
}
@media only screen and (max-width:$tablet){background-color:$foundation-duodenary;border-bottom:1px solid $border-secondary;justify-content:space-between;padding:21px;width:100%;margin:0;position:unset;&:hover{border-bottom:1px solid $border-secondary}
}
}
.tabs__content{top:75px;transform-origin:top;transform:scaleY(0);z-index:-5;position:absolute;height:fit-content;background-color:$base;box-shadow:0 4px 8px -4px rgba(0,0,0,0.75);&.transition--on{transition:transform .2s $animation-speed-02}
@media only screen and (max-width:$tablet){@include fullHeightAndWidth;@include tabContentMobile;&.tabs__content--mobile{@include animationHamburguerMenuTabs;top:0;left:0}
}
p{font-size:$font-m}
@supports not(height:fit-content){.tabs__content{left:13%;right:0}
}
.cards__container{@include flexCol;@media only screen and (max-width:$desktop){border-bottom:1px solid $border-secondary}
@media only screen and (min-width:$desktop){flex-direction:row}
.picture--one{margin:0 20px 10px 0}
}
.tabs__content--row{@include flexRow;justify-content:center;padding:35px 30px;opacity:0;transition:opacity .2s $animation-speed-02;@media only screen and (max-width:$tablet){flex-direction:column;padding:0;opacity:1;.separator--subnav{display:none}
.tabs__content--image{display:none}
}
}
.tabs__content--col{@include flexCol;justify-content:space-evenly;padding:35px 30px;background-color:$base;@media only screen and (max-width:$tablet){padding:0}
}
.tabs__content--block{.one--block{@include flexRow;width:auto;align-items:flex-start;.tabs__content--feature{&.feature--full{width:100%;min-width:350px}
&.feature--auto{width:auto}
}
}
.two--block{@include flexCol;padding:0 20px 0 0;width:170px;@media only screen and (max-width:$tablet){padding:21px;width:100%}
.tabs__content--feature{padding:0}
}
@media only screen and (max-width:$desktop){.two--block + .two--block{padding:20px 20px 0 0;@media only screen and (max-width:$tablet){padding:21px;border-top:1px solid $border-secondary}
}
}
}
.tabs__content--image{background:$brand-primary-lighten-tone-2 no-repeat center;background-size:cover;&.image--one{height:135px;max-width:241px;min-width:200px;width:100%}
&.image--two{height:90px;max-width:170px}
}
.tabs__content--feature{@include flexCol;padding:0;width:auto;@media only screen and (max-width:$tablet){padding:21px;width:100%}
&.feature--text{width:40%;min-width:250px;@media only screen and (max-width:$tablet){width:100%;p{display:none}
}
}
&.feature--image{width:50%;min-width:200px;@media only screen and (max-width:$tablet){width:100%;p{display:none}
}
}
a{@include fontPrimaryColorBold;font-size:$font-m;line-height:20px;text-decoration:none;@media only screen and (min-width:$tablet){&:hover{text-decoration:underline;color:$brand-primary-darker}
}
}
p{margin:5px 0 0;display:inline-block;@media only screen and (max-width:$tablet){display:none}
}
}
.tabs__content--head{margin:0 0 20px 0;@media only screen and (max-width:$tablet){@include fullWidthNoMargin;padding:21px;border-bottom:1px solid $border-secondary}
.tabs__content--title{color:$brand-primary;font-family:$brand-font;&.title--bold{font-weight:bold;font-size:18px;@media only screen and (max-width:$tablet){font-size:$font-m}
}
}
a{&:hover{text-decoration:underline;color:$brand-primary-darker}
}
p{margin:5px 0 0;display:block;@media only screen and (max-width:$tablet){display:block}
}
}
.tabs__content--list{@include flexRow;margin:0;align-items:flex-start;width:auto;&.content--list-half{width:50%}
&.content--list-most{min-width:70%}
&.content--list-full{width:100%}
&.justify--between{justify-content:space-between}
&.justify--even{justify-content:space-evenly}
&.justify--around{justify-content:space-around}
.variable--list{@include variableList;.subList--toggle-title{&:hover{a{color:$brand-primary-darker}
}
}
@media only screen and (max-width:$tablet){@include fullHeightAndWidth;.subList--toggle-content{transform:translate(105vw,0vh);position:absolute;top:-1px;padding:0;transition:$trans05;height:100vh;&.subList--toggle-content-display{@include animationHamburguerMenuTabs;height:100vh;z-index:1}
.sublist-generator-item{width:100%;max-width:none;a{font-weight:normal}
}
}
}
&.multiple-column{@media only screen and (max-width:$tablet){column-count:1 !important}
}
a{color:$foundation-primary;cursor:pointer;transition:$animation-speed-05;&:hover{text-decoration:underline;@media only screen and (max-width:$tablet){text-decoration:none}
}
@media only screen and (max-width:$tablet){@include fontPrimaryColorBold;width:90%;display:inline-block}
}
}
.variable--list + .variable--list{margin-left:15px;&.group--large{margin-left:50px;@media only screen and (max-width:$tablet){margin:0}
}
@media only screen and (min-width:$desktop){margin-left:25px}
@media only screen and (max-width:$tablet){margin:0}
}
li:first-child{margin:0 0 15px;&:hover{color:$brand-primary-darker}
@media only screen and (max-width:$tablet){margin:0}
}
li:last-child{@media only screen and (max-width:$tablet){border-bottom:1px solid $border-secondary;&:hover{border-bottom:1px solid $border-secondary}
}
}
.list--last-item{margin:0 0 15px;@media only screen and (max-width:$tablet){margin:0}
}
li{margin:15px 5px 15px 0;display:block;border:0;width:12vw;max-width:150px;a{font-size:$font-m}
@media only screen and (max-width:$tablet){@include fullWidthNoMargin;border-bottom:1px solid $border-secondary;justify-content:unset;max-width:none}
}
.list__title_wrap{.list__title_text{@include fontPrimaryColorBold;width:90%;display:inline-block}
.icon-blue-carot::before{left:20px;position:relative}
@media only screen and (max-width:$tablet){padding:21px;width:100%;max-width:none}
}
@media only screen and (max-width:$tablet){flex-direction:column}
}
}
}
@media only screen and (max-width:$tablet){@include burguerMenuTop75px;display:table;width:100%;background-color:$base;position:absolute;overflow-x:hidden;z-index:10;transform:translate(105vw);&.close--transition{transition:$trans05}
@supports(height:fit-content){.hamburger__menu_options{height:fit-content;display:inline-block}
}
}
}
@media only screen and (max-width:$tablet){width:100%;justify-content:space-around}
}
.nav__search{position:relative;height:40px;margin:10px;transition:.8s;form.is-hover .nav__search_button{background-color:$brand-primary;@media only screen and (max-width:$tablet){background-color:transparent}
}
.twitter-typeahead{position:absolute !important;right:0;.top-search::-ms-clear{display:none}
.tt-menu{border-top:1px solid #aaa;font-family:$body-font;font-size:$font-sm}
@media only screen and (max-width:$tablet){left:-3vw;width:102vw;background-color:$base;.tt-suggestion{padding:21px}
.tt-menu{top:140% !important}
}
// exception for search autocomplete results:@media only screen and (max-width:536px){left:-6vw;width:102vw}
}
.minchars-met{border:0;@media only screen and (max-width:$tablet){background-color:transparent;color:$brand-primary;&:hover,&:active{background-color:transparent}
.nav__search_icon{color:$brand-primary}
}
}
&_input{height:40px;width:40px;right:0;position:absolute;transition:width .8s;border:1px solid $brand-primary-lighten-tone-1;outline:0;@media only screen and (max-width:$tablet){border:0;display:none}
}
&_icon{font-size:17px;outline:0;line-height:unset;@media only screen and (max-width:$tablet){border:0;line-height:1}
}
&_button{position:absolute;border:1px solid $border-secondary;background-color:$base;color:$brand-primary-darker;top:0;bottom:0;width:40px;right:0;transition:background-color .5s;&:hover{background-color:$brand-primary-darker;border:1px solid $brand-primary-darker;color:$base;transition:background-color .5s}
@media only screen and (max-width:$tablet){&:hover{background-color:transparent;border:0;color:$brand-primary;transition:background-color .5s}
}
@media only screen and (max-width:$tablet){border:0;left:0;color:$brand-primary}
}
&_close-button{display:none}
@media only screen and (max-width:$tablet){width:40px;margin:0}
}
.nav__topline--mobile{display:none;@media only screen and (max-width:$tablet){@include flexCol;@include fullWidthCenteredItems;&.utility__menu{border-bottom:1px solid $border-secondary;background:$base}
&.topline__mobile-hide{display:none}
a{text-decoration:none;color:$brand-primary;width:100%;border:0;text-align:left}
p{@include fullWidthNoMargin;@include fontSmallUppercase;text-align:left;padding:21px;font-weight:bold;border-bottom:1px solid $border-secondary}
li{@include flexRow;@include fullWidthCenteredItems;@include fontSmallBold;padding:21px;line-height:20px;background-color:$foundation-duodenary;justify-content:space-between;border-bottom:1px solid $border-secondary;.flag-icon{@include countryFlagIcon}
.language__menu{@include fontSmallUppercase;color:$brand-primary;cursor:pointer;text-decoration:none;font-weight:bold;font-family:$brand-font;text-align:left;width:100%;&.language__menu--tab{padding:0;border:0;line-height:0}
&.language__menu--option{padding:21px;border-bottom:1px solid $border-secondary;text-transform:uppercase;font-size:14px;.language--selected{@media only screen and (min-width:$tablet){font-weight:bold}
}
&:hover{color:$brand-primary-darker-tone-1}
}
}
.language__menu--label{width:0;height:0;overflow:hidden;padding:0}
.location__button{@include transparentNoBorder;@include fontSmallUppercase;@include fontPrimaryColorBold;cursor:pointer;margin-left:10px;padding:0;font-family:$brand-font;line-height:1;.nav__tab_icon{@include navMeasures;@include blueCarot;float:right}
.icon-blue-carot{position:absolute;right:20px}
}
}
.action-call{background-color:$brand-primary;border:0;cursor:pointer;color:$base;font-size:$font-m;width:100%;text-align:center;padding:12px 20px;font-weight:700;font-family:$brand-font;text-transform:uppercase}
.separator--tabs{background-color:$border-secondary;border:0;height:1px;width:100%;margin:0 10px}
.nav__tab_icon-hide{@include navMeasures}
.utility__tab{padding:21px}
.auth__menu--mobile{@include flexRow;@include fullWidthCenteredItems;@include fontSmallBold;padding:21px;line-height:20px;background-color:$foundation-duodenary;justify-content:space-between;border-top:1px solid $border-secondary;border-bottom:1px solid $border-secondary;&.myAccount{a{display:flex}
}
.operation-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;font-family:$brand-font;font-size:14px;font-weight:500;color:$foundation-undenary;text-transform:none;padding-left:15px}
.icon-blue-carot{color:$brand-primary;position:absolute;right:0;margin-right:19px}
.tabs__content{@include fullHeightAndWidth;@include tabContentMobile;&.tabs__content--mobile{@include animationHamburguerMenuTabs}
.variable--list{@include fullWidthNoMargin;@include variableList;&.multiple-column{column-count:1 !important}
li{display:block;margin:0;border-bottom:1px solid $border-secondary;justify-content:unset;a{@include flexRow;@include fontSmallUppercase;@include fullWidthCenteredItems;@include fontPrimaryColorBold;cursor:pointer;transition:$animation-speed-05;white-space:nowrap;text-decoration:none;justify-content:left;&:hover{color:$brand-primary-darker;transition:$animation-speed-05}
}
.menu__option{@include menuOptionMeasure;margin:0 20px 0 0;font-size:21px;display:inline-block}
}
}
}
}
}
}
&.hamburger__menu_options--open{@media only screen and (max-width:$tablet){.nav__search{display:none}
.hamburger__menu_wrapper{@include burguerMenuTop75px;@include animateHamburguerMenuWrapper;width:101vw;background-color:$base;position:absolute;overflow:unset;z-index:10;.nav__tab_icon-hide{display:none;@media only screen and (max-width:$tablet){@include navMeasures;@include blueCarot;float:right}
}
}
@supports(height:fit-content){.hamburger__menu_wrapper{@include burguerMenuTop75px;@include animateHamburguerMenuWrapper;display:inline-block;width:101vw;background-color:$base;position:absolute;overflow:unset;z-index:10;.nav__tab_icon-hide{display:none;@media only screen and (max-width:$tablet){@include navMeasures;@include blueCarot}
}
@media only screen and (max-width:$tablet){overflow-y:scroll;overflow-x:hidden}
}
}
.nav__main_tabs{justify-content:space-between}
.logo{margin:0;display:inline-block;&.logo--hide{display:none}
}
}
}
&--open{.nav__search{width:224px;transition:width .8s;&_input{width:224px;padding:10px 40px 10px 10px;display:inline-block;border:1px solid $brand-primary;color:$input-dark-grey;font-family:$body-font;font-size:$font-sm;line-height:1;@media only screen and (max-width:$tablet){font-size:$font-sm;display:block;height:40px;width:100%;right:0;padding:10px 13vw 16px 16vw;outline:0;border:0}
// only mobile devices:@media only screen and (max-width:400px){padding-left:20vw}
}
&_button{background-color:$brand-primary-darker;border:1px solid $brand-primary-darker;@media only screen and (max-width:$tablet){border:0;background-color:transparent}
&:focus{outline:0}
}
&_close-button{@media only screen and (max-width:$tablet){z-index:1;position:absolute;display:block;top:6px;font-size:17px;right:-10vw}
}
&_icon{color:$base;@media only screen and (max-width:$tablet){color:$brand-primary}
}
@media only screen and (max-width:$tablet){width:40px}
}
@media only screen and (max-width:$tablet){.nav__main_tabs{width:15%;.logo{width:0;opacity:0;transition:$animation-speed-05 opacity}
}
.nav__search{@include fullWidthNoMargin}
}
}
@media only screen and (max-width:$tablet){flex-direction:row-reverse;padding:15px 18px;border-bottom:1px solid $border-secondary}
}
}
.separator--tabs{background-color:$border-secondary;border:0;height:25px;width:1px;margin:0 16px}
.separator--nav{@include fullWidthNoMargin;background-color:$border-secondary;border:0;padding:.5px 0;@media only screen and (max-width:$tablet){display:none}
}
.separator--subnav{width:0;border:0;padding:.5px;background-color:$foundation-quaternary;margin:0 30px 0 15px;height:auto}
.tabs__content__accesibility{top:75px !important;opacity:1 !important;transform:scaleY(1) !important;transition:transform .1s $animation-speed-05 !important}
.tabs__content__block__accesibility{opacity:1 !important;transition:opacity 1s $animation-speed-05 !important}
.simulate__hover{transition:border-bottom .8s !important;border-bottom:2px solid $brand-primary-darker-tone-1 !important;z-index:2}
.hide{display:none !important}
.skip-nav{position:absolute;top:-100px;left:0;opacity:0;display:block;z-index:20;&:focus{opacity:1;top:0;background-color:$base;width:30%;padding:5px;border-radius:15px;border:4px solid $brand-primary-darker;text-align:center;font-size:1.2em}
}
.menu__open{top:100% !important;transform:scaleY(1) !important;box-shadow:$box-shadow-a;transition:transform .5s,box-shadow .5s,-moz-box-shadow .5s,-webkit-box-shadow .5s !important}
.menu__open li{opacity:1 !important;transition:opacity .8s !important}
// authorable notifications .announcements{position:relative;background-color:#eee;font-family:$body-font;font-weight:normal;width:100%;text-align:center;color:#000;padding:10px 60px;font-size:14px;margin:0;border:0;outline:0}
@media only screen and (max-width:550px){.announcements{padding:10px 45px 10px 20px;width:100%;text-align:left;font-size:12px}
}
.alerts{position:relative;background-color:#cc3602;font-family:$body-font;font-weight:normal;width:100%;text-align:center;color:#fff;padding:10px 60px;font-size:14px;margin:0;border:0;outline:0}
@media only screen and (max-width:550px){.alerts{padding:10px 45px 10px 20px;width:100%;text-align:left;font-size:12px}
}
.href{font-weight:bold;color:#fff;text-decoration:underline;display:inline}
@media only screen{#pioneer{color:#3b7b2b}
#corteva{color:#0072ce}
#brevant{color:#750d2b}
#enlist{color:#00778b}
}
.closeBtn{position:absolute;top:50%;transform:translateY(-50%);color:#fff;padding-right:10px;font-size:2em;font-weight:normal;outline:0 solid transparent;cursor:pointer;right:15px;@media only screen{&.pioneer{color:#3b7b2b}
&.corteva{color:#0072ce}
&.brevant{color:#750d2b}
&.enlist{color:#00778b}
}
}
@media only screen and (max-width:550px){.closeBtn{padding-right:5px;transform:translateY(-50%)}
}
}
.ui-autocomplete{max-height:200px;background-color:inherit;overflow-y:auto;z-index:10000 !important;list-style:none;font-family:$text-font;max-width:223px;border:1px solid #d3d3d3;.ui-menu-item{line-height:24px;font-size:$font-m;cursor:pointer;.ui-state-active{border:0;width:100%;font-weight:700;background-color:$foundation-duodenary;color:$foundation-primary}
}
}
.ui-menu .ui-menu-item-wrapper{position:relative;padding:3px 1em 3px .4em}
.saml-login{display:none;position:fixed;z-index:12;left:0;top:0;width:100vw;height:100vh;overflow:hidden;background-color:rgba($foundation-primary,0.4);.saml-modal{background-color:$base;padding:48px;width:426px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-block;z-index:1;@media only screen and (max-width:$tablet){width:335px}
h3{margin-bottom:20px;@media only screen and (max-width:$tablet){margin-bottom:10px}
}
&__description{font-size:$font-m;line-height:23px;@media only screen and (max-width:$tablet){font-size:13px;line-height:22px}
}
.cui-icon{color:$brand-primary}
iframe{padding-top:20px;width:100%;height:345px;border:0;outline:0;@media only screen and (max-width:$tablet){height:297px;padding-top:10px}
}
.closeSamlBtn{position:absolute;right:28px;top:25px;cursor:pointer}
.cui-text-link{color:$brand-primary;margin:0;font-weight:bold;font-size:$font-m;line-height:26px}
.cui-text--md{font-size:$font-m;line-height:26px;margin-top:5px}
}
}
.globalNewNavigation{@media print{-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;background-color:unset;&.scrollable{top:0 !important}
#dismiss-notification{display:none}
.nav__topline,.separator--nav{display:none}
.nav__main{width:100%;margin:0;border-bottom:1px solid $border-secondary;padding:.5px 0;.nav__search{display:none}
.nav__main_tabs{.hamburger__menu_wrapper{display:none}
}
}
}
}
.separator{width:80%;height:5px;margin:0 auto;&.pioneer{background:#ef6023}
&.corteva{background:#00dc78}
&.brevant{background:#f47c06}
}
.map-info-box-data{display:none}
#myMap{position:relative;width:80%;height:700px;margin:0 auto;.MicrosoftMap{.Infobox{width:225px;background:white;font-family:$body-font;border-radius:0;border:0;.infobox-close{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/corteva-close.svg') no-repeat;width:20px;height:20px;background-position:-2px;img{display:none}
}
.infobox-body{max-height:160px !important;.infobox-info{height:auto;max-height:80px !important;padding-top:0;.locations-list{display:block;list-style-type:none;padding:0;.location{margin:10px 0;.location-title{margin:0;font-family:$body-font;font-size:12px !important;font-weight:bold;color:#0072ce;line-height:20px}
.location-subTitle{margin:0;font-size:12px !important;line-height:20px}
}
&.corteva{h4{.close-infobox{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/corteva-close.svg') no-repeat}
}
.location{.location-title{color:#0072ce !important}
.get-directions{color:#0072ce !important}
}
}
&.pioneer{h4{.close-infobox{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/pioneer-close.svg') no-repeat}
}
.location{.location-title{color:#ef6023 !important}
.get-directions{color:#ef6023 !important}
}
}
&.brevant{h4{.close-infobox{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/brevant-close.svg') no-repeat}
}
.location{.location-title{color:#750d2b !important}
.get-directions{color:#750d2b !important}
}
}
}
}
.infobox-actions{border:0;height:35px;position:relative;top:-5px;left:-2px;.infobox-actions-list{li{a{color:#0072ce !important}
}
}
}
}
}
}
&.corteva{.MicrosoftMap{.Infobox{.infobox-close{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/corteva-close.svg') no-repeat}
.infobox-body{.infobox-actions{.infobox-actions-list{li{a{color:#0072ce !important}
}
}
}
}
}
}
}
&.pioneer{.MicrosoftMap{.Infobox{.infobox-close{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/pioneer-close.svg') no-repeat}
.infobox-body{.infobox-actions{.infobox-actions-list{li{a{color:#ef6023 !important}
}
}
}
}
}
}
}
&.brevant{.MicrosoftMap{.Infobox{.infobox-close{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/brevant-close.svg') no-repeat}
.infobox-actions{.infobox-actions-list{li{a{color:#750d2b !important}
}
}
}
}
}
}
}
#map-legend{position:relative;width:80%;height:50px;margin:0 auto;background:lightgrey;display:flex;align-items:center;justify-content:flex-start;.title{width:5%;margin:0 30px;font-weight:bold;pointer-events:none;min-width:60px;#arrow-icon{width:20px;height:20px;display:none}
}
#legend-list{width:80%;list-style-type:none;display:flex;justify-content:flex-start;margin:0;height:100%;align-items:center;.legend{width:25%;max-width:150px;display:flex;align-items:center;font-family:$body-font;font-size:12px;.pin-icon{display:block;width:20px;height:24px;margin-right:10px;&.primaryColor{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/insecticide.svg') no-repeat}
&.secondaryColor1{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/fungicide.svg') no-repeat}
&.secondaryColor2{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/nitrogen-stabilizer.svg') no-repeat}
&.secondaryColor3{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/herbicide.svg') no-repeat}
&.secondaryColor4{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/nematicide.svg') no-repeat}
&.secondaryColor5{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/seed-treatment.svg') no-repeat}
&.secondaryColor6{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/other.svg') no-repeat}
}
}
&.pioneer{.legend{.pin-icon{&.primaryColor{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/green-pin.svg') no-repeat}
&.secondaryColor1{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/orange-pin.svg') no-repeat}
&.secondaryColor2{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/Dark-Green.svg') no-repeat}
&.secondaryColor3{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/grey-pin.svg') no-repeat}
&.secondaryColor4{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/green-pin.svg') no-repeat}
&.secondaryColor5{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/green-pin.svg') no-repeat}
&.secondaryColor6{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/green-pin.svg') no-repeat}
}
}
}
&.brevant{.legend{.pin-icon{&.primaryColor{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/Brevant-Brown.svg') no-repeat}
&.secondaryColor1{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/brevant-Light-Brown.svg') no-repeat}
&.secondaryColor2{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/light-organe.svg') no-repeat}
&.secondaryColor3{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/grey-pin.svg') no-repeat}
&.secondaryColor4{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/Brevant-Brown.svg') no-repeat}
&.secondaryColor5{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/Brevant-Brown.svg') no-repeat}
&.secondaryColor6{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/Brevant-Brown.svg') no-repeat}
}
}
}
}
}
.map-caption{position:relative;width:80%;margin:20px auto;.title{font-weight:bold}
}
#MicrosoftNav{#ZoomInButton{border-radius:4px 4px 0 0;background-color:#fff;border:0;margin:0;background-image:none;box-shadow:0 2px 4px 0 grey;margin-top:20px;.NavButton_Icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTAgMGgxNnYxNkgweiIvPjxwYXRoIGQ9Ik0xNCA3SDlWMmExIDEgMCAwIDAtMiAwdjVIMmExIDEgMCAwIDAgMCAyaDV2NWExIDEgMCAwIDAgMiAwVjloNWExIDEgMCAwIDAgMC0yeiIgZmlsbD0iIzc2NzY3NiIvPjwvZz48L3N2Zz4=);height:20px;width:20px;margin:10px auto;border-radius:4px;background-size:contain;background-position:center;background-repeat:no-repeat}
&:hover{box-shadow:0 2px 4px 1px rgba(0,0,0,0.14)}
}
#ZoomOutButton{border-radius:0 0 4px 4px;background-color:#fff;border:0;margin:0;background-image:none;box-shadow:0 2px 4px 0 grey;.NavButton_Icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0IDdIMmExIDEgMCAwIDAgMCAyaDEyYTEgMSAwIDAgMCAwLTJ6IiBmaWxsPSIjNzY3Njc2Ii8+PC9zdmc+);height:20px;width:20px;margin:10px auto;border-radius:4px;background-size:contain;background-position:center;background-repeat:no-repeat}
&:hover{box-shadow:0 2px 4px 1px rgba(0,0,0,0.14)}
}
.bm_LocateMeControl{display:none}
}
@media all and (max-width:600px){#map-legend{cursor:pointer;flex-direction:column;&.open{height:auto}
.title{display:flex;width:100%;padding-left:20px;margin:10px 0;color:#0072ce;font-size:14px;pointer-events:all;#arrow-icon{display:inline-block;position:relative;top:-1px;&.up{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/upward-arrow.svg') no-repeat}
&.down{background:url('../../../../content/dam/dpagco/pioneer/na/us/en/global-images/MapComponent/downward-arrow.svg') no-repeat}
}
}
#legend-list{display:none;width:100%;padding-left:10px;&.visible{display:block !important}
.legend{width:40%;float:left;margin:10px;font-family:$body-font;font-size:12px;max-width:100px}
}
}
}
.regulatory-info-wrapper{margin-bottom:15px;h2{padding-bottom:30px;font-weight:800;@media only screen and (max-width:$tablet){padding-bottom:20px;font-size:32px;line-height:1.19}
}
.hazard-pictograms{@media only screen and (min-width:$desktop){padding-bottom:6px}
ul{display:flex;flex-wrap:wrap;li{padding-right:24px;padding-bottom:20px;@media only screen and (min-width:$desktop){padding-bottom:24px}
img{height:96px;width:auto;display:block}
}
}
}
.statements{padding-bottom:35px;@media only screen and (max-width:$tablet){padding-bottom:20px}
.heading{font-weight:bold;line-height:1.88;@media only screen and (max-width:$tablet){line-height:normal;font-size:14px}
}
ul{line-height:30px;@media only screen and (max-width:$tablet){line-height:normal;font-size:14px}
}
}
}
.pdp-characteristics-chart{padding-top:50px;@media only screen and (max-width:$tablet){padding:10vw}
&__main-wrapper{display:flex;max-width:850px;margin:auto;flex-direction:column;align-items:center}
&__chart-title-wrapper{margin:0 auto;width:100%}
&__chart-title{font-size:$heading-m;text-align:center;@media only screen and (max-width:$mobile){text-align:left;font-size:$heading-s}
}
// ** START of navigation select2 styles &__chart-categories{margin:30px auto;width:100%;text-align:center;span.select2,.pdp-characteristics-chart__dropdown{display:none}
@media only screen and (max-width:$mobile){text-align:left;margin:20px auto;span.select2,.pdp-characteristics-chart__dropdown{display:inline-block;width:250px !important;.select2-selection,select{font-size:$font-s;background-color:$chart-primary-nav-color;color:$base;border:0}
.select2-selection__rendered,option{font-size:$font-s;color:inherit;font-weight:normal;line-height:1.625rem}
.select2-selection[aria-expanded="true"] .select2-selection__arrow b{background:url("../../../../apps/corteva/components/content/pdpPimComponents/characteristicsChart/v1/characteristicsChart/clientlib/vectors/white-carot.svg") center center no-repeat;transform:translateY(-50%) rotate(90deg)}
.select2-selection__arrow b{background:url("../../../../apps/corteva/components/content/pdpPimComponents/characteristicsChart/v1/characteristicsChart/clientlib/vectors/white-carot.svg") center center no-repeat;transform:translateY(-50%) rotate(270deg)}
}
span.select2-container .select2-results li{font-size:$font-s;font-weight:$bold-font-weight;border:0;color:$chart-primary-nav-color}
}
}
&__score-buttons-wrapper{display:inline-flex;width:max-content;@media only screen and (max-width:$mobile){display:none}
}
&__score-button{padding:5px 20px;height:30px;font-size:$font-s;background-color:$chart-primary-nav-color;color:$base;&:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}
&:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px}
&:focus{background-color:$chart-primary-graph-color;outline-style:solid;outline-color:$chart-input-focus;outline-width:2px;outline-offset:-2px}
&:hover,&.active_button{background-color:$chart-nav-hover}
}
// ** END of navigation menu/dropdown styles // ** START OF SCORES STYLES &__scores-wrapper{width:100%}
&__chart-scores{width:100%;display:flex;flex-direction:row;place-content:center;margin-bottom:50px;@media only screen and (max-width:$tablet){flex-direction:column}
}
&__print-title{display:none}
&__print-wrapper{width:100%;display:flex;place-content:center;@media only screen and (max-width:$tablet){flex-direction:column}
}
// ** END OF SCORES STYLES // ** START OF GRAPH BAR STYLES(Left Container) &__bar-graph{display:flex;flex-direction:column;width:70%;min-width:65%;padding:0 10px;height:fit-content;padding-right:45px;&:only-child{padding-right:0}
@media only screen and (max-width:$tablet){padding:0;margin:0 auto;margin-bottom:20px}
@media only screen and (max-width:$mobile){padding:0;margin-bottom:20px;width:100%}
}
&__graph-wrapper{display:flex;padding:10px 0;width:100%;align-self:center;&:first-child{padding-top:0}
}
&__graph-label{width:50%;padding-right:5px;font-family:$body-font;@media only screen and (max-width:$tablet){font-size:$font-m}
}
&__graph-container{width:100%;display:flex}
&__graph-image{display:contents;span{width:10%;height:20px;margin:auto 0;background-color:$chart-primary-graph-color;@for $i from 1 through 9{&:nth-child(#{$i}
){opacity:calc(0.1 * #{$i})}
}
}
}
&__graph-value{align-self:center;padding-left:10px;font-size:$font-sm;color:$chart-primary-nav-color}
// ** END OF GRAPH BAR STYLES(Left Container) // ** START OF LIST CHART STYLES(Right Container) &__chart-list{min-width:35%;width:65%;padding-left:45px;border-left:1px solid $foundation-primary;&:only-child{padding:0;border-left:0}
@media only screen and (max-width:$tablet){padding:0;border:0;width:70%;margin:0 auto}
@media only screen and (max-width:$mobile){padding:0;border:0;width:100%}
}
&__list-wrapper{display:flex;padding:10px 0;width:100%;align-items:center;border-bottom:2px solid $border-quaternary;&:first-child{padding-top:0}
@media only screen and (max-width:$tablet){margin:auto 0;border-bottom:0;border-top:1px solid $border-quaternary;&:first-child{padding-top:10px}
}
}
&__list-label{@media only screen and (max-width:$tablet){font-size:$font-m;font-family:$body-font}
}
&__list-value{width:50px;margin:0 auto;margin-right:0;font-weight:$bold-font-weight;@media only screen and (max-width:$tablet){text-align:right;font-size:$font-m}
}
// ** END OF LIST CHART STYLES(Right Container) @media print{margin-top:20px;margin-bottom:20px;padding-top:0 !important;&__main-wrapper{max-width:none}
&__chart-title{font-size:$font-large !important;margin-bottom:20px !important;text-align:left}
&__chart-categories{display:none !important}
&__chart-scores{display:flex !important;padding-bottom:30px;margin-bottom:0;&:last-child{.pdp-characteristics-chart__print-wrapper{border-bottom:0}
}
}
&__print-title{display:block !important;font-size:$font-l !important;font-weight:$bold-font-weight-8;text-align:left;width:20%}
&__print-wrapper{border-bottom:1px solid $border-secondary;width:100%;display:flex;padding-bottom:25px;margin-left:70px;place-content:start}
&__bar-graph{width:65%;min-width:unset;padding-left:0}
&__graph-value{font-size:$base-font;font-weight:$bold-font-weight}
&__chart-list{width:40%;min-width:unset;padding-left:55px;border-left:1px solid $border-secondary;&:only-child{border-left:0 !important}
}
&__list-wrapper{border:0}
}
}
.pdp-characteristics-chart{&.white{.pdp-characteristics-chart{&__score-button{background-color:$chart-primary-nav-color;&:focus{background-color:$chart-nav-hover;outline-color:$chart-input-focus}
&:hover,&.active_button{background-color:$chart-nav-hover}
}
&__chart-categories{@media only screen and (max-width:$mobile){span.select2{.select2-selection{background-color:$chart-primary-nav-color;color:$base}
}
&:focus{border:2px solid $chart-input-focus}
span.select2-container .select2-results li{color:$chart-primary-nav-color}
}
}
&__graph-image{span{background-color:$chart-primary-graph-color}
}
&__graph-value{color:$chart-primary-nav-color}
}
}
&.gray{background-color:#333333;.pdp-characteristics-chart{&__chart-title,&__graph-label,&__graph-value,&__list-label,&__list-value{color:$base}
&__score-button{background-color:$chart-primary-nav-color;&:focus{background-color:$chart-nav-hover;outline-color:$chart-input-focus}
&:hover,&.active_button{background-color:$chart-nav-hover}
}
&__chart-categories{@media only screen and (max-width:$mobile){span.select2{.select2-selection{background-color:$chart-primary-nav-color;color:$base}
}
&:focus{border:2px solid $chart-input-focus}
span.select2-container .select2-results li{color:$chart-primary-nav-color}
}
}
&__graph-image{span{background-color:$base}
}
&__chart-list{border-left:1px solid $base;&:only-child{border-left:0}
@media only screen and (max-width:$tablet){border:0}
}
}
}
&.maroon{background-color:$chart-maroon-graph-color;.pdp-characteristics-chart{&__chart-title,&__list-value,&__list-label,&__graph-value,&__graph-label{color:$base}
&__score-button{background-color:$chart-maroon-background-color;&:focus{background-color:$chart-maroon-hover;outline-color:$orange-input-focus}
&:hover,&.active_button{background-color:$chart-maroon-hover}
}
&__chart-categories{@media only screen and (max-width:$mobile){span.select2{.select2-selection{background-color:$chart-maroon-background-color;color:$base}
&:focus{border:2px solid $orange-input-focus}
}
span.select2-container .select2-results li{color:$chart-maroon-background-color}
}
}
&__graph-image{span{background-color:$base}
}
&__chart-list{border-left:1px solid $base;&:only-child{border-left:0}
@media only screen and (max-width:$tablet){border:0}
}
}
}
&.green{background-color:$chart-green-disclaimer;.pdp-characteristics-chart{&__chart-title,&__graph-label,&__graph-value,&__list-label,&__list-value{color:$base}
&__score-button{background-color:$chart-background-color;&:focus{background-color:$chart-green-disclaimer;outline-color:$green-input-focus}
&:hover,&.active_button{background-color:$chart-green-disclaimer}
}
&__chart-categories{@media only screen and (max-width:$mobile){span.select2{.select2-selection{background-color:$chart-background-color;color:$base}
}
&:focus{border:2px solid $green-input-focus}
span.select2-container .select2-results li{color:$chart-background-color}
}
}
&__graph-image{span{background-color:$base}
}
&__chart-list{border-left:1px solid $base;&:only-child{border-left:0}
@media only screen and (max-width:$tablet){border:0}
}
}
}
&.blue{background-color:$brand-primary;.pdp-characteristics-chart{&__chart-title,&__graph-label,&__graph-value,&__list-label,&__list-value{color:$base}
&__score-button{background-color:$chart-blue-background-color;&:focus{background-color:$chart-blue-disclaimer;outline-color:$blue-input-focus}
&:hover,&.active_button{background-color:$chart-blue-disclaimer}
}
&__chart-categories{@media only screen and (max-width:$mobile){span.select2{.select2-selection{background-color:$chart-blue-disclaimer;color:$base}
}
&:focus{border:2px solid $blue-input-focus}
span.select2-container .select2-results li{color:$chart-blue-background-color}
}
}
&__graph-image{span{background-color:$base}
}
&__chart-list{border-left:1px solid $base;&:only-child{border-left:0}
@media only screen and (max-width:$tablet){border:0}
}
}
}
@media print{&.white,&.gray,&.maroon,&.green,&.blue{background-color:$base;.pdp-characteristics-chart{&__chart-title,&__graph-label,&__list-label,&__list-value{color:$foundation-primary}
&__graph-image{span{background-color:$chart-primary-graph-color}
}
&__chart-list{border-left:1px solid $border-secondary}
}
}
}
}
.pdp-key-scores{margin:auto;max-width:$content-width;&__scores-wrapper{display:flex;flex-direction:row;flex-wrap:wrap}
&__score-title{font-family:$brand-font;font-size:$heading-m;font-weight:$bold-font-weight;margin-bottom:30px;@media only screen and (max-width:$mobile){font-size:$heading-s}
}
&__score-wrapper{display:flex;flex-direction:column;margin-right:53px;min-width:164px;padding-bottom:30px;@media only screen and (max-width:$mobile){margin-right:23px;min-width:40%}
}
&__score-name{font-size:$font-sm;font-weight:$bold-font-weight;font-family:$body-font;border-bottom:1px solid $border-secondary;width:100%}
&__score-value{color:$brand-primary;line-height:60px;font-weight:300;font-size:40px}
@media print{margin-top:20px;margin-bottom:20px;&__score-name{font-size:$font-l;border-bottom:0}
&__score-title{font-size:$font-large;margin-bottom:20px !important}
&__score-value{line-height:60px;font-size:36px}
}
}
.pim-product-intro{margin:auto;max-width:$content-width;.pim-intro-container{display:flex;margin:auto;flex-direction:row;@media only screen and (max-width:$tablet){flex-direction:column}
}
.product-detail{float:left;padding-right:25px;&:only-child{padding-right:0}
h2{font-family:$brand-font;font-size:$heading-m;font-weight:$bold-font-weight;margin-bottom:20px}
.key-position{font-family:$brand-font;font-size:$font-l;font-weight:$bold-font-weight;padding-bottom:10px;p{font-size:$font-l}
}
.product-description{font-family:$body-font;font-size:$base-font;padding-right:15px}
@media only screen and (max-width:$tablet){padding:0}
}
.pim-image-container{max-width:300px;float:right;@media only screen and (max-width:$tablet){margin:20px auto}
.pim-intro-image{object-fit:contain;box-shadow:2em 2em 2px $foundation-tertiary;margin-right:2.5em;width:300px;@media only screen and (max-width:$mobile){width:200px}
}
}
@media print{margin-top:20px;margin-bottom:20px;.pim-image-container{display:none}
h2{font-size:$font-large !important;margin-bottom:20px !important}
.key-position{padding-bottom:0 !important}
}
}
@media print{.globalNewNavigation,.productHeader,.navHeaderTabs,.keyScores,.hrTag,.productIntro,.characteristicsChart{display:block}
.globalNewNavigation.scrollable{position:relative}
.cmp-breadcrumb,.eloquaForm,.galleryVideoPlayer,footer{display:none}
.anchor-band:nth-child(odd){margin-top:50px}
}