/* 
 * change the LOGIN gadget control in the header.
 *  - this one for club pages (loginButton, not LoginForm) 
 *  - custom icon
 *  - make sure Noto Sans JP text for all browsers.
 *    
 */
.WaGadgetLoginButton .loginLink:before {
     content: url(/resources/90_WEBSITE_DESIGN_ELEMENTS/ejca-login-icon.png)"  Log In";
    font-size: 18px;
    font-family: "Noto Sans JP";
    background: #EA6852;
    color: white;
}
.WaGadgetLoginButton .loginLink.hover::before {
     content: url(/resources/90_WEBSITE_DESIGN_ELEMENTS/ejca-login-icon.png)"  Log In";
    background: #3d3935;
    color: #EA6852;
}
.WaGadgetLoginButton .loginLink:hover {
     content: url(/resources/90_WEBSITE_DESIGN_ELEMENTS/ejca-login-icon.png)"  Log In";
    background: #3d3935;
    color: #EA6852;
}
.WaGadgetLoginButton .authenticated .loginLink:before {
    content: url(/resources/90_WEBSITE_DESIGN_ELEMENTS/ejca-login-icon.png)"  My Profile";
    font-size: 18px;
    font-family: "Noto Sans JP";
    background: #EA6852;
    color: white;
}
/* adjust size and colours for login gadget in the header */
.WaGadgetLoginButton .loginLink {
    width: 150px;
    height: 45px;
    background: #EA6852;
    color: white;
}
.WaGadgetLoginButton .loginLink.hover::before {
    background: #3d3935;
    color: #EA6852;
}
.WaGadgetLoginButton .loginLink:hover {
    background: #3d3935;
    color: #EA6852;
}

.WaGadgetLoginButton .authenticated .loginLink {
    width: 170px;
    height: 45px;
    background: #EA6852;
    color: white;
}

.WaGadgetLoginButton .authenticated .loginLink:hover {
    background: #3d3935;
    color: #EA6852;
}

/* 
 * change the LOGIN gadget control in the header.
 *  - custom icon
 *  - make sure Noto Sans JP text for all browsers.
 *    
 */
.WaGadgetLoginForm .loginLink:before {
     content: url(/resources/90_WEBSITE_DESIGN_ELEMENTS/ejca-login-icon.png)"  Log In";
    font-size: 18px;
    font-family: "Noto Sans JP";
}
.WaGadgetLoginForm .authenticated .loginLink:before {
    content: url(/resources/90_WEBSITE_DESIGN_ELEMENTS/ejca-login-icon.png)"  My Profile";
    font-size: 18px;
    font-family: "Noto Sans JP";
}
/* adjust size and colours for login gadget in the header */
.WaGadgetLoginForm .loginLink {
    width: 150px;
    height: 45px;
    background: #EA6852;
    color: white;
}
.WaGadgetLoginForm .loginLink.hover::before {
    background: #3d3935;
    color: #EA6852;
}
.WaGadgetLoginForm .loginLink:hover {
    background: #3d3935;
    color: #EA6852;
}

.WaGadgetLoginForm .authenticated .loginLink {
    width: 170px;
    height: 45px;
    background: #EA6852;
    color: white;
}

.WaGadgetLoginForm .authenticated .loginLink:hover {
    background: #3d3935;
    color: #EA6852;
}

/* 
    This is the Login Button you see in the drop-down
    form for Email & Password. It's displayed when clicking
    on the main login gadget in the header.
*/ 
.WaGadgetLoginForm .loginContainer .loginContainerInner .loginPanel .loginContainerForm form .loginAction input.loginButton {
    color: white;
    background: #EA6852;
}
.WaGadgetLoginForm .loginContainer .loginContainerInner .loginPanel .loginContainerForm form .loginAction.hover input.loginButton.hover {
    color: white;
    background-color: #D86150;
}

/* Change some header colours for the Admin help pages */
h1.admin-help-guide {
    color: blue;
}
h2.admin-help-guide {
    color: blue;
}
h3.admin-help-guide {
    color: blue;
}


/* Do not display the author of blog posts */
.WaGadgetBlog .boxBodyInfoOuterContainer h5 .postedByLink{
display:none;
}
.WaGadgetBlog .boxBodyInfoOuterContainer h5 .postedByLabel{
display:none;
}

/* Also remove the author's name from the 'recent blog post 'gadget  */
.WaGadgetRecentBlogPosts .gadgetStyleBody ul li .author {
 display: none;
}

/* Change the Blog Gadget buttons to match ejca style  */
.WaGadgetBlogStateList #idAddNewPostButtonContainer input[type=submit] {
    color: rgb(255, 255, 255);
    background-color: #EA6852;}
.WaGadgetBlog .controlPanel .toggleButton 
{
    color:white;
    background-color: #EA6852;
}
.WaGadgetBlog .controlPanel.opened .toggleButton
{
    color:white;
    background-color: #EA6852;
}
.WaGadgetBlog .controlPanel .controlPanelInner a
{
    color:white;
    background-color: #EA6852;
}

/* Change the navigation menu bar so that the text is not all captials  */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a{
text-transform: capitalize;
}
.WaGadgetMenuHorizontal .menuInner ul ul li > .item > a{
text-transform: capitalize;
}

/* Make the styling of the WA branding footer match our colours*/
.zonePlace.zoneWAbranding
{
    color:white;
    background-color: #3d3935;
    margin: 0px 0 0;
}
/* Change the buttons on accept terms and conditions page  */
.WaGadgetTermsOfUse .login-role-actions input[type=submit] {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;}
.WaGadgetTermsOfUse .login-role-actions input[type=submit]:hover {
    color: rgb(255, 255, 255);
    background-color: #D86150;}
/* Change the buttons various Profile edit pages  */
.WaGadgetContactProfile .topButtonsOuterContainer input[type=submit] {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;}
.WaGadgetContactProfile .topButtonsOuterContainer input[type=submit]:hover {
    color: rgb(255, 255, 255);
    background-color: #D86150;}
.generalFieldsContainer input[type=submit] {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;}
.generalFieldsContainer input[type=submit]:hover {
    color: rgb(255, 255, 255);
    background-color: #D86150;}
/* Change the buttons on 'authorization required' system page  */ 
.WaGadgetAuthorizationRequired .loginPageTable #idLoginButtonBox  input[type=submit] {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;}
.WaGadgetAuthorizationRequired .loginPageTable #idLoginButtonBox input[type=submit]:hover {
    color: rgb(255, 255, 255);
    background-color: #D86150;}
/* hide the login via facebook etc */    
.WaGadgetAuthorizationRequired .openAuthFormContainer {
    display: none;
}
.WaGadgetAuthorizationRequired .authFormContainer {
    border-left: 0px;
    padding-left: 0px;
}

.commonMessageBox .cww-co .buttons input[type="submit"]{
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;}
.commonMessageBox .cww-co .buttons input[type="submit"]:hover {
    color: rgb(255, 255, 255);
    background-color: #D86150;
}
/* Add member to bundle page - button colours  */ 
.navigationOuterContainer input[type=submit] 
 {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;
}
.navigationOuterContainer input[type=submit]:hover {
    color: rgb(255, 255, 255);
    background-color: #D86150;
}
.navigationOuterContainer input.nextButton
 {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;
}
.navigationOuterContainer input.nextButton:hover 
{
    color: rgb(255, 255, 255);
    background-color: #D86150;
}
/* change the black bg colour in the photoalbum thumbs  */
.WaGadgetPhotoAlbum.gadgetStyleNone #idPhotoMainContainer #idPhotoMainSectionContainer #idImageContainer {
     background: #EA6852;
 }
ul.photosContainerUL [class^='photoInnerContainer'] {
    background: #EA6852;
}

/* Events - button colours  */ 
.WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxActionContainer input.typeButton {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;
}
.WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxActionContainer input.typeButton:hover {
    color: rgb(255, 255, 255);
    background-color: #D86150;
}
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .boxActionContainer input.typeButton {
      color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;
}
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .boxActionContainer input.typeButton:hover {
    color: rgb(255, 255, 255);
    background-color: #D86150;
}
/* 20201108 Stefan: make iframes reponsive */
/* read https://profromgo.com/blog/google-calendar-responsive/ */
/* needs a <div class="responsive-iframe-container"> and </div> around the iframe snippet */
/* Responsive iFrame */

.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Change the buttons for Poll pages  */
.WaGadgetPoll .bottomLine input[type=submit] {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: #EA6852;}
.WaGadgetPoll .bottomLine input[type=submit]:hover {
    color: rgb(255, 255, 255);
    background-color: #D86150;}
/* Change the slideshow background from black to white  */
.camera_wrap {
    position: relative;
    z-index: 0;
    float: left;
    display: none;
    width: 100%;
    background: #ffffff    
}
/* Stefan May 2026: Mobile header login button — paint-only backdrop.
   Strategy: WA paints its icon-font glyph on top of whatever we
   put as background. We provide an orange tile with a white
   inset square (so WA's dark glyph reads clearly against white)
   and a label band below. No layout, no pseudo-elements,
   no font overrides — pure paint. */
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton.buttonLogin {
    background-color: #EA6852;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><rect x='11' y='6' width='28' height='28' rx='3' fill='white'/><text x='25' y='46' text-anchor='middle' font-family='sans-serif' font-size='8' fill='white' font-weight='700'>Log In</text></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.WaGadgetMobilePanel .mobilePanel .mobilePanelButton.buttonLogin:hover {
    background-color: #D86150;
}

.WaGadgetMobilePanel .mobilePanel .mobilePanelButton.buttonLogin.logged {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><rect x='11' y='10' width='28' height='28' rx='3' fill='white'/><text x='25' y='46' text-anchor='middle' font-family='sans-serif' font-size='8' fill='white' font-weight='700'>Profile</text></svg>");
}