header {
background: #63af00;
width: 100%;
}
header .top-header {
overflow: hidden;
padding: 0 15px;
}
header .main-menu {
overflow: visible !important;
}
header img {
width: 155.84px;
}
header {
height: auto;
}
.bsnovalue-error {
height: auto !important;
text-align: center;
color: #fff;
}
.account-details {
margin: 30px 15px 0 0;
}
.account-details span {
color: #fff;
font-size: 14px;
font-weight: bold;
}
.main-menu .menu-container {
background: #bada9a;
}
.main-menu .menu-container ul {
display: inline-block;
list-style: none;
padding: 10px 35px;
}
.main-menu .menu-container ul li a {
color: #000;
font-size: 14px;
margin: 0 20px 0 0;
text-decoration: none;
}
.main-menu .menu-container ul li a.active {
font-weight: bold;
}
.tab_content hr {
opacity: 0.3;
}
.page-title h1 {
font-weight: normal;
margin-top: 0;
}
.loader {
margin: 0 auto;
}
.loader-wrapper {
position: relative;
width: 284px;
}
.eupf-loader p {
position: absolute;
bottom: -20px;
color: #fff;
}
.menu-container .view-as-wrapper {
display: flex;
align-items: center;
float: right;
padding: 15px 0px;
}
.mtb-3.mb-0 {
margin-bottom: 0px !important;
}
@media only screen and (max-width: 767px) {
.menu-container .view-as-wrapper {
padding: 11px 0px;
}
.main-menu .menu-container ul {
padding: 0px 10px;
}
}
.main-menu .menu-container .view-list-con {
position: relative;
}
.main-menu .menu-container .view-list-con span {
margin: 0px 15px;
color: #8b9383;
cursor: pointer;
font-family: Roboto light;
font-weight: bold;
letter-spacing: 0.6px;
}
.main-menu .menu-container .view-list-con span span {
margin: 0px 3px;
color: #333;
font-size: 16px;
}
.main-menu .menu-container .view-list-con ul {
position: absolute;
width: 200px;
right: 0px;
top: 25px;
background: #fff;
z-index: 1;
display: none;
}
.main-menu .menu-container .view-list-con ul li a {
color: #989898;
}
.main-menu .menu-container .view-list-con ul li {
float: left;
width: 100%;
}
.menu-container .view-as-select {
background-color: transparent;
border: 0 none;
color: #8b9383;
}
.menu-container .view-as-select:focus-visible {
outline: 0 none;
}
.main-menu .menu-container .view-list-con ul {
border: 1px solid #cdcdcd;
padding: 0;
border-top-color: #8ec34a;
border-top-width: 2px;
}
.main-menu .menu-container .view-list-con ul li {
padding: 10px;
border-top: 1px solid #cdcdcd;
}
.main-menu .menu-container .view-list-con ul li:first-child {
border-top: 0 none;
}
.main-menu .menu-container .view-list-con ul li a {
display: block;
position: relative;
}
.main-menu .menu-container .view-list-con ul li.active a {
color: #8bc155;
}
.main-menu .menu-container .view-list-con ul li.active a:after {
content: "";
display: inline-block;
transform: rotate(45deg);
height: 9px;
width: 3px;
border-bottom: 2px solid #65ac1e;
border-right: 2px solid #65ac1e;
position: absolute;
right: -15px;
top: 3px;
}
.menu-container .view-as-wrapper label {
font-family: Roboto bold;
}
.account-details .header-contact {
margin-right: 50px;
}
.account-details .header-contact a {
text-decoration: none;
display: flex;
}
.account-details span.contact-us {
font-family: Roboto bold;
font-size: 16px;
font-weight: bold;
line-height: 1.13;
letter-spacing: -0.3px;
color: #fff;
text-align: right;
margin-right: 2px;
}
.account-details span.contact-icon {
position: relative;
}
.account-details span.contact-icon img {
width: auto;
height: auto;
margin: 0;
position: absolute;
left: 4px;
top: -5px;
}
.account-details .user-profile-dropdown {
z-index: 2;
}
.user-profile-dropdown .profile .user-name {
padding-bottom: 5px;
border-bottom: 0 none;
}
.user-profile-dropdown .profile ul {
border-bottom: 1px solid #dcdcdc;
}
.user-profile-dropdown .profile-details {
font-family: Roboto light;
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 22px;
text-align: center;
color: #333333;
}
.user-profile-dropdown .profile-details .profile-id {
text-transform: uppercase;
}
.user-profile-dropdown .profile ul li a {
font-size: 14px;
}
.user-profile-dropdown .profile ul li.menu_list a {
font-size: 16px;
}
@media screen and (max-width: 767px) {
.account-details span.contact-us,
.account-details .profile span.username {
display: none;
}
}
/*************/
#getsupportpopup {
display: none;
max-width: 100%;
}
.modal-content-inner-GS {
background: #fff;
padding: 30px;
width: 50%;
margin: 0 auto;
}
.termsAndConditionGS p b {
font-weight: bold;
}
.termsAndConditionGS p a {
color: darkblue;
}
.modal-content-inner-GS .close {
float: right;
}
.modal-content-inner-GS p {
line-height: 22px;
font-size: 18px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
/*@import url(../components/header/clientlibs/css/font-icomoon.css);*/
@import url(https://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
.enrollment-modal {
width: 100%;
max-width: 771px;
height: auto;
margin: 0 auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #dcdcdc;
background-color: #fff;
}
.enrollment-modal-content {
padding: 68px 104px;
}
.enrollment-modal-content .title {
font-family: "Roboto regular";
font-size: 36px;
font-weight: 300;
line-height: 1.06;
letter-spacing: -0.8px;
color: #333333;
margin-bottom: 31px;
text-align: left;
}
.enrollment-modal-content .form-group {
display: inline-block;
}
.enrollment-modal-content label {
text-align: left;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #333333;
display: flex;
margin-bottom: 6px;
margin-bottom: 10px;
display: block;
}
.enrollment-modal-content input[type=text] {
width: 100%;
margin-bottom: 24px;
padding: 15px;
background-color: #f0f0f0;
max-width: 268px;
width: 100%;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
outline: none;
border: 0px solid #8f8f8f;
border-top: 1px solid #a9a9a9;
}
.enrollment-modal-content input[type=text]:disabled {
background-color: #dcdcdc;
}
.enrollment-modal-content select {
width: 100%;
margin-bottom: 24px;
padding: 15px;
background-color: #f0f0f0;
max-width: 268px;
width: 100%;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
outline: none;
border: 0px solid #8f8f8f;
border-top: 1px solid #a9a9a9;
}
.enrollment-modal-content select option {
width: 352px;
height: 50px;
padding: 16px 15px;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
}
#enrolment.modal {
max-width: none;
}
.modal {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
* {
box-sizing: border-box;
}
.enrollment-modal .row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
margin: 0 -10px;
}
.enrollment-modal .col-25 {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
}
.enrollment-modal .col-50 {
-ms-flex: 50%;
/* IE10 */
flex: 50%;
}
.enrollment-modal .col-75 {
-ms-flex: 75%;
/* IE10 */
flex: 75%;
}
.enrollment-modal .col-25,
.enrollment-modal .col-50,
.enrollment-modal .col-75 {
padding: 0 10px;
}
.enrollment-modal .col-100{
padding: 0 10px;
flex: 100%;
}
.enrollment-modal .btn {
max-width: 126px;
height: 50px;
font-family: "Roboto regular";
font-size: 16px;
font-weight: bold;
line-height: 1.13;
letter-spacing: -0.3px;
text-align: center;
padding: 15px;
margin: 10px 15px 10px 0;
border: none;
width: 100%;
cursor: pointer;
outline: none;
}
.btn-continue {
background-color: #65ac1e;
color: #fff;
}
.btn-cancel {
background-color: #fff;
color: #65ac1e;
}
.enrollment-modal .dropdown {
position: relative;
}
a {
color: #fff;
}
.enrollment-modal .dropdown dd,
.enrollment-modal .dropdown dt {
margin: 0px;
padding: 0px;
}
.enrollment-modal .dropdown dt {
display: inline-block;
width: 268px;
}
.enrollment-modal .dropdown ul {
margin: -1px 0 0 0;
}
.enrollment-modal .dropdown {
margin: 0;
}
.dropdown dd {
position: relative;
}
.enrollment-modal .dropdown a,
.enrollment-modal .dropdown a:visited {
color: #7c7c7c;
text-decoration: none;
outline: none;
width: 100%;
margin-bottom: 24px;
padding: 15px;
background-color: #f0f0f0;
max-width: 268px;
width: 100%;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
outline: none;
border: 0px solid #8f8f8f;
border-top: 1px solid #a9a9a9;
}
.enrollment-modal .dropdown dt a {
background-color: #f0f0f0;
display: inline-block;
line-height: 1.13;
min-height: 25px;
overflow: hidden;
width: 272px;
}
.enrollment-modal .dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.enrollment-modal .dropdown dd ul {
background-color: #fff;
max-width: 268px;
width: 100%;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
outline: none;
border: 1px solid #dcdcdc;
display: none;
left: 0px;
padding: 0;
position: absolute;
top: -27px;
list-style: none;
height: 200px;
overflow: auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.enrollment-modal .dropdown span.value {
display: none;
}
.enrollment-modal .dropdown dd ul li a {
padding: 5px;
display: block;
}
.enrollment-modal .dropdown dd ul li a:hover {
background-color: #fff;
}
/***** CUSTOM CHECKBOX STYLES *****/
.enrollment-modal .checkbox {
display: block;
padding: 15px;
border: 1px solid #dcdcdc;
}
.enrollment-modal .checkbox input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.enrollment-modal .checkbox label {
position: relative;
color: #7c7c7c;
cursor: pointer;
margin-bottom: 0;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
}
.enrollment-modal .checkbox label:before {
content: '';
-webkit-appearance: none;
background-color: #F0f0f0;
border: 1px solid #7c7c7c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
width: 20px;
height: 20px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}
.enrollment-modal .checkbox input:checked+label:after {
content: '';
display: block;
position: absolute;
top: 3px;
left: 9px;
width: 4px;
height: 12px;
border: solid #252626;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/*
@media (max-width: 800px) {
.enrollment-modal .row {
flex-direction: column-reverse;
}
.enrollment-modal .col-25 {
margin-bottom: 20px;
}
}
.arrow-intrest{
float: right;
font-size: 9px;
}
*/
span.close-btn {
width: 25.5px;
height: 25.5px;
text-align: center;
font-size: 20px;
margin-top: -45px;
margin-right: -50px;
float: right;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.enrollment-modal{
height: auto;
}
span.close-btn{
margin-right: -20px;
margin-top: -16px;
}
.enrollment-modal-content {
padding: 56px 24px;
}
.enrollment-modal-content .title{
font-size: 22px;
line-height: 1.18;
}
.enrollment-modal .col-50{
flex: 100%;
}
.enrollment-modal-content input[type=text]{
width: 100%;
max-width: 100%;
}
.enrollment-modal .btn{
max-width: 100%;
}
.enrollment-modal .dropdown dt {
width: 100%;
}
.enrollment-modal .dropdown dt a {
width: 100%;
max-width: 100%;
}
}
.dropdown {
position: relative;
}
a {
color: #fff;
}
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown dt {
display: inline-block;
width: 268px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown {
margin: 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #7c7c7c;
text-decoration: none;
outline: none;
width: 100%;
margin-bottom: 24px;
padding: 15px;
background-color: #f0f0f0;
max-width: 268px;
width: 100%;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
outline: none;
border: 0px solid #8f8f8f;
border-top: 1px solid #a9a9a9;
}
.dropdown dt a {
background-color: #f0f0f0;
display: inline-block;
line-height: 1.13;
min-height: 25px;
overflow: hidden;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #fff;
max-width: 268px;
width: 100%;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
outline: none;
border: 1px solid #dcdcdc;
display: none;
left: 0px;
padding: 0;
position: absolute;
top: -27px;
list-style: none;
height: 200px;
overflow: auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
/**********heading**********/
h1{
font-size: 2.25rem;
letter-spacing: -0.08px;
line-height: 2.375rem;
}
/********header***********/
.dc-center{
margin:0 auto;
max-width:1200px;
}
.dc-flex{
display:flex;
}
.dc-justifycontent{
justify-content: space-between;
}
header{
width:100%;
display:flex;
flex-direction: column;
}
header .header-top{
background-color: var(--brand-color);
min-height:60px;
}
header .header-top .log-text{
width: 190px;
line-height:30px;
font-weight: 600;
font-size: 22px;
color:var(--white);
padding: 14px 12px 14px 12px;
margin-left:12px;
}
header .header-top .main-logo{
max-width: 100%;
height: 5rem;
position: relative;
}
header .header-bottom .dc-home{
padding-left: 30px;
position: relative;
color: var(--black);
display: inline-block;
text-decoration: none;
font-weight: 600;
margin: 22px 1.375rem;
}
header .header-bottom .dc-home::before{
content: url('data:image/svg+xml;charset=utf-8,');
display: inline-block;
position: absolute;
top: -4px;
left: 0;
width: 25px;
height: 25px;
}
header .header-bottom{
min-height:60px;
background-color: var(--white);
font-weight: 600;
z-index:9;
}
header .header-bottom .header-bottom-right{
display:flex;
align-items: center;
}
header .header-bottom .header-bottom-right .getsupport{
display: flex;
align-items: center;
margin-right:30px;
}
header .header-bottom .header-bottom-right .getsupport a{
color: #333;
text-decoration: none;
display: flex;
align-items: center;
}
header .header-bottom .header-bottom-right .getsupport span{
margin-right:10px;
}
header .header-bottom .header-bottom-right .login-name{
display: flex;
align-items: center;
margin-right:30px;
cursor: pointer;
}
header .header-bottom .header-bottom-right .login-name span{
margin-left:5px;
border-radius:20px;
padding: 7px 5px;
border: 1.5px solid #000;
width: 30px;
height: 30px;
}
header .slide-out-content{
z-index:9;
position: fixed;
display: block;
background-color: var(--black);
color: var(--white);
right: -100vw;
top: 0;
transition: opacity 250ms ease-in, right 0ms ease 250ms;
opacity: 0;
width: 360px;
height: 100vh;
padding: 2rem 0 2rem 2rem;
}
header .slide-out-content.open{
opacity: 1;
transition: right 500ms ease-out;
right: 0;
}
.spacer{
padding:10px 0px;
float: left;
width: 100%;
}
header .viewgroup{
color: var(--white);
font-weight:600;
padding-top:10px;
padding-bottom: 10px;
}
header .slide-out-content header{
max-width: 100%;
position: relative;
display: flex;
padding-right: 2rem;
flex-direction: row;
justify-content: space-between;
background:none;
margin-bottom:2rem;
}
header .slide-out-content button.close-btn{
font-size: 1.25rem;
font-weight: normal;
position: relative;
top: 0;
padding: 20px 0;
margin: 0;
border: none;
background: transparent;
color: var(--white);
cursor: pointer;
font-family: "Roboto condensed";
}
.icon-style.close-new::before {
font-family: "BASFIconFontNewStyle";
content: "\e911";
font-size:13px;
}
.slide-out-content header .logo img {
width: 160px;
height: auto;
margin: 0;
}
.slide-out-content section {
display: block;
clear: both;
margin: 0 auto;
max-width: 100%;
height: calc(100% - 100px);
overflow: auto;
padding-right: 2rem;
scrollbar-width: thin;
scrollbar-color: var(--brand-color) var(--black);
color: var(--white);
}
.slide-out-content section h1{
margin-bottom: 1.875rem;
font-size: 2rem;
letter-spacing: -0.08px;
line-height: 2.375rem;
font-family: "Roboto condensed";
}
.basf-modal-wrap .radio-group{
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.basf-modal-wrap .radio-group .radio-wrapper {
display: flex;
flex-direction: row;
margin-right: 1rem;
}
.basf-modal-wrap .input-wrapper {
position: relative;
float: left;
}
.basf-modal-wrap label {
font-weight: bold;
margin-bottom: 0.625rem;
display: block;
font-size: 1rem;
color: #fff;
line-height: 1;
}
.basf-modal-wrap input.radio {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
-webkit-appearance: none;
background-color: transparent;
border: 0;
width: 1.125rem;
height: 1.125rem;
}
.input-wrapper input:checked~.input-radio::before {
border-color: var(--dark-grey);
}
.basf-modal-wrap .input-wrapper .input-radio {
width: auto;
float: left;
margin: 0 0.625rem 0.625rem 0;
position: relative;
-webkit-appearance: none;
background-color: transparent;
border: 0;
padding: 0.625rem;
clear: left;
pointer-events: none;
}
.basf-modal-wrap .input-wrapper .input-radio::before {
content: "";
background-color: var(--box-grey);
display: inline-block;
width: 1rem;
height: 1rem;
top: 0;
left: 0;
position: absolute;
vertical-align: top;
border-radius: 50%;
border: 2px solid var(--dark-grey);
box-sizing: content-box;
border-color: var(--dark-grey);
}
.basf-modal-wrap .input-wrapper input:checked~.input-radio::after {
content: "";
height: 0.7rem;
width: 0.7rem;
border-radius: 50%;
background-color: var(--brand-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.basf-modal-wrap .input-wrapper label .input-radio+span {
display: block;
padding-left: 30px;
}
.basf-modal-wrap .primary-btn{
padding: 1rem 2.375rem;
background: var(--brand-color);
display: block;
border: 0;
font-family: "Helvetica Neue Bold", Helvetica, Arial;
color: var(--white);
font-size: 1rem;
cursor: pointer;
width:100%;
margin-top:30px;
margin-bottom:30px;
}
.basf-modal-wrap a{
color: var(--white);
font-weight:600;
text-decoration: none;
display:block;
margin-top:20px;
margin-bottom:20px;
}
.slide-out-content section::-webkit-scrollbar {
width: 10px;
}
.slide-out-content section::-webkit-scrollbar-thumb {
background-color: var(--brand-color);
border-radius: 5px;
border: 1 solid var(--black);
}
.slide-out-content section::-webkit-scrollbar-track {
background: var(--black);
}
.group-wrapper{
margin-top:10px;
margin-bottom:10px;
display:block;
}
.group-wrapper .input-wrapper{
width:100%;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
.group-wrapper label{
margin-right:20px;
}
.group-wrapper label span{
line-height:20px;
}
hr.separator {
display: block;
border: 1px solid #ffffff;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
}
/**************error messages*******/
#response-error-msg{
display:none;
}
.response-error-msg-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.response-error-msg-inner {
background: #f0f0f0;
display: block;
padding: 40px 30px;
}
.response-error-msg-inner span.text {
color: red;
font-size: 20px;
}
.response-error-msg-inner span.refresh-button {
background-color: #65AC1E;
color: #fff;
font-size: 18px;
padding: 15px 35px;
letter-spacing: 1px;
text-transform: capitalize;
cursor: pointer;
margin: 0 10px;
}
.response-error-msg-inner span.close-button {
color: red;
font-size: 24px;
cursor: pointer;
}
/*Registration Form CSS*/
.basf-eop-register {
box-sizing: border-box;
background: #f0f0f0;
width: 100%;
padding: 40px 0;
font-family: inherit;
height: auto;
}
.basf-eop-register .page-title h1 {
font-family: Roboto light;
font-size: 36px;
font-weight: 300;
line-height: 1.06;
letter-spacing: -0.8px;
color: #333333;
}
.basf-eop-register .page-title p {
font-family: Roboto light;
font-size: 16px;
font-weight: 300;
line-height: 2.38;
letter-spacing: -0.36px;
color: #333333;
}
.basf-eop-register #api {
width: 80%;
margin: 0 auto;
}
.btn-block {
margin: 30px 0 20px;
}
.contact-blk {
box-sizing: border-box;
padding: 0 1%;
}
.basf-eop-register label {
font-family: Roboto light;
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #333333;
text-transform: capitalize;
}
input[type='text'] {
box-sizing: border-box;
font-size: 16px;
padding: 15px 15px;
width: 100%;
border: 0px solid #8f8f8f;
border-top: 1px solid #a9a9a9;
background: #f0f0f0;
margin-top: 5px;
font-family: Roboto light;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
}
form select {
box-sizing: border-box;
font-size: 16px;
padding: 15px 15px;
width: 100%;
border: 0px solid #8f8f8f;
border-top: 1px solid #a9a9a9;
background: #f0f0f0;
color: #7c7c7c;
margin-top: 5px;
outline: none;
}
select.profile-type-select {
width: 200px;
height: 50px;
background-color: #ffffff;
font-family: Roboto light;
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
border: 0px solid #8f8f8f;
border-top: 1px solid #a3a3a3;
padding: 16px 15px;
text-align: center;
outline: none;
appearance: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none;
}
form select {
background: #f0f0f0;
appearance: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none;
cursor: pointer;
}
button {
font-family: Roboto bold;
font-size: 16px;
color: #fff;
background-color: #63af00;
border-radius: 0px;
border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 18px;
padding: 12px 22px;
}
.registerbtn {
background-color: #63af00;
font-family: Roboto bold;
font-size: 16px;
font-weight: bold;
padding: 16px 29.5px;
line-height: 1.13;
letter-spacing: -0.3px;
text-align: center;
color: #ffffff;
outline: none;
}
.contact-blk {
margin-top: 50px;
}
.contact-blk .reg-pref-text {
font-family: Roboto light;
font-size: 22px;
font-weight: 300;
line-height: 1.18;
color: #333;
margin: 10px 0 36px 0;
border-bottom: 1px solid #a3a3a3;
padding-bottom: 10px;
}
.contact-blk span {
font-family: Roboto light;
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #333;
}
form .error-element select {
background: #fae5e8 !important;
border-color: #d20c25 !important;
}
.mtb-1.error-element{
position: relative;
}
.basf-eop-register form .error-element label.error-element::after {
content: '';
background-image: url(https://usb2cextstorage.blob.core.windows.net/basf-eupf/resources/images/icon-error-white.png?sp=r&st=2021-02-17T08:42:22Z&se=2027-02-17T16:42:22Z&spr=https&sv=2020-02-10&sr=b&sig=egFqOLP58mjPrABedGHLCYY3prubBYaZnZFBjwiKmYU%3D);
position: absolute;
width: 24px;
height: 24px;
top: 35px;
right: 20px;
}
form .error-element input::placeholder {
color: #d0021b;
opacity: 1; /* Firefox */
}
form .error-element input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #d0021b;
}
form .error-element input::-ms-input-placeholder { /* Microsoft Edge */
color: #d0021b;
}
form .error-element select{
color: #d0021b;
}
form .error-element label.error-element{
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
text-transform: none;
}
form .success .error-element:after{
background:none;
}
.checkbox-container .leagal-review label{
line-height: 1.5;
color: #333;
}
.checkbox-container .leagal-review label a{
color: #21a0d2;
}
.checkbox-container #legalErrorBox{
margin-top: 10px;
margin-left: 40px;
}
.checkbox-container #legalErrorBox label#leagalreview-error{
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
text-transform: none;
color: rgb(208, 2, 27) !important;
}
/***** CUSTOM CHECKBOX STYLES *****/
.checkbox-container .checkbox {
display: inline-block;
margin-right: 50px;
}
.checkbox-container .checkbox input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.checkbox-container .checkbox label {
position: relative;
color: #333333;
cursor: pointer;
margin-bottom: 0;
font-family: Roboto light;
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
}
.checkbox-container .checkbox label:before {
content: '';
appearance: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none;
background-color: #F0f0f0;
border-top: 1px solid #7c7c7c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
width: 18px;
height: 18px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}
.checkbox-container .checkbox input:checked+label:after {
content: '';
display: block;
position: absolute;
top: 2px;
left: 10px;
width: 3px;
height: 10px;
border: solid #252626;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
form .col, #profile-type {
position:relative;
}
form span.aerow-down {
position: absolute;
padding: 4px;
top: 40px;
right: 10px;
border-style: solid;
border-color: #333;
pointer-events: none;
cursor: pointer;
border-width: 0px 2px 2px 0px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
form .error-element span.aerow-down {
border-color: #d0021b;
}
#profile-type span.aerow-down{
position: absolute;
padding: 4px;
top: 20px;
right: 10px;
border-style: solid;
border-color: #333;
pointer-events: none;
border-width: 0px 2px 2px 0px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
cursor: pointer;
}
.mobile-optional.error-element label:first-child:after{
content: " *";
color: #d0021b;
}
.country-select{
width: 98%;
margin: 0 1%;
}
.country-select input#country{
width: 100%;
display: flex;
}
/* course type checkbox dropdown */
.dropdown.course-type {
position: relative;
}
.dropdown.course-type dd,
.dropdown.course-type dt {
margin: 0px;
padding: 0px;
}
.dropdown.course-type dt {
display: inline-block;
width: 100%;
}
.dropdown.course-type ul {
margin: -1px 0 0 0;
}
.dropdown.course-type {
margin: 0;
}
.dropdown.course-type dd {
position: relative;
}
.dropdown.course-type a,
.dropdown.course-type a:visited {
color: #7c7c7c;
text-decoration: none;
outline: none;
width: 100%;
max-width: 100%;
margin-bottom: 24px;
padding: 15px;
background-color: #f0f0f0;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
outline: none;
border: 0px solid #8f8f8f;
border-top: 1px solid #a9a9a9;
}
.dropdown.course-type dt a {
background-color: #f0f0f0;
display: inline-block;
line-height: 1.13;
min-height: 25px;
overflow: hidden;
width: 100%;
}
.dropdown.course-type dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown.course-type dd ul {
background-color: #fff;
width: 100%;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
outline: none;
border: 1px solid #dcdcdc;
display: none;
left: 0px;
padding: 0;
position: absolute;
top: -27px;
list-style: none;
height: 200px;
overflow: auto;
z-index: 1;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
max-width:100%;
}
.dropdown.course-type span.value {
display: none;
}
.dropdown.course-type dd ul li a {
padding: 5px;
display: block;
}
.dropdown.course-type dd ul li a:hover {
background-color: #fff;
}
.mutliSelect .checkbox {
display: block;
padding: 15px;
border: 1px solid #dcdcdc;
}
.mutliSelect .checkbox input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.mutliSelect .checkbox label {
position: relative;
color: #7c7c7c;
cursor: pointer;
margin-bottom: 0;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
}
.mutliSelect .checkbox label:before {
content: '';
-webkit-appearance: none;
background-color: #F0f0f0;
border: 1px solid #7c7c7c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
width: 20px;
height: 20px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}
.mutliSelect .checkbox input:checked+label:after {
content: '';
display: block;
position: absolute;
top: 3px;
left: 9px;
width: 4px;
height: 12px;
border: solid #252626;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.update-pwdlink a {
font-size: 15px;
line-height: 1.2;
letter-spacing: -0.28px;
color: #65ac1e;
text-decoration: none;
cursor: pointer;
display: inline-block;
margin-top: 15px;
}
.show-desktop {
display: block;
}
.hide-desktop {
display: none;
}
#profile-type{
display: flex;
flex-direction: column;
}
.leagal-review label{
display: flex;
}
.checkbox-container .leagal-review.checkbox {
margin-right: 0px;
}
.checkbox-container .leagal-review.checkbox label:before{
margin-right: 20px;
padding: 10px 12px 0 12px;
height: 10px;
width:AUTO;
}
.basf-eop-register {
margin-bottom: -80px;
}
/*mobile styles */
@media screen and (max-width: 767px) {
.modal.changeusertype-bg {
background: none!important;
top: -21px;
}
#enrolment.modal {
background: #ccc;
top: 0px;
padding-top: 0;
}
.global-error{
font-size: 13px;
height: auto!important;
}
.global-error span.form-error-text, .global-error span.global-success-msg{
padding-left: 24px;
margin-right: 20px;
width: 80%;
}
.global-error span.close-btn {
margin-right: 24px;
}
.basf-eop-register #api,
.eupf-landingpage-layout {
width: 85%;
}
.basf-eop-register #profile-type label {
font-family: "Roboto regular";
text-transform: initial;
}
.basf-eop-register .page-title h1 {
font-size: 22px;
line-height: 1.18;
}
.basf-eop-register .page-title p {
line-height: 1.13;
letter-spacing: -0.3px;
margin: 16px 0 29px 0;
}
.show-mobile {
display: block;
}
.hide-mobile {
display: none!important;
}
select.profile-type-select, #profile-type .nice-select.profile-type-select {
width: 100%!important;
margin: 10px 0 25px 0;
}
#profile-type {
width: 100%;
}
.newsevents #profile-type .rememberme.checkbox {
margin-top: -15px;
}
.newsevents #profile-type .nice-select.profile-type-select{
margin-top: -160px;
max-width: 100%;
}
.newsevents .eupf-landingpage-layout .eupf-landingpage-heading h1{
padding-top: 160px;
}
.newsevents label.usertype-mobile {
display: inline-block;
position: absolute;
top: -190px;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
}
.tab_container {
width: auto!important;
/*margin-left: -32px;
margin-right: -28px;*/
}
.country-select input#country {
width: 100%;
}
.registerbtn {
width: 100%;
}
.basf-eop-register .profile-header {
position: relative;
}
.basf-eop-register #profile-type {
position: absolute;
left:0;
top:0;
}
.eupf-tools-content-repeat img.banner-img{
width: 122px;
height: 122px;
margin-right: 20px;
}
.eupf-tools-content-repeat {
display: flex;
width: 100%;
border-top: solid 1px #333333;
padding-top: 30px;
}
.eupf-tools-content-repeat .basftools-wraper{
margin-right: 0px;
border-top: 0;
padding-top: 0;
padding-bottom: 0;
}
.eupf-tools-content-repeat .basftools-wraper .tooltitle{
margin-top: 20px;
margin-bottom: 40px;
font-size: 18px;
line-height: 1.22;
}
.eupf-tools-content-repeat .basftools-wraper .tools-description {
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
color: #333333;
}
.eupf-tools-content-repeat .basftools-wraper .gonow-link{
margin-top: 16px;
margin-bottom: 43px;
}
.eupf-landingpage-basftools p.subheading {
margin-bottom: 0;
padding-top: 0;
line-height: 1.2;
letter-spacing: -0.28px;
}
.eupf-landingpage-basftools{
padding: 40px 0 56px 0;
}
.news-event-selection .nice-select.segment-div{
font-size: 22px;
font-weight: 300;
line-height: 1.18;
min-width: 200px;
padding-left: 0;
}
.news-event-selection .nice-select.segment-div span.current{
margin-top: 10px;
display: inline-block;
}
}
@media screen and (min-width: 768px) and (max-width:768px){
.account-details span.username{
font-size: 13px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 350px;
}
.newsevents #profile-type {
width: 180px;
}
#enrolment.modal {
background: #ccc;
top: 0px;
padding-top: 0;
}
.eupf-landingpage-basftools p.subheading {
line-height: 1.2;
letter-spacing: -0.28px;
}
.eupf-landingpage-content {
margin-top: 0px;
}
}
@media screen and (min-width: 768px) and (max-width:1024px){
.pending p.popuptext {
width: 85%;
}
.basf-eop-register .profile-header {
position: relative;
}
.basf-eop-register .page-title {
padding-top: 60px;
}
.basf-eop-register #profile-type {
position: absolute;
right:0;
top:0;
}
.basf-eop-register #profile-type label {
font-family: "Roboto regular";
text-transform: initial;
float: left;
}
span.news-event-selection .aerow-down-green{
top: 12px;
}
.landing-left.news-section {
width: 100%;
}
.landing-right.events-section {
width: 50%;
}
.news-text-container .news-title {
font-size: 20px;
line-height: 1.3;
letter-spacing: -0.2px;
}
.news-text-container .news-description p {
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
}
.news-img-container img {
height: auto!important;
min-height: auto!important;
margin-left: 24px;
margin-top: 35px;
max-width: 200px;
}
.news-component {
background: #fff;
min-height: auto!important;
padding-bottom: 32px;
margin-bottom: 0 !important;
}
.eupf-landingpage-layout .eupf-landingpage-heading h1, .eupf-landingpage-layout .eupf-landingpage-heading .news-event-selection select {
font-size: 22px;
font-weight: 300;
line-height: 1.18;
}
.news-event-selection .nice-select.segment-div{
font-size: 22px;
font-weight: 300;
line-height: 1.18;
min-width: 200px;
}
.news-event-selection .nice-select.segment-div span.current{
margin-top: 0px;
display: inline-block;
}
.newsevents #profile-type{
display: flex;
flex-direction: column;
max-width: 200px;
width: 100%;
}
.eupf-landingpage-container .eupf-landingpage-layout .eupf-landingpage-heading h1{
float: left;
width: 100%;
margin-bottom: 20px;
}
}
@media screen and (min-width: 1024px) and (max-width:1024px){
#profile-type .nice-select.profile-type-select{
width: auto;
}
.newsevents #profile-type {
max-width: 260px;
}
.eupf-landingpage-content {
margin-top: 10px;
}
}
/*Footer*/
footer {
background: #DCDCDC;
}
.footer-container {
width: 80%;
margin: 0 auto;
}
.footer-container .acc__card h4.acc__title {
margin: 0 0 15px;
font-family: "Roboto regular";
font-size: 16px;
font-weight: bold;
line-height: 1.13;
letter-spacing: -0.3px;
color: #333333;
}
.footer-container li {
padding: 4px 0;
}
.footer-container li a {
text-decoration: none;
font-family: "Roboto regular";
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
color: #333333;
}
.footer-container img.footer-logo{
width: 186px;
height: 67px;
}
/*footer social icons */
.social-share{
display: block;
margin-top: 15px;
}
.social-share ul{
list-style-type: none;
}
.social-share ul li{
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
}
.social-share ul li a{
cursor:pointer;
}
.acc__card {
float: left;
}
.footer-container ul.col-lg-12.col-xs-12.mtb-1.acc__panel {
margin: 0 0;
}
@media screen and (max-width: 768px) {
.footer-container {
width: 85%;
}
.footer-container .col {
width: 100%;
}
.footer-container .mtb-5.footer-social {
margin: 0 0 50px 0!important;
}
.acc__card {
position: relative;
float: left;
margin: 0;
}
.acc__title::after {
width: 8px;
height: 8px;
border-right: 2px solid #333333;
border-bottom: 2px solid #333333;
position: absolute;
right: 10px;
content: " ";
top: 2px;
transform: rotate(45deg);
transition: all 0.2s ease-in-out;
}
.acc__title.active::after {
transform: rotate(-135deg);
transition: all 0.2s ease-in-out;
top: 8px;
}
.acc__panel {
display: none;
}
.footer-container img.footer-logo{
width: 155px;
height: 56px;
}
.social-share ul li{
width: 40px;
height: 40px;
}
.social-share ul li a{
width: 40px;
height: 40px;
display: flex;
flex-direction: row;
}
}
.get-support {
padding: 0 25px;
}
.get-support-page-title {
margin-top: 3rem;
}
.dc-Container .get-support-page-title h1 {
margin-bottom: 1.75rem;
margin-top: 0;
margin-left: 0;
font-size: 2.25rem;
letter-spacing: -0.08px;
line-height: 2.375rem;
}
.get-support-content {
display: flex;
flex-direction: row;
justify-content: space-between;
color: #333;
letter-spacing: normal;
box-sizing: border-box;
}
.get-support-content .support-left {
margin-top: 30px;
margin-right: 2%;
flex: 0 0 49%;
}
.get-support-content .page-sub-title {
border-bottom: 1px solid #dcdcdc;
padding-bottom: 1rem;
margin-bottom: 0;
}
.get-support-content h2 {
font-size: 1.375rem;
letter-spacing: -0.08px;
line-height: 1.625rem;
margin: 0;
font-weight: normal;
}
.get-support-content .phone-support-container {
background-color: #f0f0f0;
display: block;
margin-top: 2rem;
padding: 1rem;
}
.get-support-content .email-support-container {
margin-top: 2rem;
}
.get-support-content .support-heading {
font-size: 1.45rem;
margin-top: 0.9375rem;
margin-bottom: 0;
}
.get-support-content .support-description {
padding: 0.8125rem 0 1rem;
color: #7c7c7c;
}
.get-support-content .support-list-phone .support-item-detail {
padding: 1rem 2.375rem;
background: #65ac1e;
display: block;
border: 0;
color: #fff;
font-size: 1rem;
margin: 0.625rem 0;
cursor: pointer;
white-space: nowrap;
text-align: center;
}
.get-support-content .support-list-phone .support-item-detail a {
display: inline-block;
color: #fff;
font-size: 1rem;
text-align: center;
text-decoration: none;
}
.icon-style.telephone::before {
content: "\e026";
font-family: "BASFIconFont";
}
.get-support-content .support-list-email {
display: flex;
flex-wrap: wrap;
grid-gap: 1.5rem;
margin: 1rem auto;
}
.get-support-content .support-item {
border-top: 1px solid #dcdcdc;
height: 100%;
padding: 1rem 0;
display: grid;
grid-template-rows: 70px 3rem auto 2rem 134px;
row-gap: 1.3rem;
background-color: #fff;
box-sizing: border-box;
}
.get-support-content .support-item .icon-style.email {
font-size: 50px;
color: #65ac1e;
}
.get-support-content .support-item .icon-style.email::before {
content: "\e024";
font-family: "BASFIconFont";
}
.get-support-content .support-item .support-item-title {
font-size: 20px;
padding-bottom: 0.3rem;
}
.get-support-content .support-item .support-item-description {
font-size: 1rem;
line-height: 1.125;
}
.get-support-content .support-item .support-item-detail {
white-space: nowrap;
}
.get-support-content .support-item .support-item-detail a {
display: inline-block;
font-size: 1rem;
text-align: center;
font-weight: 400;
color: #65ac1e;
text-decoration: none;
}
.get-support-content .support-item .support-item-image img {
width: 100%;
}
.get-support-content .support-right {
margin-top: 30px;
flex: 0 0 49%;
}
.get-support-content .basf-repinfo {
display: flex;
flex-wrap: wrap;
column-gap: 2rem;
font-size: 0.85rem;
letter-spacing: normal;
}
.get-support-content .basf-repinfo .support-description {
margin-top: 2rem;
font-size: 1.2rem;
line-height: 1.2;
color: #7c7c7c;
}
.get-support-content .list-container {
flex: 0 0 calc(50% - 2rem);
}
.get-support-content .rep-list-item {
margin-top: 2rem;
}
.get-support-content .rep-info-box {
display: flex;
flex-direction: column;
line-height: 20px;
}
.get-support-content .rep-details {
margin-top: 0.5rem;
}
.get-support-content .rep-image {
max-width: 100%;
object-fit: cover;
}
.get-support-content .rep-name {
margin-top: 0.5rem;
font-size: 1.125rem;
letter-spacing: 0;
line-height: 1.375rem;
}
.get-support-content .rep-mailcity {
margin-top: 0.5rem;
}
.get-support-content .rep-email {
margin-top: 0.5rem;
display: flex;
color: #65ac1e;
}
.get-support-content .rep-phone {
margin-top: 0.5rem;
display: block;
color: #65ac1e;
}
.get-support-content .rep-email a,
.get-support-content .rep-phone a {
color: #65ac1e;
text-decoration: none;
}
.get-support-content .rep-details .icon-style:before {
width: 1.2rem;
font-size: 1.4rem;
display: inline-block;
vertical-align: middle;
font-family: "BASFIconFont";
}
.icon-style.email::before {
content: "\e024";
font-family: "BASFIconFont";
}
#rep-detail-content {
display: flex;
width: 100%;
flex-wrap: wrap;
column-gap: 2rem;
}
#rep-detail-content p {
font-size: 16px;
margin-top: 20px;
color: #333333;
font-style: italic;
}
#modalContent {
/* padding: 1rem;
background: #f0f0f0;
position: relative; */
max-width: 100%;
text-align: center;
}
.modal-content-inner {
width: 500px;
margin: 0 auto;
padding: 70px;
background: #ffffff;
}
#modalContent .button-row a {
background-color: #65ac1e;
color: #fff;
font-size: 18px;
padding: 15px 25px;
font-family: Roboto light;
margin-top: 20px;
letter-spacing: 1px;
text-transform: capitalize;
cursor: pointer;
display: inline-block;
font-weight: 600;
text-decoration: none;
}
.popup-content span {
font-size: 20px;
}
#modalContent .close-modal {
display: none;
}
.support-modal .supportModal-container {
box-sizing: border-box;
}
.support-modal .form-title {
font-size: 28px;
line-height: 34px;
padding-bottom: 30px;
margin-top: 0.9375rem;
}
.support-modal .form-desc {
font-size: 16px;
line-height: 24px;
margin-bottom: 2rem;
}
.support-modal .row.phone-email {
display: flex;
justify-content: space-between;
}
.support-modal .phone-email .form-fields {
width: 48%;
}
.support-modal .form-field {
}
.support-modal .form-fields {
}
.support-modal .form-fields .form-field {
}
.support-modal .form-field label {
font-size: 0.85rem;
line-height: 1.42857143;
font-weight: normal;
color: #333333;
letter-spacing: -0.3px;
margin-bottom: 0.625rem;
display: block;
}
.support-modal .form-fields label {
/* font-size: 0.85rem;
line-height: 1.42857143;
font-weight: normal;
color: #333333;
letter-spacing: -0.3px;
margin-bottom: 0.625rem;
display: block; */
}
.support-modal .form-fields input {
border: 0;
border-radius: 0;
border-top: 1px solid #7c7c7c;
margin-bottom: 15px;
padding: 5px 10px;
height: 50px;
background-color: #ffffff;
width: 100%;
box-sizing: border-box;
}
.support-modal .form-field textarea {
height: 180px;
background-color: #ffffff;
width: 100%;
color: #555555;
font-size: 0.875rem;
border: 0;
border-radius: 0;
border-top: 1px solid #7c7c7c;
margin-bottom: 5px;
padding: 5px 20px;
box-sizing: border-box;
}
.support-modal .form-field p {
margin: 0;
color: #666666;
font-size: 16px;
line-height: 24px;
margin-bottom: 2rem;
margin-left: 4px;
}
.support-modal .button-row {
}
.support-modal .btn {
display: inline-block;
font-size: 1rem;
cursor: pointer;
padding: 0.625rem 1rem;
border: 0 none;
background-color: #7c7c7c;
color: #fff;
}
.support-modal-back {
display: none;
position: fixed;
z-index: 1px;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
}
.support-modal .btn.send {
}
.support-modal .btn.cancel {
}
.aemform {
display: flex;
justify-content: center;
position: absolute;
top: 10%;
left: 0;
visibility: hidden;
z-index: 200;
}
.support-modal.show .aemform {
visibility: visible;
}
.aemform .container {
width: auto;
margin: 0 auto;
}
.aemform h3 {
font-size: 28px;
line-height: 34px;
padding-bottom: 30px;
}
.aemform p {
font-size: 16px;
line-height: 24px;
}
.aemform .guideContainerWrapperNode {
background-color: var(--box-grey);
padding: 1rem;
margin-top: 2rem;
}
.aemform .guideContainerWrapperNode .guideFieldNode {
padding-left: 0 !important;
padding-right: 0;
}
.aemform .guideContainerWrapperNode .characterCount {
margin-bottom: 2rem;
margin-left: 4px;
}
.aemform .guideContainerWrapperNode .guidance-text {
color: red;
margin-bottom: 20px;
}
.aemform .guideContainerWrapperNode .guideFieldLabel label {
font-size: 0.85rem;
font-weight: bold;
}
.aemform .guideContainerWrapperNode .textField input,
.aemform .guideContainerWrapperNode textarea,
.aemform .guideContainerWrapperNode select {
background-color: #ffffff;
}
.aemform .guideContainerWrapperNode button {
width: auto;
}
.aemform .guideContainerWrapperNode .cancelButton button {
background-color: var(--dark-grey);
color: var(--brand-color);
}
.aemform .titlePanel .guideLayout {
display: grid;
margin-bottom: 2rem;
}
.aemform .guideContainerWrapperNode .cancelButton button:hover {
background-color: var(--footer-background);
color: var(--white);
}
.aemform .form-button-row .guideGridFluidLayout {
display: flex;
}
.aemform .form-button-row .row:last-child {
padding-left: 12px;
}
@media screen and (min-width: 768px) {
.get-support-content .support-item-container {
flex: 0 0 45%;
}
}
@media screen and (max-width: 768px) {
.get-support-content {
flex-direction: column;
}
.get-support-content .support-item {
grid-template-rows: unset;
}
}
.support-item-email a {
color: #65ac1e;
}
.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:500px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
.hide{
display:none;
}
header {
background: #63af00;
width: 100%;
}
header .top-header {
overflow: hidden;
padding: 0 15px;
}
header img {
width: 155.84px;
height: 100%;
margin: 0px 48px;
}
header {
height: auto;
display: inline-block;
}
.account-details {
margin: 30px 48px 0 0;
display: flex;
}
.account-details span {
color: #fff;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.account-details span.username {
font-family: Roboto bold;
font-size: 16px;
font-weight: bold;
line-height: 1.13;
letter-spacing: -0.3px;
color: #fff;
margin-right: 14px;
text-align: right;
}
.account-details .short-circle {
background: #ffffff;
color: #63af00!important;
border-radius: 50%;
padding: 10px;
font-family: Roboto bold;
font-size: 13px;
font-weight: bold;
line-height: 1.15;
letter-spacing: -0.3px;
text-align: center;
margin-top: -8px;
}
header .main-menu {
overflow: hidden;
}
.main-menu .menu-container {
background: #BADA9A;
padding: 0px 48px;
height: 48px;
}
.main-menu .menu-container ul {
display: inline-block;
list-style: none;
padding: 0px 35px;
}
.main-menu .menu-container ul li {
display: inline-block;
padding: 15px 0px;
}
.main-menu .menu-container ul li a {
color: #000000;
margin: 0 20px 0 0;
text-decoration: none;
font-family: Roboto light;
font-size: 15px;
line-height: 1.13;
letter-spacing: 0.3px;
font-weight: 600;
}
.tab_content hr {
opacity: 0.3;
}
.page-title h1 {
font-weight: normal;
margin-top: 0;
}
.notify-orange{
height: 48px;
width:100%;
overflow: hidden;
background-color:#f3b800;
}
.notify-orange p{
font-family: Roboto bold;
font-size: 13px;
font-weight: bold;
color: #333333;
padding: 4px 85px;
}
.user-profile-dropdown {
display: none;
width: 258px;
height: auto;
padding: 19px 0 14px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #dcdcdc;
background-color: #fff;
position: absolute;
right: 60px;
top: 82px;
z-index: 1;
}
.user-profile-dropdown .profile-circle {
width: 60px;
height: 60px;
border: solid 1px #dcdcdc;
background-color: #fff;
border-radius: 50%;
text-align: center;
margin: 0 auto;
}
.user-profile-dropdown .profile-circle .user-shortname {
font-family: Roboto bold;
font-size: 24px;
font-weight: bold;
line-height: 1.33;
letter-spacing: -0.45px;
text-align: center;
color: #65ac1e;
margin-top: 15px;
cursor: default;
}
.user-profile-dropdown .user-name {
font-family: Roboto light;
font-size: 18px;
font-weight: 300;
line-height: 1.22;
text-align: center;
color: #333333;
border-bottom: 1px solid #dcdcdc;
padding-bottom: 24px;
padding-top: 10px;
cursor: default;
}
.user-profile-dropdown ul {
list-style-type: none;
padding: 0;
}
.user-profile-dropdown ul li a {
font-family: Roboto bold;
font-size: 16px;
font-weight: bold;
line-height: 1.13;
letter-spacing: -0.3px;
text-align: center;
color: #65ac1e;
text-decoration: none;
display: block;
padding: 15px 0;
}
.user-profile-dropdown ul li a.sign-out {
font-family: Roboto light;
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
text-align: center;
color: #7c7c7c;
}
/*loader style*/
.eupf-loader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
/*opacity: 0.5;*/
background: #979797;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.loader {
border: 16px solid #F3F3F3;
border-radius: 50%;
border-top: 16px solid #65AC1E;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*select usertype modal popup styles*/
.d-none {
display: none;
}
.changeusertype-bg{
background-color: #f0f0f0;
}
.changeusertype-modalcontainer {
width: 100%;
max-width: 432px;
height: auto;
margin: 0 auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #dcdcdc;
background-color: #fff;
}
.changeusertype-content {
text-align: center;
padding: 56px 40px;
}
.changeusertype-content .changeusertype-title {
font-family: Roboto light;
font-size: 18px;
font-weight: 300;
line-height: 1.22;
letter-spacing: normal;
color: #333333;
margin-bottom: 31px;
}
.changeusertype-content label {
text-align: left;
font-family: Roboto light;
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #333333;
display: flex;
margin-bottom: 6px;
}
.changeusertype-content select,
.changeusertype-content select option {
max-width: 352px;
width:100%;
height: 50px;
padding: 16px 15px;
font-family: Roboto light;
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;
appearance: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none;
}
.changeusertype-content .continue-usertype {
font-family: Roboto bold;
font-size: 16px;
font-weight: bold;
line-height: 1.13;
letter-spacing: -0.3px;
text-align: center;
color: #fff;
padding: 15px 29.5px 16px;
background-color: #65ac1e;
max-width: 348px;
width: 100%;
height: 50px;
margin: 24px 0 0;
outline: none;
border: none;
border-radius: 0;
-webkit-appearance: none;
}
.modal {
position: fixed;
z-index: 200;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.changeusertype-content form{
position: relative;
display: flex;
flex-direction: column;
}
.changeusertype-content form span.aerow-down {
position: absolute;
padding: 4px;
top: 48px;
right: 10px;
border-style: solid;
border-color: #333;
border-width: 0px 2px 2px 0px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.changeusertype-content form select:focus+span.aerow-down {
transform: rotate(-134deg);
-ms-transform: rotate(-134deg);
-webkit-transform: rotate(-134deg);
top: 50px;
}
.pending{
font-family: Roboto bold;
background-color: #f3b800;
position:relative;
height:auto;
padding: 16px 42px 16px 85px;
display:none;
font-size: 13px;
}
.close-model{
position: absolute;
right: 65px;
top: 14px;
cursor: pointer;
}
.pending .close-model {
border-radius: 50%;
background-color: #fff;
width: 23px;
height: 23px;
text-align: center;
padding: 5px;
font-family: Roboto light;
font-size: 15px;
color: #333;
}
.rememberme.checkbox {
margin-top: 20px;
display: block;
}
.newsevents .rememberme.checkbox {
margin-top: 5px;
}
/***** CUSTOM CHECKBOX STYLES *****/
.rememberme.checkbox input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.rememberme.checkbox label {
position: relative;
color: #333333;
cursor: pointer;
margin-bottom: 0;
font-family: "Roboto regular";
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
}
.rememberme.checkbox label:before {
content: '';
-webkit-appearance: none;
background-color: #F0f0f0;
border-top: 1px solid #7c7c7c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
width: 20px;
height: 20px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 10px;
}
.rememberme.checkbox input:checked+label:after {
content: '';
display: block;
position: absolute;
top: 3px;
left: 9px;
width: 4px;
height: 12px;
border: solid #252626;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.newsevents #profile-type .rememberme.checkbox label:before, .registration #profile-type .rememberme.checkbox label:before {
background-color: #fff;
}
@media screen and (max-width: 767px) {
header .top-header {
height: 80px;
}
header .top-header img {
width: 120.7px;
height: auto;
margin: 10px -2px;
}
.account-details {
margin: 30px 10px 0 0;
}
.account-details span.username {
font-size: 13px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 155px;
text-align: right;
}
.newsevents .eupf-landingpage-basftools .eupf-landingpage-heading h1{
padding-top: 0px;
}
.account-details span.short-circle {
padding: 6px 2px;
font-size: 13px!important;
width: 26px;
height: 26px;
display: inline-block;
}
.main-menu .menu-container {
padding: 0px 0px;
}
.main-menu .menu-container ul li a {
font-size: 13px;
}
.main-menu .menu-container ul {
padding: 0px 10px;
}
.user-profile-dropdown {
right: 0;
top: 80px;
width: 100%;
}
.pending {
padding: 16px 42px 16px 28px;
font-size: 13px;
}
.pending p.popuptext {
margin-right: 20px;
}
.close-model {
right: 24px;
}
/* appcenter page mobile */
.eupf-landingpage-container {
padding: 15px 0 56px 0!important;
}
.eupf-landingpage-layout .eupf-landingpage-heading h1,
.eupf-landingpage-layout .eupf-landingpage-heading .news-event-selection select{
font-size: 22px;
font-weight: 300;
line-height: 1.18;
}
.eupf-landingpage-layout .eupf-landingpage-heading .news-event-selection .aerow-down-green{
top: 12px;
}
.eupf-landingpage-layout .eupf-landingpage-heading p {
font-size: 15px;
color: #7c7c7c;
padding-top: 16px;
display: inline-block;
}
#profile-type .nice-select.profile-type-select {
width: 100%;
}
.registration #profile-type .nice-select.profile-type-select {
max-width: 100%;
}
.eupf-landingpage-container .eupf-landingpage-layout {
width: 85%;
}
.eupf-landingpage-content {
flex-direction: column;
}
.landing-left.news-section{
width: 100%;
}
.news-component {
padding-top: 24px;
padding-bottom: 27px;
background-color: #fff;
margin-left: -28px;
padding-left: 24px;
margin-right: -28px;
padding-right: 24px;
min-height: auto!important;
}
.news-component .news-img-container {
background-color: #fff;
}
.news-component .news-img-container img {
max-width: 120px;
min-height: 105px;
width: 120px;
height: 105px;
}
.news-component .news-text-container {
padding: 0px 0 0 24px;
}
.news-text-container .news-title {
font-size: 20px;
line-height: 1.3;
letter-spacing: -0.2px;
}
.news-text-container .news-description p {
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
}
.news-component .news-learn-more {
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
}
.events-container .event-date {
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
}
.events-container .event-description {
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
}
.events-container .event-link {
font-weight: bold;
letter-spacing: -0.3px;
}
}
@media screen and (max-width: 640px) {
.account-details span.username {
width: 120px;
}
}
/*EOP Register form CSS*/
/*General CSS*/
/* css reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* css reset*/
body {
margin: 0;
padding: 0;
color: #333333;
font-family: sans-serif;
font-size: 14px;
background-color:#f0f0f0;
}
.basicpage .text {
padding-top: 30px;
padding-bottom: 30px;
}
.basicpage .text p a{
color: #21a0d2;
margin-left: 85px;
}
#logoLink {
float: left;
}
.short-circle {
background: #ffffff;
color: #63af00!important;
border-radius: 50%;
padding: 4px;
font-size: 12px!important;
}
.w-100 {
width: 100%;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.disp-block {
display: block;
}
.disp-inline-blk {
display: inline-block;
}
.text-center {
text-align: center;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
.mtb-1 {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.mtb-3 {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.mtb-5 {
margin: 50px 0 !important;
}
.col {
display: inline-block;
float: left;
}
#regForm .container{
display: flex;
flex-flow: wrap;
}
#regForm #address{
display: contents;
}
/*Tabs CSS*/
.tab_content h2 {
font-weight: normal;
font-size: 18px;
}
ul.tabs {
margin: 20px 0 0;
padding: 0;
float: left;
list-style: none;
width: 100%;
}
ul.tabs li {
float: left;
font-size: 14px;
font-weight: bold;
color: #65AC1E;
margin: 0;
cursor: pointer;
padding: 5px 15px;
line-height: 30px;
background-color: #f9f9f9;
overflow: hidden;
position: relative;
min-width: 100px;
text-align: center;
border-right: 1px solid #f0f0f0;
}
ul.tabs li:hover {
background-color: #ccc;
color: #333;
}
ul.tabs li.active {
background-color: #fff;
color: #333;
font-weight: 600;
display: block;
border-top: 2px solid #65AC1E;
}
.tab_container {
border-top: none;
clear: both;
width: 100%;
background: #fff;
overflow: auto;
}
.tab_content {
width: 80%;
margin: 0px auto;
display: none;
padding-top: 25px;
}
.tab_content#tab1 {
padding-bottom: 50px;
}
.tab_drawer_heading {
display: none;
}
.registration #api .tab_container form{
width:100%;
}
/* error css*/
.error-element input {
background: #fae5e8 !important;
border-color: #d20c25 !important;
color: #d0021b !important
}
.error-element label {
color: #d0021b !important
}
.global-error {
background: #FF0000;
padding: 16px 0;
margin-top: -3px;
position: relative;
height: 48px;
}
.global-success {
background: #2D4800;
}
.global-error span {
color: #fff;
display: inline-block;
margin: 0 auto;
font-family: Roboto bold;
font-size: 13px;
font-weight: bold;
}
.global-error .close-btn {
border-radius: 50%;
background-color: #fff;
width: 23px;
height: 23px;
text-align: center;
padding: 5px;
font-family: Roboto light;
font-size: 15px;
color: #333;
cursor: pointer;
margin-right: 65px;
margin-top: -3px;
display: inline-block;
}
span.form-error-text,span.global-success-msg {
padding-left: 85px;
}
.global-error-red {
display:none;
}
/************my-profile**********/
.tabheading{
width:100%;
display:flex;
font-size:16px;
padding-bottom:5px;
border-bottom:1px solid #000;
flex-direction:row;
margin-bottom:20px;
margin-top:35px;
justify-content:space-between;
}
.tabheading a,.regirstarion-content p a{color:#84BD4B;text-decoration:none;font-weight:bold;cursor: pointer;}
.regirstarion-content p{font-size:15px;font-weight:bold;margin-top:5px;}
.regirstarion-content p span{font-weight:normal;}
.regirstarion-content p.green-tick{position:relative;padding-left:30px;margin-top:30px;font-weight:normal;}
.regirstarion-content p.red-intocon{position:relative;padding-left:30px;margin-top:20px;font-weight:normal;margin-bottom:20px;}
.regirstarion-content p.red-intocon.green-tick {
display: none;
}
.regirstarion-content p:last-child a {
display: flex;
padding-top: 20px;
}
span.red-into{
width: 24px;
height: 24px;
background-color: red;
position: absolute;
border-radius: 12px;
box-shadow: 2px 2px 4px 0 white;
display: inline-block;
top: -5px;
margin-right:6px;
left:0px;
}
.green-tick:before {
content: " ";
display: block;
border: solid 0.8em #84BD4B;
border-radius: .8em;
height: 0;
width: 0;
position: absolute;
left: 0em;
top: 25%;
margin-top: -0.5em;
}
.red-into:before,.red-into:after{
content:'';
position:absolute;
width: 16px;
height: 2px;
background-color: white;
border-radius: 2px;
top: 11px;
box-shadow: 0 0 2px 0 #ccc;
/* border: solid 0.8em #D0021B;*/
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
left:4px;
}
.green-tick:after {
content: " ";
display: block;
width: 0.3em;
height: 0.6em;
border: solid white;
border-width: 0 0.2em 0.2em 0;
position: absolute;
left: 0.6em;
top: 30%;
margin-top: -0.2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.red-into:after{
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
right:2px;}
/**********popup**********/
.update-personal{
width:60%;
display:none;
z-index:10;
background:#fff;
position:absolute;
left:50%;
margin-left:-30%;
top:10%;
padding:80px 80px 20px;
}
.update-personal h2 {
font-size:32px;
text-align:left;
margin-bottom: 35px;
}
.updateclose{cursor:pointer;}
.backgroundpopup{display:none;}
/*Responsive*/
@media screen and (max-width: 480px) {
.col-xxs-12 {
width: 98% !important;
margin: 0 1%;
}
}
@media screen and (max-width: 767px) {
.update-personal{width:100%;left:0px;margin-left:0px;padding:30px;}
.tabs {
display: block;
}
/*.tab_drawer_heading {
background-color: #84BD4B;
color: #fff;
border-top: 1px solid #63af00;
margin: 0;
padding: 5px 20px;
display: none;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.d_active {
background-color: #63af00;
color: #fff;
}*/
}
@media screen and (max-width: 767px) {
.tab_content {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.tab_content h2 {
margin-bottom: 0;
}
.col-xs-6 {
width: 48%;
margin: 0 1%;
}
.col-xs-12 {
width: 98%;
margin: 0 1%;
}
}
@media screen and (max-width: 768px) {
ul.tabs {
overflow-x: scroll;
overflow-y: hidden;
flex-direction: row;
display: flex;
}
ul.tabs li {
min-width: 100px;
line-height:20px;
}
}
@media screen and (min-width: 768px) {
.tab_content h2 {
padding: 0 5px;
margin-bottom: 0;
}
.tab_content hr {
margin: 0 6px 20px;
opacity: 0.3;
}
ul.tabs {
overflow-x: auto;
display: inline-flex;
}
.col-lg-3 {
width: 23%;
margin: 0 1%;
}
.col-lg-4 {
width: 31%;
margin: 0 1%;
}
.col-lg-6 {
width: 48%;
margin: 0 1%;
}
.col-lg-12 {
width: 98%;
margin: 0 1%;
}
.col-lg-9 {
width: 73%;
margin: 0 1%;
}
}
.nice-select {
-webkit-tap-highlight-color: transparent;
background-color: #f0f0f0;
border-top: solid 1px #a3a3a3;
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 14px;
font-weight: normal;
height: 42px;
line-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 30px;
position: relative;
text-align: left !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: auto;
color: #7c7c7c;
}
.nice-select:hover {
border-color: #7c7c7c;
}
.nice-select:active,
.nice-select.open,
.nice-select:focus {
border-color: #7c7c7c;
}
.nice-select:after {
border-bottom: 2px solid #333;
border-right: 2px solid #333;
content: '';
display: block;
height: 8px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 8px;
}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.nice-select.disabled {
border-color: #e7ecf2;
color: #90a1b5;
pointer-events: none;
}
.nice-select.disabled:after {
border-color: #cdd5de;
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;
}
.nice-select .list {
background-color: #fff;
box-shadow: 0 0 0 1px rgba(68, 88, 112, 0.11);
box-sizing: border-box;
margin-top: 0px;
opacity: 0;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
-ms-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
background-color: transparent !important;
}
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: 40px;
list-style: none;
min-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 29px;
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
background-color: #f0f0f0;
}
.nice-select .option.selected {
color: #333;
}
.nice-select .option.disabled {
background-color: transparent;
color: #90a1b5;
cursor: default;
}
.nice-select ul {
margin: 0;
padding-left: 16px;
}
::-moz-selection {
background: #f3f4f7;
}
::selection {
background: #f3f4f7;
}
#profile-type .nice-select.profile-type-select {
background: #fff;
max-width: 275px;
width: 100%;
font-family: Roboto light;
color: #7c7c7c;
font-size: 16px;
letter-spacing: 0.3px;
}
#profile-type .nice-select.profile-type-select ul.list {
width: 100%;
}
#profile-type .nice-select.open {
border-left: 1px solid #7c7c7c;
border-right: 1px solid #7c7c7c;
border-bottom: 1px solid #dcdcdc;
}
#profile-type .nice-select ul.list li{
border-bottom: 1px solid #dcdcdc;
}
.nice-select.segment-div {
font-size: 36px;
border-top: 0;
color: #65ac1e;
width: auto;
background-color:unset;
}
.nice-select.segment-div:after{
border-bottom: 2px solid #65ac1e;
border-right: 2px solid #65ac1e;
}
.nice-select.segment-div .list{
width: 100%;
}
.nice-select.segment-div .option{
font-size: 16px!important;
color: #7c7c7c;
}
.news-event-selection .nice-select.segment-div {
padding-left: 0 !important;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.nice-select:after {
margin-top: -13px;
}
}
@media screen and (max-width: 767px) {
.news-event-selection .nice-select.segment-div {
min-width: auto !important;
width: auto !important;
white-space: normal;
}
.events-container {
padding: 0;
}
}
@font-face {
font-family: "Roboto medium";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-500.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-500.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-500.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-500.woff2") format("woff2");
}
@font-face {
font-family: "Roboto light";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-100.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-100.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-100.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-100.woff2") format("woff2");
}
@font-face {
font-family: "Roboto bold";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-700.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-700.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-700.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-700.woff2") format("woff2");
}
@font-face {
font-family: "Roboto regular";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-regular.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-regular.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-regular.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-regular.woff2") format("woff2");
}
@font-face {
font-family: "Roboto condensed";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-300.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-300.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-300.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-300.woff2") format("woff2");
}
.eupf-landingpage-container {
box-sizing: border-box;
background: #F0F0F0;
width: 100%;
padding: 40px 0 84px 0;
font-family: inherit;
height: auto;
margin: 0 auto;
}
.eupf-landingpage-layout {
width: 80%;
margin: 0 auto;
}
.eupf-landingpage-content {
display: flex;
/*padding-top: 25px;*/
}
.landing-left {
width: 70%;
margin-right: 32px;
padding-top: 41px;
}
span.news-event-selection label {
display: inline-flex;
position: relative;
}
.aerow-down-green{
position: absolute;
padding: 4px;
top: 20px;
right: 10px;
border-style: solid;
border-color: #65AC1E;
border-width: 0px 2px 2px 0px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
display: none;
}
.news-event-selection select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */
display: block;
width: 100%;
max-width: 350px;
margin: 5px 0px;
padding: 0px 35px 0 15px;
font-size: 16px;
line-height: 1.75;
color: #333;
background-color: #FFFFFF;
background-image: none;
-ms-word-break: normal;
word-break: normal;
}
.news-event-selection select {
font-family: Roboto light;
font-size: 36px;
font-weight: 300;
line-height: 1.06;
letter-spacing: -0.8px;
color: #65AC1E;
border: none;
background: none;
outline: none;
}
.news-event-selection select option {
font-family: Roboto light;
font-size: 16px;
line-height: 1.13;
letter-spacing: -0.3px;
color: #333333;
background-color: #DCDCDC;
}
.news-component {
display: flex;
margin-bottom: 32px;
min-height: 279px;
}
.news-img-container {
max-width: 321px;
}
.news-img-container img {
max-width: 321px;
width: 100%;
height: 100%;
min-height: 279px;
}
.news-text-container {
width: 75%;
background-color: #fff;
padding: 33px 24px;
}
.news-title {
font-family: Roboto light;
font-size: 28px;
font-weight: 300;
line-height: 1.07;
letter-spacing: -0.6px;
color: #333333;
margin-bottom: 14px;
}
.news-description p {
font-family: Roboto light;
font-size: 16px;
line-height: 1.25;
letter-spacing: -0.3px;
color: #333333;
}
.news-learn-more {
font-family: Roboto bold;
font-size: 16px;
font-weight: bold;
line-height: 1.13;
letter-spacing: -0.3px;
color: #65AC1E;
text-decoration: none;
margin-top: 30px;
display: inline-block;
}
.news-component:last-child {
margin-bottom: 0px;
}
.landing-right {
width: 100%;
max-width: 342px;
height: auto;
background-color: #fff;
padding-bottom: 28px;
margin-top:-20px;
}
.eupf-landingpage-heading{
margin-bottom: 20px;
}
.eupf-landingpage-heading h1 {
font-family: Roboto light;
font-size: 36px;
font-weight: 300;
line-height: 1.06;
letter-spacing: -0.8px;
color: #333333;
margin-bottom: 0;
}
.eupf-landingpage-heading p {
font-family: Roboto light;
font-size: 16px;
font-weight: 300;
line-height: 2.38;
letter-spacing: -0.36px;
color: #333333;
}
.title-upcoming-event {
font-family: Roboto light;
font-size: 18px;
font-weight: 300;
line-height: 1.22;
color: #fff;
padding: 10px 23px 10px 23px;
background-color: #65AC1E;
}
.events-container,.events-container-get {
padding: 0px 23px;
}
.events-container-get{
margin-top:20px;
}
.event-date {
font-family: Roboto bold;
font-size: 15px;
font-weight: bold;
line-height: 1.2;
letter-spacing: -0.28px;
color: #65AC1E;
margin-top: 18px;
margin-bottom: 12px;
}
.event-title {
font-family: Roboto light;
font-size: 18px;
font-weight: 300;
line-height: 1.22;
color: #333333;
margin-bottom: 17px;
}
.event-description p {
font-family: Roboto light;
font-size: 13px;
line-height: 1.38;
letter-spacing: -0.3px;
color: #333333;
}
.event-link {
font-family: Roboto light;
font-size: 13px;
line-height: 1.15;
letter-spacing: 0.5px;
color: #65AC1E;
cursor: pointer;
text-decoration: none;
margin-top: 15px;
display: inline-block;
}
.horizontal-line {
margin: 28px 0px;
border-top: solid 1px #979797;
}
/* basf tools css style*/
.eupf-landingpage-basftools {
box-sizing: border-box;
background: #fff;
width: 100%;
padding: 40px 0 84px 0;
font-family: inherit;
height: auto;
margin: 0 auto;
}
.eupf-landingpage-basftools h1 {
margin-bottom: 14px;
}
.eupf-landingpage-basftools p.subheading {
margin-bottom: 20px;
}
.eupf-basftools-content {
width: 100%;
display: flex;
flex-flow: wrap;
}
.basftools-wraper {
width: 215px;
height: auto;
border-top: solid 1px #333333;
padding-top: 19px;
padding-bottom: 49px;
margin-right: 30px;
}
.basftools-wraper .tooltitle {
font-family: Roboto light;
font-size: 22px;
font-weight: 300;
line-height: 1.18;
letter-spacing: normal;
color: #333333;
margin-top: 42px;
margin-bottom: 18px;
width: 155px;
overflow: hidden;
min-height: 52px;
max-height: 52px;
text-transform: capitalize;
}
.basftools-wraper .tools-description {
min-height: 44px;
max-height: 44px;
overflow: hidden;
margin-top: 20px;
}
.basftools-wraper .icon {
height: 43px;
width: auto;
}
.basftools-wraper .tool-description {
font-family: Roboto light;
font-size: 13px;
line-height: 1.15;
letter-spacing: -0.3px;
color: #333333;
height: 100%;
max-height: 45px;
}
.gonow-link {
font-family: Roboto bold;
font-size: 16px;
font-weight: bold;
line-height: 1.13;
letter-spacing: -0.3px;
color: #65AC1E;
text-decoration: none;
margin-top: 37px;
margin-bottom: 25px;
display: block;
cursor: pointer;
}
.basftools-wraper img.banner-img {
width: 100%;
height: auto;
}
.gonow-link {
cursor: pointer;
}
.hide{
display:none;
}
.show{
display:block;
}
@media screen and (max-width: 767px) {
.eupf-landingpage-layout .eupf-landingpage-heading p {
padding-top: 2px;
}
.eupf-tools-content-repeat {
flex-direction: column;
padding-top: 20px
}
.eupf-tools-content-repeat img.banner-img {
width: 100%;
height: auto;
order: 2;
margin-bottom: 40px;
}
.eupf-tools-content-repeat .basftools-wraper {
width: 100%;
}
.eupf-tools-content-repeat .basftools-wraper .tooltitle {
margin-top: 35px;
margin-bottom: 20px;
min-height: auto;
max-height: none;
overflow: visible;
width: 100%;
}
.eupf-tools-content-repeat .basftools-wraper .tools-description {
min-height: auto;
max-height: none;
overflow: visible;
}
.eupf-tools-content-repeat .basftools-wraper .gonow-link {
margin-top: 40px;
margin-bottom: 25px;
}
}
/********popup**********/
.Alert-popup{
width:100%;display:none;
}
.Alert-popup .custom-select{
margin-top:20px;
}
.Alert-popup .custom-select .nice-select,.Alert-popup .custom-select .nice-select .list {
width:100%
}
.backgroundpopup{
position: fixed;
top:0px;
left:0px;
background:#000;
opacity:0.7;
width:100%;
height:100%;
z-index:9;
}
.popupcontent{
padding:40px;
width:40%;
background:#fff;
position: fixed;
top: 50%; right: 50%;
transform: translate(50%,-50%);z-index:99;
}
.popupcontent h2{font-size:20px;color: #333;text-align:center}
.popupcontent .fieldcon{width:100%;margin-top:20px;}
.popupcontent .fieldcon select{width:100%;margin-top:5px;}
.popupcontent .fieldcon lable{font-size:16px;margin-right:20px;}
.popupcontent input{border:0px;background: #65AC1E;color:#fff;padding:12px 0px;cursor:pointer;width:100%;font-size:16px;}
/*the container must be positioned relative:*/
.custom-select {
position: relative;
font-family: Arial;
}
.custom-select select {
display: none; /*hide original SELECT element:*/
}
.custom-select.new-customer .nice-select{width:100%;margin-top:5px;}
.custom-select.new-customer .nice-select.open .list{width:100%;}
.custom-select.new-customer .select-selected{
border-top: 1px solid #a9a9a9;
background: #f0f0f0;
margin-top: 5px;
outline: none;
font-family: Roboto light;
line-height: 1.13;
letter-spacing: -0.3px;
color: #7c7c7c;}
.custom-select.retailerdrop .nice-select{
border-top: 0px;
background: none;
color: #8b9383;
cursor: pointer;
letter-spacing: 0.6px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
margin: 0px;
height: auto;
line-height: 0px;
}
.custom-select.retailerdrop .nice-select:after{top:35%;}
.custom-select.retailerdrop .nice-select.open .list {
border: 1px solid #CDCDCD;
padding: 0;
left:auto;
right: 0px;
width:200px;
border-top-color: #8EC34A;
border-top-width: 2px;
margin-top:10px;
}
.custom-select.retailerdrop .nice-select .option{
padding: 0px 10px;
border-top: 1px solid #CDCDCD;
position:relative;
font-size: 13px;
width:100%;
float:left;
color: #989898;
}
.custom-select.retailerdrop .nice-select .option:after{
top:10px;
}
.custom-select.retailerdrop .nice-select .option.selected {background: #fff}
.custom-select.retailerdrop .nice-select .option.selected:after {
content: '';
display: inline-block;
transform: rotate(45deg);
height: 9px;
width: 3px;
color: #8BC155;
border-bottom: 2px solid #65AC1E;
border-right: 2px solid #65AC1E;
position: absolute;
right: 15px;
top: 13px;
}
.select-selected {
background-color: #ccc;
}
.select-selected {
background-color: #ccc;
}
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 20px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #333 transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #333 transparent;
top: 14px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #333;
padding: 15px 16px;
border: 1px solid #333;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color: #ccc;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 767px) { .popupcontent{width:80%;}}
/* OVERRIDING CARD STYLES fOR TOOLS AND RESOURCES */
.gonow-link {
margin-top: 0px;
margin-bottom:0px;
line-height: 3;
}
.basftools-wraper .tooltitle{
margin-bottom:0px;
}
.tool-text-content:hover {
background: #eee;
}
.tool-text-content {
border-top: 1px solid #f7f7f8;
padding: 10px;
}
.basftools-wraper{
border: none;
padding-top: 0px;
}
/*INNER PAGES CSS */
:root {
--brand-color: #65ac1e;
--footer-background: #333;
--box-grey: #f0f0f0;
--white: #fff;
--text-grey: #333;
--grey-2: var(--dark-grey);
--border-color: #b8b8b8;
--dark-grey: #7c7c7c;
--fontfamily: "Roboto regular";
--black:#000
}
.dc-Container {
max-width: 1200px;
margin: 0 auto;
background-color: var(--white);
float: inherit !important;
padding-bottom: 80px;
font-family: var(--fontfamily);
}
.dc-Container .noactive {
width: 95%;
margin: 0 auto;
font-size: 15px;
margin-top: 10px;
}
.dc-Container .breadCrumbs {
padding: 10px 15px;
font-size: 0.8125rem;
letter-spacing: -0.3px;
line-height: 0.9375rem;
color: var(--brand-color);
}
.dc-Container .breadCrumbs a {
text-decoration: none;
color: var(--brand-color);
}
.dc-Container .breadCrumbs a:before {
content: ">";
padding: 0px 5px;
}
.dc-Container .breadCrumbs a:first-child:before {
content: "";
padding: 0px;
}
.dc-Container h1 {
font-size: 2.25rem;
letter-spacing: -0.08px;
line-height: 2.375rem;
margin-top: 48px;
margin-bottom: 20px;
margin-left: 30px;
font-family: "Roboto condensed";
@media only screen and (max-width: 800px) {
font-size: 1.75rem;
letter-spacing: -0.06px;
line-height: 1.875rem;
}
}
.dc-Container .files-wrapper {
display: flex;
flex-direction: column;
}
.dc-Container .files-wrapper .file-tile {
background-color: var(--box-grey);
margin: 20px 30px;
padding: 25px 15px;
display: flex;
@media only screen and (max-width: 600px) {
flex-direction: column;
align-items: end;
}
}
.dc-Container .file-tile .pdf-icon {
max-width: 90px;
padding: 1rem;
}
.dc-Container .file-tile .pdf-icon svg {
width: 100%;
}
.dc-Container .file-tile .file-details {
display: flex;
flex-direction: column;
width: 71%;
margin: 0px 1%;
@media only screen and (max-width: 800px) {
width: 65%;
}
@media only screen and (max-width: 600px) {
width: 92%;
margin: 0 auto;
flex-direction: column;
}
}
.dc-Container .file-tile .file-details h2 {
font-size: 1.571rem;
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
word-wrap: break-word;
font-family: "Roboto condensed";
}
.dc-Container .file-tile .file-details span {
font-weight: bold;
@media only screen and (max-width: 600px) {
width: 100px;
}
}
.dc-Container .file-tile .file-details .file-information {
color: var(--grey-2);
display: flex;
margin-top: 30px;
justify-content: space-between;
}
.dc-Container .file-tile .file-details .file-information p {
width: 80%;
color: black;
font-weight: 100;
}
.dc-Container .file-tile .action-buttons a:nth-child(3) {
display: none;
}
.dc-Container .true .file-tile .action-buttons a:nth-child(3) {
display: block;
}
.dc-Container .file-tile .action-buttons {
display: flex;
flex-direction: column;
padding: 1rem;
font-weight: bold;
@media only screen and (max-width: 600px) {
width: 100%;
}
}
.dc-Container .file-tile .action-buttons span {
font-size: 0.875rem;
text-transform: uppercase;
color: var(--grey-2);
}
.dc-Container .file-tile .action-buttons a {
padding: 0.75rem 0.8rem;
background: var(--brand-color);
display: block;
border: 0;
text-decoration: none;
color: var(--white);
font-size: 1rem;
margin: 0.625rem 0;
cursor: pointer;
}
.dc-Container .file-tile .action-buttons a svg {
height: 1.6rem;
display: inline-block;
fill: var(--white);
vertical-align: middle;
position: relative;
top: -3px;
}
.dc-Container .file-tile .action-buttons a g {
fill: inherit;
}
/************eupf override****************/
.dc-Container .eupf-landingpage-layout {
width: 95%;
}
.dc-Container .tool-text-content {
border-top: 1px solid #b8b8b8;
padding: 15px 0px;
}
.dc-Container .basftools-wraper img.banner-img {
height: 130px;
object-fit: cover;
}
.dc-Container .eupf-landingpage-heading h1{
margin-left:0px;
}
.dc-Container .eupf-landingpage-heading h1 .news-event-selection {
display: none;
}
.dc-Container .basftools-wraper {
width: 250px;
}
.dc-Container .landing-right {
max-width: 280px;
}
.dc-Container .hero-banner-component .banner-content .banner-innercontent h1,
.dc-Container .hero-banner-component .banner-content .banner-innercontent p {
text-shadow: 2px 0 2px rgba(0, 0, 0, 0.5);
color: #fff;
font-family: Roboto Condensed;
}
.dc-Container .hero-banner-component .banner-content .banner-content-left {
background: unset;
}
.dc-Container
.hero-banner-component
.banner-content
.banner-innercontent
button {
font-size: 18px;
padding: 15px 25px;
display:inline-flex;
}
.dc-Container .hero-banner-component .banner-content .banner-innercontent {
min-height: 460px;
}
.dc-Container .owl-carousel .owl-item img {
min-height: 460px;
object-fit: cover;
}
.dc-Container .owl-carousel .owl-item .hero-image.true {
width: 100%;
}
.dc-Container .owl-carousel .owl-item .hero-image.true img {
height: 240px;
min-height: 240px;
}
.dc-Container .hero-banner-component .banner-content .banner-content-left {
padding-left: 5%;
}
.dc-Container .basftools-wraper .tooltitle {
width: auto;
}
.dc-Container .basftools-wraper .tooltitle,
.dc-Container .event-title,
.dc-Container .event-description p,
.dc-Container .event-link,
.dc-Container .title-upcoming-event,
.dc-Container .eupf-landingpage-heading p {
font-family: Roboto Regular;
}
.icon-style.arrow-forward-new::before {
content: "\e906";
}
.icon-style.arrow-forward-new{
font-family: "BASFIconFontNewStyle";
margin-right:10px;
}
.dc-Container .events-container .event-link {
position: relative;
padding-left: 22px;
}
.dc-Container .events-container .event-link::before {
background-image: url("../../../content/dam/basfeupf/icon-right-arrow.svg");
background-repeat: no-repeat;
height: 16px;
width: 16px;
content: " ";
display: inline-block;
position: absolute;
left: 0;
top: -2px;
}
/*****************addcontact *************/
.contact-form-page-title {
margin-top: 3rem;
}
.contact-form-page-title h1 {
margin-bottom: 1.75rem;
margin-top: 0;
font-size: 2.25rem;
letter-spacing: -0.08px;
line-height: 2.375rem;
}
.contact-form-container {
max-width: 740px;
width: 100%;
display: block;
position: relative;
margin: 1rem auto auto auto;
box-sizing: border-box;
}
.contact-form .toggle-steps {
color: #333;
display: block;
position: relative;
cursor: pointer;
}
.contact-form .toggle-steps .collapsible-title {
margin: 0;
padding: 0.3125rem 0 1.75rem 0;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 2rem;
border-bottom: 1px solid #333;
padding-right: calc(0.8em + 8px);
font-size: 22px;
font-family: 'Roboto condensed';
}
.contact-form .toggle-steps .collapsible-title::after {
content: "\e903";
font-family: "BASFIconFontNewStyle";
color: #333;
display: block;
position: absolute;
margin: 4px;
right: 0;
top: 0;
font-size: 0.8rem;
line-height: 1.875rem;
transition: transform 0.5s ease;
}
.contact-form .toggle-steps.open .collapsible-title::after {
transform: rotate(180deg);
}
.contact-form .icon-style.ok-validation,
.contact-form .icon-style.no-validation,
.contact-form .contact-tabs .tabs .icon-style-tab.no-validation {
font-family: BASFIconFont;
}
.contact-form .icon-style.no-validation::before,
.contact-form .contact-tabs .tabs .icon-style-tab.no-validation::before {
content: "\e014";
font-style: normal;
font-size: 20px;
color: #d0021b;
}
.contact-form .icon-style.ok-validation::before,
.contact-form .contact-tabs .tabs .icon-style-tab.ok-validation::before {
content: "\e082";
font-style: normal;
font-size: 20px;
color: #65ac1e;
}
.contact-form .collapsible-panel {
transition: all 0.5s ease;
position: relative;
display: none;
}
.contact-form .collapsible-panel.open {
transition: all 0.5s ease;
display: block;
}
.contact-form .inner-panel {
padding: 1.125rem 0;
position: relative;
}
.contact-form .field-wrapper {
width: calc(100% - 20px);
margin: 0 0 1.25rem 0;
position: relative;
}
.contact-form .field-label {
font-weight: bold;
margin-bottom: 0.625rem;
display: block;
color: #333;
font-size: 1rem;
}
.contact-form .collapsible-panel .fields {
position: relative;
vertical-align: top;
margin: 0 0 1.25rem 0;
padding: 0;
width: auto;
}
.contact-form .collapsible-panel .contact-input {
width: 100%;
display: block;
padding: 1rem;
background: #ffffff;
font-size: 1rem;
border: 1px solid #b8b8b8;
box-sizing: border-box;
font-family: 'Roboto regular';
}
.contact-form .collapsible-panel .contact-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
border: 1px solid #f0f0f0;
border-radius: 0;
background: #f0f0f0;
border-top-color: #b8b8b8;
box-sizing: border-box;
color: #7c7c7c;
padding: 1rem;
padding-right: 36px;
font-size: 1rem;
line-height: 1rem;
text-decoration: none;
cursor: pointer;
}
.contact-form .collapsible-panel .select::before {
content: "\e903";
font-family: "BASFIconFontNewStyle";
cursor: default;
color: #65ac1e;
background-color: transparent;
display: block;
font-size: 0.625rem;
height: 10px;
width: 20px;
line-height: 1;
padding-right: 0.625rem;
position: absolute;
text-align: right;
top: 1.7625rem;
right: 0.3125rem;
pointer-events: none;
transform: translateY(-50%);
}
.contact-form .collapsible-panel .step-desc strong {
font-weight: bold;
}
.contact-form .contact-tabs-wrapper {
width: 100%;
display: block;
margin: 1.875rem 0;
}
.contact-form .contact-tabs-wrapper .contact-tabs {
position: relative;
}
.contact-form .contact-tabs .tabs {
display: inline-block;
}
.contact-form .contact-tabs .tabs-inner {
padding: 0.5625rem 1.25rem;
background: transparent;
}
.contact-form .contact-tabs .tabs a {
color: #65ac1e;
text-decoration: none;
font-weight: bold;
}
.contact-form .contact-tabs .tabs.selected a {
color: #333;
pointer-events: none;
}
.contact-form .contact-tabs .tabs.selected .tabs-inner {
background: #dcdcdc;
}
.contact-form .contact-tabs .tabs .icon-style.ok-validation,
.contact-form .contact-tabs .tabs .icon-style-tab.ok-validation {
font-family: BASFIconFont;
color: #65ac1e;
}
.contact-form .contact-tabs .tabs .icon-style.ok-validation::before,
.contact-form .contact-tabs .tabs .icon-style-tab.ok-validation::before {
content: "\e082";
}
.contact-form .warning-message {
color: #d0021b;
display: none;
font-size: 0.825rem;
margin: 0.375rem 0;
padding: 0;
}
.contact-form .tab-panel {
display: none;
}
.contact-form .tab-panel.show {
display: block;
}
.contact-form .tab-panel .field-wrapper {
margin: 0 0 1.25rem 0;
position: relative;
width: calc(100% - 20px);
}
.contact-form .tab-panel .field-label {
font-weight: bold;
margin-bottom: 0.625rem;
display: block;
color: #333;
font-size: 1rem;
}
.contact-form .tab-panel .fields {
position: relative;
}
.contact-form .tab-panel .fields .contact-input {
width: 100%;
display: block;
padding: 1rem;
background: #ffffff;
font-size: 1rem;
border: 1px solid #b8b8b8;
box-sizing: border-box;
color:#000;
}
.contact-form .tab-panel .checkbox-wrapper {
margin: 1.8rem 0;
display: flex;
}
.contact-form .tab-panel .checkbox-wrapper .input-radio{
font-weight:bold;
font-size:1rem;
}
.contact-form .tab-panel .checkbox-wrapper label {
margin-left: 1.8rem;
font-weight: bold;
margin-bottom: 0.625rem;
display: block;
color: #333;
font-size: 1rem;
}
.contact-form .tab-panel .input-wrapper {
position: relative;
float: left;
}
.contact-form .tab-panel .contact-checkbox {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
-webkit-appearance: none;
background-color: transparent;
border: 0;
width: 1.125rem;
height: 1.125rem;
display: block;
background: #ffffff;
font-size: 1rem;
box-sizing: border-box;
z-index: 2;
}
.contact-form .tab-panel .input-checkbox {
width: 1.125rem;
float: left;
margin: 0;
position: relative;
-webkit-appearance: none;
background-color: transparent;
border: 0;
}
.contact-form .tab-panel .input-checkbox::before {
width: 1.125rem;
height: 1.125rem;
border-top: 1px solid #b8b8b8;
background: #f0f0f0;
font-size: 0.75rem;
position: absolute;
padding-left: 0.0625rem;
line-height: 1.5;
left: 0;
top: 0;
content: "";
cursor: pointer;
}
.contact-form .tab-panel input:checked~.input-checkbox::before {
font-family: "BASFIconFontNewStyle";
content: "\e90f";
}
.contact-form .button-group {
clear: both;
display: flex;
}
.contact-form .contact-buttons {
padding: 1rem 2.375rem;
background: #65ac1e;
display: block;
border: 0;
color: #ffffff;
font-size: 1rem;
margin: 0.625rem 0;
cursor: pointer;
font-weight: bold;
text-decoration: none;
}
.contact-form .contact-buttons.cancel-edit {
background: transparent;
color: #65ac1e;
}
@media screen and (min-width: 768px) {
.contact-form .tab-panel .form-group {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.contact-form .tab-panel .field-outer-wrapper {
flex-shrink: 0;
flex-grow: 1;
}
}
@media screen and (max-width: 768px) {}
/********************/
.contact-form .field-wrapper .fields .error,
.contact-form .field-wrapper .select-wrapper .error {
border-top: none;
background: #fae5e8;
}
.contact-form .field-wrapper .fields label.error,
.contact-form .field-wrapper .select-wrapper label.error,
#prefEmail-error,#prefphone-error {
background: none;
color: #d0021b;
font-weight: 600;
padding-top: 10px;
display: block;
}
.contact-form .field-wrapper .fields label.error::after,
.contact-form .field-wrapper .select-wrapper label.error::after,
.contact-form .basf-modal-wrap label.error::after {
font-family: BASFIconFont;
content: "\e014";
position: absolute;
right: -21px;
top: 18px;
}
.contact-form .field-wrapper .select-wrapper label.error::after{
top:42%;
}
.contact-form .basf-modal-wrap label {
font-family: var(--fontfamily);
color:#333;
}
.contact-form .basf-modal-wrap label.error {
position: absolute;
bottom: -22px;
width: 720px;
color: #d0021b;
font-weight: 600;
font-size: 14px;
}
/*********************/
.basf-modal-wrap.hydrated .radio-group .radio-wrapper{
width:100%;
}
.input-wrapper.checkbox.disabled {
opacity: 0.5
}
input.radiocheckbox,
input.copyAccountCheckbox {
appearance: none;
width: 1.125rem;
height: 1.125rem;
border-top: 1px solid #b8b8b8;
background: #f0f0f0;
border-radius: 2px;
display: inline-grid;
place-content: center;
}
input.radiocheckbox::before,
input.copyAccountCheckbox::before {
content: "";
width: 12px;
height: 12px;
transform: scale(0);
transform-origin: bottom left;
background-color: #000;
clip-path: polygon(13% 50%, 34% 66%, 81% 2%, 100% 18%, 39% 100%, 0 71%);
}
input.radiocheckbox:checked::before,
input.copyAccountCheckbox:checked::before {
transform: scale(1);
}
input.radiocheckbox:checked,
input.copyAccountCheckbox:checked {
border-top: 1px solid #b8b8b8;
background: #f0f0f0;
}
/****************addcontact***********/
.account-info {
width: 740px;
margin: 0 auto;
font-size: 18px;
padding: 30px 0px;
}
.account-info h3 {
font-weight: bold;
}
#ACthankyou {
display: none;
position: relative;
z-index: 9;
}
.formsubmit {
padding: 20px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 200px;
background: #fff;
z-index: 1;
}
.formsubmit p {
font-size: 20px;
}
.backgroundform {
background: #000;
opacity: 0.5;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
position: fixed;
}
.formsubmit a {
padding: 1rem 2.375rem;
background: #65ac1e;
display: inline-block;
border: 0;
color: #ffffff;
font-size: 1rem;
margin-top: 20px;
cursor: pointer;
font-weight: bold;
text-decoration: none;
}
/************breadcrumb***************/
.crumbs ol{
padding:20px;
}
.crumbs li
{
font-size:1rem;
letter-spacing: -0.3px;
line-height: 0.9375rem;
display: inline-block;
color:#000;
margin:0px 10px;
}
.crumbs li a{
color:var(--brand-color);
text-decoration:none;
}
.crumbs li::after{
font-family: "BASFIconFontNewStyle";
content: "\e906";
font-size: 0.7rem;
padding: 0 0 0 10px;
}
.crumbs li.cmp-breadcrumb__item--active::after{
content:""
}
/************************/
.tyMessage{
display:none;
}
.tabs li.dynamicTabs-js {
display: none;
}
/************/
.terms-conditions#tcmodalContent{
text-align:left;
display:none;
max-width:100%;
}
.modal-content-inner-tc{
width:80%;
padding:40px;
background:#fff;
margin:0 auto;
}
.modal-content-inner-tc .termsAndCondition b{
font-weight:bold;
}
.modal-content-inner-tc .close{
float:right;
font-weight:bold;
}
.modal-content-inner-tc .termsAndCondition h3{
font-size:20px;
margin-top:20px;
}
.modal-content-inner-tc .termsAndCondition a{
text-decoration:underline;
color:blue;
}
.modal-content-inner-tc .termsAndCondition p{
margin-top:20px;
line-height:20px;
}
.modal-content-inner-tc .acceptterms input{
display:inline;
width:20px;
height:20px;
position:relative;
top:5px;
margin-right:10px;
}
.modal-content-inner-tc .acceptterms{
margin-bottom:20px;
}
.tc-submit-button{
cursor:pointer;
}
#result{
display:none;
}
/************/
.order-modal{
max-width:100%;
}
.order-modal .modal-content-inner-tc{
width:40%;
}
#closeModalorder{
position:relative;
top:-20px;
right:-20px;
}
/* ROOT VARIABLES*/
:root {
--dc-footer-container-padding :10px;
--dc-footer-inner-column-padding: 10px;
--dc-footer-background:#333;
--dc-white: #FFF;
}
.dc-footer a[href] {
color: #fff;
text-decoration: none;
}
/* footer component styles*/
.dc-footer{
padding: 20px 40px 40px;
background: var(--dc-footer-background);
color:var(--dc-white);
font-family: var(--fontfamily);
}
.dc-footer .dc-Container{
background-color: unset;
}
.dc-footer .footer-head, .dc-footer .footer-foot {
padding: var(--dc-footer-container-padding);
}
.dc-footer .footer-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0;
padding-right: 0;
}
.dc-footer .footer-head .brand-name {
display: flex;
flex-direction: column;
flex-wrap: wrap;
font-size: 24px;
font-weight:bold;
}
.dc-footer .footer-head .brand-image{
@media (max-width: 500px) {
width:80px;
}
}
.dc-footer .footer-head .brand-image img{
margin-right: -24px;
@media (max-width: 500px) {
width:100%;
margin-right: 0px;
}
}
.dc-footer .footer-head .brand-name .sub-name{
font-size: 20px;
margin-top: 10px;
@media (max-width: 500px) {
margin-top:0px;
}
}
.dc-footer-hr {
opacity:1;
border: 0.5px solid rgba(255, 255, 255);
width:100%;
}
.dc-footer .container {
display: flex;
flex-wrap: wrap;
margin-top:40px;
}
.dc-footer .container>.column {
width: 25%;
padding: var(--dc-footer-container-padding);
box-sizing: border-box;
}
.dc-footer .container>.column:first-child ul li{
margin-bottom:20px;
}
.dc-footer .container>.column:first-child ul li:first-child{
font-weight:normal;
margin-bottom:20px;
}
.dc-footer .container>.column ul {
list-style-type:none;
margin: 0;
padding: 0;
}
.dc-footer .container>.column ul li.label{
margin-bottom:0px;
font-weight:bold;
}
.dc-footer .container>.column ul ul{
margin-bottom:20px;
}
.dc-footer .container>.column ul li.header{
font-weight: bold;
font-size: 16px;
}
.dc-footer .container>.column ul li{
margin-bottom: 0.5rem;
line-height: 25px;
margin-right: 80px;
}
.dc-footer .footer-foot {
margin-top: 3rem;
display:grid;
column-gap:1rem;
grid-template-columns:1fr 1fr 2.6fr;
}
.dc-footer .privacy-links ul{
display:flex;
}
.dc-footer .privacy-links li{
padding:0px 15px;
border-left:1px solid #fff;
}
.dc-footer .privacy-links li:first-child{
bordeR:0px;
padding-left:0px;
}
/* footer component @media queries */
@media (max-width: 768px) {
.dc-footer .container>.column {
width: 50%;
}
.dc-footer .footer-foot{
grid-template-columns:1fr 1fr;
}
.dc-footer .footer-head {
grid-gap: 1rem;
}
}
@media (max-width: 500px) {
.dc-footer .container>.column {
width: 100%;
}
.dc-footer .footer-foot{
grid-template-columns:1fr 1fr;
}
}
/*********social icons**********/
.dc-footer .container>.column.social ul{
display: flex;
flex-wrap: wrap;
}
.dc-footer .container>.column.social ul li.label{
text-indent: 0px;
width:100%;
font-weight:bold;
}
.dc-footer .container>.column.social ul li{
margin-right: 8px;
}
.social li{
font-style: normal;
font-weight: normal;
position: relative;
overflow: hidden;
text-indent: -500px;
height: 30px;
width: 47px;
}
.social a::before{
font-family: "BASFIconFontNewStyle";
position: absolute;
top: 50%;
left: 50%;
text-indent: 0;
font-size: 1.3rem;
transform: translate(-50%, -50%);
}
.social a[href*="linkedin.com"]::before {
content: "\e922";
}
.social a[href*="facebook.com"]::before {
content: "\e916";
}
.social a[href*="twitter.com"]::before {
display: inline-block;
width: 1em;
height: 1em;
content: "";
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-position: center 3px;
top:30%;
}
.social a[href*="instagram.com"]::before {
content: "\e91e";
}
.social a[href*="youtube.com"]::before {
content: "\e93e";
}
#repDetailsfooter li span{
display:block;
}
.subnav-footer {
display:none;
}
#repDetailsfooter .subnav-footer {
display:block;
}
@font-face {
font-family: "BASFIconFontNewStyle";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/BASF_Icons.eot?#iefix") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/BASF_Icons.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/BASF_Icons.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/BASF_Icons.svg#BASFIconFontNewStyle") format("svg")
}
@font-face {
font-family: "BASFIconFont";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/111541749-BASF_Iconfont.eot?#iefix") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/111541749-BASF_Iconfont.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/111541749-BASF_Iconfont.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/111541749-BASF_Iconfont.svg#BASFIconFont") format("svg")
}
@font-face {
font-family: "Roboto regular";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-regular.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-regular.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-regular.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-regular.woff2") format("woff2");
}
@font-face {
font-family: "Roboto heavy";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-900.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-900.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-900.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-900.woff2") format("woff2");
}
@font-face {
font-family: "Roboto medium";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-500.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-500.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-500.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-500.woff2") format("woff2");
}
@font-face {
font-family: "Roboto light";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-100.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-100.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-100.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-100.woff2") format("woff2");
}
@font-face {
font-family: "Roboto bold";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-700.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-700.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-700.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-700.woff2") format("woff2");
}
@font-face {
font-family: "Roboto condensed";
font-style: normal;
font-weight: normal;
src: url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-300.eot") format("embedded-opentype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-300.ttf") format("truetype"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-300.woff") format("woff"),
url("../../../content/dam/basfeupf/fonts/roboto-v27-latin-300.woff2") format("woff2");
}
#viewDiv {
padding: 0;
margin: 0;
height: 280px;
width: 100%;
margin-bottom:20px;
cursor:pointer;
--esri-view-outline-offset:none;
}
.esri-ui-inner-container.esri-ui-manual-container {
display: none;
}
#navigatoToLink{
font-weight:bold;
}
.dc-Container {
display: flex;
flex-direction: column;
}
.dc-accountOverview a[href] {
color: #65ac1e;
text-decoration: none;
}
.dc-Container h1 {
font-size: 2.25rem;
letter-spacing: -0.08px;
line-height: 2.375rem;
margin-top: 48px;
margin-bottom: 20px;
margin-left: 30px;
@media only screen and (max-width: 800px) {
font-size: 1.75rem;
letter-spacing: -0.06px;
line-height: 1.875rem;
}
}
.dc-accountOverview .dc-Container h1 {
margin-left: 20px;
}
.dc-accountOverview h3 {
font-size: 1.45em;
line-height: 1.375rem;
padding: 15px 0 30px;
margin-bottom: 2rem;
border-bottom: 1px solid #333;
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.dc-accountOverview .dc-Content {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.dc-accountOverview .dc-Content .dc-Left {
flex: 0 0 32%;
padding: 0 20px;
box-sizing: border-box;
}
.dc-accountOverview .dc-Content .dc-Right {
flex: 0 0 65%;
padding: 0 25px;
box-sizing: border-box;
}
.dc-accountOverview .acc-infos {
margin-bottom: 40px;
}
.dc-accountOverview .acc-infos .account-type, .dc-accountOverview .acc-infos .account-id {
margin-bottom: 20px;
}
.dc-accountOverview .acc-infos .section .label {
font-family: "Roboto bold";
font-size: 1rem;
line-height: 1.125rem;
}
.dc-accountOverview .acc-infos .section .acc-info-values {
font-size: 1rem;
line-height: 1.125rem;
}
.dc-accountOverview .acc-infos .account-rep {
margin-bottom: 20px;
}
.dc-accountOverview .acc-infos .account-rep a {
color: #65ac1e;
font-weight: normal;
display: block;
font-size: 1rem;
line-height: 1.125rem;
font-family: "Roboto bold";
}
.section h3 {
margin-bottom: 5px;
}
.section p {
margin-top: 0;
margin-bottom: 0;
}
.dc-Right .addresses .map-image {
width: 780px;
height: 264px;
overflow: hidden;
}
.dc-Right .addresses .map-image img {
width: 100%;
height: auto;
}
.dc-Right .addresses .address-wrapper {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.dc-Right .addresses .physical-address,
.dc-Right .addresses .mailing-address {
flex: 0 0 50%;
}
.dc-Right .addresses .address-wrapper .label {
display: block;
padding: 0px 0 7px;
font-family: "Roboto bold";
font-size: 1rem;
line-height: 1.125rem;
}
.dc-Right .addresses .address-wrapper p {
color: #333;
font-size: 1rem;
line-height: 1.125rem;
}
.dc-Right .addresses .address-wrapper p a {
color: #65ac1e;
font-family: "Roboto bold";
cursor: pointer;
}
.dc-accountOverview h3 .second-label {
display: inline-block;
margin: 0;
margin-left: auto;
}
.dc-accountOverview h3 .second-label .edit-link {
font-size: 1rem;
margin: 0 0 0 1rem;
float: none;
position: static;
font-family: "Roboto bold";
}
.dc-Right .contactmethods h3 {
flex: 0 0 auto;
}
#editModal {
max-width: 100%;
}
/* Modal container */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
/* Modal content */
#editModal .modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 15px;
border: 1px solid #888;
width: 60%;
max-width: 640px;
max-height: 80vh;
padding: 80px;
overflow-y: auto;
position: relative;
}
/* Close button */
#editModal .close {
color: #333;
position: absolute;
top: 0;
right: 0;
padding: 30px;
}
#editModal .close .close-new {
font-size: 0.8em;
margin: 0;
}
.icon-style.close-new::before {
content: "\e911";
}
.icon-style.information-circle::before {
content: "\e00f";
font-family: BASFIconFont;
}
#editModalContent .title {
margin-bottom: 1.5rem;
overflow: hidden;
}
#editModalContent h2 {
margin-bottom: 0.2em;
font-size: 2.25rem;
line-height: 2.375rem;
font-family: "Roboto light";
font-weight: 600;
}
#editModalContent .sub-title {
color: #333;
font-size: 1rem;
line-height: 1.125rem;
margin-bottom: 1.1rem;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Method of Contact heading */
.headingsection {
font-weight: bold;
}
/* Phone and Email sections */
.methodofcontactinfo {
margin-bottom: 20px;
}
/* Phone Label and Phone Number input styling */
.Phoneinfo label {
font-weight: bold;
}
/* Checkbox styling */
.Enabletextbox {
display: flex;
align-items: center;
}
/* Email Label and Email Address input styling */
.Emailinfo label {
font-weight: bold;
}
.container {
display: flex;
justify-content: space-between;
}
.info {
width: 45%;
}
.container label {
font-weight: bold;
}
.Enabletextbox {
display: flex;
margin-top: 10px;
}
.info-icon-container {
background-color: white;
margin-left: 10px;
padding: 5px;
}
.info-icon-container i {
color: green;
}
.methodgroups {
display: flex;
justify-content: space-between;
}
.method-group {
width: 48%;
box-sizing: border-box;
margin-bottom: 15px;
}
.method-group h3 {
font-size: 1.2rem;
margin-bottom: 0.9375rem;
padding: 0;
margin-top: 0.9375rem;
border: 0 none;
}
.method-group .contact-method .label {
display: block;
font-size: 1rem;
line-height: 1.125rem;
font-family: "Roboto bold";
}
.method-group .contact-method .label .preferred {
background-color: #dcdcdc;
border-radius: 0.625rem;
color: #333;
display: inline-block;
font-family: "Roboto regular";
font-size: 0.625rem;
height: 1.25rem;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1.25rem;
padding: 0 0.625rem;
vertical-align: bottom;
margin-left: 10px;
}
.method-group .contact-method a {
display: block;
margin-bottom: 15px;
line-height: 1.25rem;
font-family: "Roboto bold";
}
.method-group .contact-method a:hover {
text-decoration: none;
}
.PrimaryContact .account-primary a {
color: #65ac1e;
font-size: 1rem;
line-height: 1.25rem;
font-family: "Roboto bold";
}
.PrimaryContact .account-primary .role {
display: block;
margin-bottom: 20px;
color: #333;
line-height: 1.125rem
}
.PrimaryContact .contact-method {
display: block;
width: 100%;
margin-top: 25px;
}
.PrimaryContact .contact-method .label {
display: block;
font-family: "Roboto bold";
color: #333;
font-size: 1rem;
line-height: 1.25rem;
text-transform: capitalize;
position: relative;
}
.PrimaryContact .contact-method .label .preferred {
background-color: #dcdcdc;
border-radius: 0.625rem;
color: #333;
display: inline-block;
font-family: "Roboto regular";
font-size: 0.625rem;
height: 1.25rem;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1.25rem;
padding: 0 0.625rem;
vertical-align: bottom;
margin-left: 10px;
position: relative;
top: -3px;
}
.PrimaryContact .contact-method a {
color: #65ac1e;
text-decoration: none;
font-family: "Roboto bold";
}
.method-group a {
text-decoration: none;
color: #007bff;
}
.icon-style.edit-new::before {
content: "\e914";
font-family: "BASFIconFontNewStyle";
}
.dc-accountOverview .second-label .edit-link .edit-new {
font-size: 1.5rem;
vertical-align: bottom;
margin-right: 5px;
top: 2px;
position: relative;
}
#editModal .moc-phone, #editModal .moc-email {
display: block;
overflow: hidden;
margin-bottom: 1.5rem;
}
#editModal .method-of-contact-info {
float: left;
width: 66.6666%;
}
#editModal .method-of-contact-tools.field-wrapper {
float: left;
width: 33.3333%;
margin: 0;
}
#editModal .method-of-contact-tools .radio-group, #editModal .method-of-contact-tools .checkbox-grouping {
width: 100%;
padding: 0 0.625rem;
}
#editModal .method-of-contact-tools .radio-group label {
text-align: center;
margin: 0;
padding: 0;
width: 100%;
display: inline-block;
font-size: 1rem;
color: #333;
font-family: "Roboto regular";
}
#editModal .method-of-contact-tools .radio-group .input-wrapper {
margin: 0.625rem auto 1.625rem auto;
display: block;
float: none;
width: 1.125rem;
}
#editModal .method-of-contact-tools .radio-group input {
margin: 0 auto;
display: block;
float: none;
width: 20px;
height: 20px;
position: relative;
z-index: 2;
}
#editModal .input-wrapper {
position: relative;
}
#editModal .input-wrapper .input-radio {
width: 1.125rem;
float: left;
margin: 0 0.625rem 0.625rem 0;
position: relative;
-webkit-appearance: none;
background-color: transparent;
border: 0;
padding: 0.625rem;
clear: left;
padding: 0;
position: absolute;
top: 0;
left: 0;
-webkit-appearance: none;
background-color: transparent;
border: 0;
height: 20px;
}
#editModal .method-of-contact-tools .checkbox-grouping .checkbox-container {
text-align: center;
}
#editModal .method-of-contact-tools .checkbox-grouping label {
color: #333;
font-size: 1rem;
font-family: "Roboto bold";
}
#editModal .checkbox-grouping .input-wrapper {
margin: 0.625rem auto 1.625rem auto;
display: block;
float: none;
width: 1.125rem;
position: relative;
}
#editModal .checkbox-grouping .input-wrapper input {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
-webkit-appearance: none;
background-color: transparent;
border: 0;
width: 1.125rem;
height: 1.125rem;
z-index: 2;
cursor: pointer;
}
#editModal .checkbox-grouping .input-wrapper .input-checkbox {
width: 1.125rem;
float: left;
margin: 0;
position: relative;
-webkit-appearance: none;
background-color: transparent;
border: 0;
}
#editModal .checkbox-grouping .input-wrapper .input-checkbox::before {
width: 1.125rem;
height: 1.125rem;
border-top: 1px solid #b8b8b8;
background: #f0f0f0;
font-size: 0.75rem;
position: absolute;
padding-left: 0.0625rem;
line-height: 1.5;
left: 0;
top: 0;
content: "";
cursor: pointer;
}
#editModal .checkbox-grouping .input-wrapper input:checked~.input-checkbox::before {
font-family: "BASFIconFontNewStyle";
content: "\e90f";
}
#editModal .field-wrapper span {
font-size: 1rem;
line-height: 1.125rem;
}
#editModal .field-wrapper {
margin: 0 0 1.25rem 0;
position: relative;
width: 100%;
}
#editModal .field-wrapper label {
color: #333;
margin-bottom: 0.625rem;
display: block;
font-size: 1rem;
font-family: "Roboto bold";
}
#editModal .field-wrapper input {
width: 100%;
display: block;
padding: 1rem;
background: #ffffff;
font-size: 1rem;
border: 1px solid #b8b8b8;
box-sizing: border-box;
color: #333;
font-family: Roboto Regular;
}
#editModal .warning-message {
color: #d0021b;
display: none;
font-size: 0.825rem;
font-family: "Roboto bold";
margin: 0.375rem 0;
padding: 0;
}
#editModal .new-moc {
display: block;
margin: 1rem 0;
}
#editModal .new-moc a {
color: #65ac1e;
font-family: "Roboto bold";
font-size: 1rem;
line-height: 1.125rem;
text-decoration: none;
}
#editModal .enable-text-messaging {
margin: 1rem 0 2rem;
display: flex;
}
#editModal .checkbox-grouping .enable-text-messaging .input-wrapper {
float: left;
margin: -3px 15px 0 0;
}
#editModal .checkbox-grouping .enable-text-messaging-icon {
display: inline;
position: relative;
}
#editModal .enable-text-messaging-icon .icon-style {
color: #65ac1e;
font-size: 1rem;
margin-left: 1rem;
vertical-align: middle;
width: 18px;
display: inline-block;
height: 18px
}
#editModal .enable-text-messaging-icon .tooltip {
display: none;
background-color: #f0f0f0;
border: 1px solid #b8b8b8;
padding: 1rem;
position: absolute;
left: calc(100% + 20px);
top: -2.5rem;
width: 190px;
z-index: 1;
}
#editModal .enable-text-messaging-icon:hover .tooltip {
display: block;
}
#editModal .enable-text-messaging-icon .tooltip::before {
content: "";
position: absolute;
left: -22px;
top: calc(50% - 11px);
border-width: 11px;
border-style: solid;
border-color: transparent #b8b8b8 transparent transparent;
}
#editModal .enable-text-messaging-icon .tooltip::after {
content: "";
position: absolute;
left: -20px;
top: calc(50% - 10px);
border-width: 10px;
border-style: solid;
border-color: transparent #f0f0f0 transparent transparent;
}
#editModal .enable-text-messaging-icon .tooltip .tooltip-title {
font-family: "Roboto bold";
}
#editModal .enable-text-messaging-icon .tooltip .tooltip-info {
font-family: "Roboto regular";
}
#editModal .new-form-content select, #editModal .field-wrapper.select-container {
max-width: 320px;
}
#editModal .new-form-content .select-container::before {
content: "\e903";
font-family: "BASFIconFontNewStyle";
cursor: default;
color: var(--brand-color);
background-color: transparent;
display: block;
font-size: 0.625rem;
height: 2.5rem;
width: 2.5rem;
line-height: 2.5rem;
padding-right: 0.625rem;
position: absolute;
text-align: right;
top: 2rem;
right: 0.3125rem;
pointer-events: none;
}
.new-method-of-contact {
overflow: hidden;
}
#editModal .invalid input {
border-top: none;
background: #fae5e8;
}
#editModal .invalid.empty-field .warning-icon {
display: block;
}
#editModal .invalid.empty-field .warning-message.empty-warning-message {
display: block;
}
#editModal .invalid.invalid-field .warning-message {
display: none;
}
#editModal .invalid.invalid-field .warning-message.invalid-warning-message {
display: block;
}
/* Form button area */
.form-button-area {
display: flex;
gap: 16px;
}
#editModal .form-button-area {
margin-top: 2rem;
margin-bottom: 4rem;
}
#editModal .form-button-area .submit-button {
background-color: #65ac1e;
color: #fff;
border: none;
padding: 1rem 2.375rem;
font-size: 1rem;
margin: 0.625rem 0;
cursor: pointer;
}
#editModal .form-button-area .cancel-button {
background-color: transparent;
color: #65ac1e;
border: none;
padding: 1rem;
font-size: 1rem;
margin: 0.625rem 0;
cursor: pointer;
}
.update-account-form .clear {
clear: both;
}
#accountUpdateSuccess {
display: none;
}
#accountUpdateSuccess .update-notification {
max-width: 1200px;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background: #333;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
transition: transform 0.5s;
z-index: 100;
}
#accountUpdateSuccess .notification-content {
color: #fff;
padding: 1rem;
font-family: "Roboto regular";
max-width: 1200px;
margin: 0 auto;
}
#accountUpdateSuccess .notification-content .icon {
padding: 1em;
color: #65ac1e;
font-family: "BASFIconFontNewStyle";
}
#accountUpdateSuccess .notification-content .icon-style.check-new::before {
content: "\e90f";
}
#editModal .field-wrapper label.error {
display: none !important;
}
#business-rep, #sales-rep, #tech-rep, #sam-rep, #seed-rep, #customer-service, #customer-care, #regional-manager, #district-manager {
display: none;
}
.order-visibility-section#order-visibility-page {
display: flex;
justify-content: center;
padding: 0 25px;
width: 100%;
min-height: 700px;
}
.order-visibility-section #embed-report-article {
width: 100%;
}
.order-visibility-section #status-of-report {
text-align : center;
margin-top: 25px;
font-size: 24px;
font-weight: 500;
color: #444;
}
/***************contact overview**************/
.dc-Overview {
width: 95%;
display: flex;
flex-direction: row;
justify-content: space-between;
font-family: var(--fontfamily);
margin: 0 auto;
}
.dc-Overview .aboutContact {
width: 28%;
}
.dc-Overview .addressContact {
width: 68%;
}
.dc-Overview .contactTitle {
margin-bottom: 2rem;
border-bottom: 1px solid #333 !important;
display: flex;
padding: 15px 0 30px;
font-size: 1.45em;
justify-content: space-between;
align-items: center;
}
.dc-Overview .contactTitle a {
color: #65ac1e;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
}
.dc-Overview .contactTitle a.icon-style.edit-new:before {
content: "\e914";
font-family: "BASFIconFontNewStyle";
margin-right: 5px;
}
.contactInfocon {
font-size: 17px;
}
.contactInfocon .contactInfoTitle {
font-weight: bold;
margin-bottom: 20px;
}
.contactInfocon .contactInfo {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 20px;
}
.contactInfocon .contactInfo span {
margin-top: 5px;
}
.contactInfocon .contactInfo a {
font-weight: bold;
color: #65ac1e;
text-decoration: none;
}
.contactInfocon .conInfocon {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.contactInfocon .conInfocon .conrightInfo {
width: 40%;
}
.workEmail {
font-size: 17px;
}
.workEmail p {
margin: 0px;
padding: 0px;
}
.workEmail p.prefered {
font-weight: bold;
margin-top: 15px;
}
.workEmail a {
color: #65ac1e;
font-weight: bold;
text-decoration: none;
}
.grey-pill {
background-color: #dcdcdc;
border-radius: 0.625rem;
color: #333;
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial;
font-size: 0.625rem;
height: 1.25rem;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1.25rem;
padding: 0 0.625rem;
vertical-align: bottom;
margin-left: 10px;
}
.communications {
display: flex;
}
.communications #comPhone {
width: 40%;
margin-right: 20px;
}
.workEmail .hidden,
#comEmail,
#comPhone {
display: none;
}
.banner-contactoverview {
margin-left: 50px;
display: none;
}
.banner-contactoverview .brand-pill {
background-color: var(--brand-color);
border-radius: 0.625rem;
color: var(--white);
display: inline-block;
font-size: 0.625rem;
height: 1.25rem;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1.25rem;
padding: 0 0.625rem;
vertical-align: bottom;
}
.banner-contactoverview h1 {
margin-top: 0px;
}
.banner-contactoverview .brand-user {
align-items: center;
display: flex;
margin-top: 10px;
}
.banner-contactoverview .user-avatar {
width: 60px;
height: 60px;
background: white;
vertical-align: top;
margin-right: 15px;
border-radius: 50%;
position: relative;
}
.banner-contactoverview .user-avatar span {
color: var(--brand-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
letter-spacing: -0.45px;
}
.banner-contactoverview .sub-title.role {
font-size: 1.563rem;
line-height: 2.25rem;
font-weight: 500;
margin-top: 1rem;
text-shadow: 2px 0 2px rgba(0, 0, 0, 0.5);
color: white;
margin-left: 75px;
}
.banner-contactoverview.true {
display: block;
}
.dc-Container .owl-carousel .owl-item .hero-image.true img.true {
height: 460px;
min-height: 460px;
}
.cxm-alphabet ul li:first-child a {
padding-left: 0;
}
.cxm-alphabet ul li a.active {
color: var(--text-grey);
}
.cxm-alphabet ul li a {
padding: 0.5rem;
font-weight: 700;
}
/** ALPHABET SECTION **/
.cxm-alphabet {
display: block;
margin-bottom: 2rem;
padding-top: 1rem;
padding-inline: 10px;
}
.cxm-alphabet ul li {
display: inline;
font-family: inherit;
}
.cxm-alphabet .alphabet-list ul li::before {
content: "•";
color: var(--white);
padding-right: 0.3em;
}
/** ADD CONTACT **/
.archive.add {
display: grid;
grid-template-columns: auto auto;
}
.archive.add .add-link a{
font-weight: 700;
color: var(--brand-color);
text-decoration: none;
margin-left: 3px;
font-size: 16px;
}
.archive.add .add-link a .add-icon {
margin-top: -2px;
position: relative;
top: 6px;
color: var(--brand-color);
}
/** CONTACT TABLE **/
.cxm-list {
position: relative;
display: block;
min-height: 200px;
padding: 3.125em 0;
}
.list-head.contacts section.contact-info .col a {
font-weight: 400;
color: var(--border-color);
color: var(--text-grey);
font-size: 16px;
}
.basf-account-contacts-row .list-head,
.basf-account-contacts-row .contact-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding: 6px;
}
.basf-account-contacts-row .list-head {
padding-bottom: 1rem;
}
.cxm-list .results-wrapper {
position: relative;
min-height: 200px;
}
.basf-account-contacts-row .list-head .col.bookmark,
.basf-account-contacts-row .contact-row .col.bookmark {
flex: 0 0 40px;
text-align: center;
margin-left: 0;
}
.basf-account-contacts-row .list-head .col,
.basf-account-contacts-row .contact-row .col {
color: var(--dark-grey);
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--dark-grey);
}
.basf-account-contacts-row .list-head section.contact-info,
.basf-account-contacts-row .contact-row section.contact-info {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
width: calc(100% - 55px);
}
.basf-account-contacts-row .list-head .col.contact,
.basf-account-contacts-row .list-head .col.account,
.basf-account-contacts-row .contact-row .col.contact,
.basf-account-contacts-row .contact-row .col.account {
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(50% - 10px);
max-width: calc(50% - 10px);
}
.basf-account-contacts-row .list-head a {
cursor: default;
display: block;
margin-bottom: 15px;
color: var(--text-grey);
font-family: inherit;
}
.basf-account-contacts-row .list-head a,
.basf-account-contacts-row .contact-row a {
text-decoration: none;
color: var(--brand-color);
}
.basf-account-contacts-row a,
.link {
font-family: inherit;
text-decoration: none;
}
.basf-account-contacts-row .list-head .col.preferred-phone,
.basf-account-contacts-row .list-head .col.preferred-email,
.basf-account-contacts-row .contact-row .col.preferred-phone,
.basf-account-contacts-row .contact-row .col.preferred-email {
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(25% - 10px);
max-width: calc(25% - 10px);
}
.basf-account-contacts-row .list-head .col input {
margin-top: auto;
background: #fff;
border: 1px solid var(--border-color);
}
input {
width: 100%;
display: block;
padding: 1rem;
font-family: inherit;
background: var(--white);
font-size: 1rem;
border: 1px solid var(--border-color);
box-sizing: border-box;
}
.cxm-list .results-wrapper {
position: relative;
min-height: 200px;
}
.basf-account-contacts-row .list-head,
.results-wrapper .contact-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.basf-account-contacts-row .list-head .col.bookmark,
.results-wrapper .contact-row .col.bookmark {
flex: 0 0 40px;
text-align: center;
margin-left: 0;
}
.basf-account-contacts-row .list-head a,
.basf-account-contacts-row .contact-row a {
font-size: 16px;font-weight: 700;
}
.basf-account-contacts-row .list-head .col {
border-bottom: none;
display: flex;
flex-direction: column;
}
/** OVERIDE **/
span.col.bookmark {
border-bottom: none !important;
}
/** PAGING **/
.pagination-container {
display: flex;
width: 30%;
margin-top: 15px;
gap: 0.8rem;
}
.pagination-container .left-column {
flex: 0 0 30%; /* 30% width for left column */
/* margin-right: 1rem; */
}
.pagination-container .middle-column {
flex: 1;
padding-inline: 8px;
}
.pagination-container .right-column {
flex: 0 0 30%; /* 30% width for right column */
}
.pagination-container button {
width: 100%;
border: none;
background: #ddd;
padding: 16px 15px;
position: relative;
width: 140px;
background: #f0f0f0;
border-top: 1px solid #a3a3a3;
cursor: pointer;
color: var(--text-grey);
color: #7c7c7c;
font-weight: 300;
}
.pagination-container select {
width: 100%;
border: none;
background: #eee;
padding: 16.5px 15px;
width: 180px;
border-top: 1px solid #b8b8b8;
}
#page-size-section {
margin-block: 10px;
left: -60px;
position: relative;
}
/* select#pageSize {
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
color: #333;
} */
select.contacts-page-select-box {
width: 100%;
border: 0;
border-radius: 0;
background: var(--box-grey);
border-top: 1px solid #b8b8b8;
box-sizing: border-box;
padding: 0.85rem 36px 0.85rem 1rem;
line-height: 1.4rem;
padding-right: 36px;
font-size: 1rem;
text-decoration: none;
color: var(--text-gray);
cursor: pointer;
}
/* font styles */
.fa {
font-size: 24px !important;
}
.fa.fa-bookmark {
color: green;
}
.contact-page-alphabet-holder {
cursor: pointer;
color: var(--brand-color);
font-family: inherit;
font-weight: 700;
font-size: 16px;
}
.alphabet-active {
color: #000;
}
.alphabet-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#acc-cnt-page-wrapper {
padding: 15px;
}
.contact-table-footer {
display: flex;
justify-content: space-between;
}
button#next-page:after {
content: "▼";
position: absolute;
right: 9px;
/* right: 70px; */
transform: rotate(-90deg);
}
button#prev-page:after {
content: "▼";
position: absolute;
left: 9px;
/* right: 70px; */
transform: rotate(90deg);
}
button#prev-page[disabled="disabled"] {
cursor: not-allowed;
pointer-events: none;
background-color: #dcdcdc;
border-top: 1px solid #a3a3a3;
}
span.primary-contact-span{
padding: 3px 8px;
border-radius: 25px;
background: var(--brand-color);
color: #eee;
font-size: 11px;
margin-left: 4px;
text-transform: uppercase;
}
.contact-info .contact span.value .role {
margin-top: 6px;
}