.smallText {
    font-weight: lighter;
    font-size: 0.9em;
}
.tinyText {
    font-size: 0.8em;
}


.create-appointment-button {
    margin-bottom: 1rem !important;
    background: var(--header-bg) !important; 
    border: 1px solid var(--header-bg) !important;
    color: white !important;
    padding: 8px 12px !important;
    text-align: center !important;
    display: inline-block !important;
    font-size: 16px !important;
    /* rounded corner */
    border-radius: 2em;
    padding: 0.4em 2em;
    /* background-color: #999; */
}

/* FIXME: is this used? */
.field-copy_of_tax_rate {display:none !important; }

/* FIXME: copy of inline_services.css.  Delete that file and remove where it is included. 
Then merge this with .form_check_inline. */
ul.svc-grid{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none}

/* 3 columns on wide screens; adjust as you like */
ul.svc-grid>li{flex:1 1 calc(33.333% - 16px);min-width:180px}

/* Tighter label spacing */
ul.svc-grid label{display:inline-flex;align-items:center;gap:6px}


/* the container that holds all checkbox <div>s */
.form_check_inline:not(input){
  display: grid;
  grid-auto-flow: column;           /* fill down, then new column */
  grid-template-rows: repeat(4, auto); /* 4 rows per column */
  row-gap: 10px;
  column-gap: 16px;
  align-items: start;
}
.form_check_inline:not(input) > div > label{
  display: flex;
  align-items: flex-start; /* better when label wraps */
  gap: 6px;
}
.form_check_inline:not(input) > div > label > input[type="checkbox"]{
  margin-top: 2px;         /* tweak alignment if you want */
  flex: 0 0 auto;
}



/* Rename to form_checkboxes */
/*
.form_check_inline  {
    list-style:none;
    flex:1 1 calc(33.333% - 16px);
    min-width:180px;
    /* gap:6px 16px; 
    margin:0;
    padding:0; */
/*
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: none;
    row-gap: 10px;
    justify-content: flex-start;
}
*/

.colM, .centered {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-evenly;
    align-items: center;
}
.colM {
    font-size: 125%;
}

/*.vTextField {
    width: 30ch !important;
    color: red !important;
}
*/

/* NOTE: The following 'id_xxx' CSS ID's won't be found in my templates.  These ID's are generated by Django to match object field names. */
/* Customer */
#id_street_number { width: 7ch !important;}
#id_address2 { width: 12ch !important; }
#id_street_name {width: 25ch !important; }
#id_city { width: 20ch !important; }
#id_county { width: 20ch !important; }
#id_state{ max-width: 25ch !important; }
#id_zipcode { width: 9ch !important; }
#id_grt_rate { width: 9ch !important; }
#id_grt_location_code { width: 9ch !important; }

/* Piano */
[id$="brand"] { width: 16ch !important; }
[id$="model"] { width: 9ch !important; }
[id$="serial"] { width: 10ch !important; }

/* Appointment */
[id^="id_appointments"][id$="amount"] { width: 10ch !important; }
[id^="id_appointments"][id$="tax_type"] { width: 21ch !important; }
[id^="id_appointments"][id$="tax_charged"] { width: 8ch !important; }
[id^="id_appointments"][id$="tip"] { width: 8ch !important; }


.landing-page-image {
    margin-top: 100px;
    border: solid 2px gray;
}