/*
    CSS template for My Account mailing list management integration for Piano
    
    This file should be parsed by the JT Piano Integration plugin to dynamically build 
    stylesheets depending on whether the sandbox or production systems are being used.
    
    adapted from sample code provided by Piano
    
    Author: Alan Premselaar <alan.premselaar@japantimes.co.jp>
    Copyright (c) 2020 The Japan Times
    All rights reserved.  
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=Swap');

/* styling for piano-esp-management-block per request */
.piano-esp-management-block {
    font-family: 'Noto Sans', sans-serif !important;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: 15px;
    border: 1px solid #eee;
    background-color: #fff;   
}

.newsletter-header h1 {
    font-family: 'Noto Sans', sans-seif !important;
    font-size: 17px; 
    text-align: center;
}

form#newsletter-form .newsletter-sections {
    width: 60%;
    margin: 20px auto;
}

form#newsletter-form div.newsletter-sections label.nl-checkbox-label {
    font-size: 16px !important;   
}

.piano-esp-management-block form#newsletter-form input#nl-subscriptions {
    font-family: Pluto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 14px;
    width: 30%;
    margin: 0 auto;
    padding: 8px;
}

.newsletter-sections .one-section {
/*     padding: 0px 0px 10px 0px;    */
}

.nl-checkbox {
    /* styling for newletter checkbox elements */
    margin-right: .8rem;
}

.newsletter-sections label span {
    color: #000;
    font-family; 'Noto Sans', sans-serif;
    font-size: 14px;
    line-height: 16px;   
}


/* for the My Account page footer (If you need help...) */
.help-footer {
    font-family: 'Noto Sans', sans-serif !important;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    width: 90%;
    padding-top: 20px;
    margin: 60px auto 0;
    border-top: 1px solid #ccc;
}

.newsletters-submit,
input[type=submit]#nl-subscriptions {
    /* the submission button for newsletter selection */
    width: 10%;
    margin-left: 20%;
    margin-top: 2%;
}