/**
 * @file: CiviCRM Stylesheet - Front theme
 *
 * NOTE: The main civicrm container has both class and id of crm-container
 *
/* 		
	Structure
	========= 
	- VARIABLES
	- NOTIFCACTIONS
	- BUTTONS
	- TABLES
	- CIVI DASHBOARD
	- FORMS
	- FORM BUILDER
	- FOOTER
	
	Notes
	=====
	- tab indented. no space between selectors.
	- main headings over five lines, with single space either side
	- sub-headings on one line, with single space either side
	- use of !important is typically to override css from other files in the /css/ directory.
*/

/*
	VARIABLES
*/	

:root {
    /* COLOURS */
    --text: #444;
    --primary: #43757A; 
    --secondary: #B24B4F;
    --dark-gray: #262626;
    --mid-gray: #ccc;
    --light-gray: #dedede;
    --vvv-light-gray: #f0f0f0; 
    --transparent-gray: rgba(0, 0, 0, 0.05);
    --green: #58a458;
    --light-green: #CFF0BE;
    --blue: var(--primary);
    --light-blue: #dff0f4;
    --cyan: #22ceea;
    --red: var(--secondary);
    --light-red: #ffdddd;
    --gold: #c67605;
    --yellow: #ffffcc;
    --dark-yellow: #f8e80b;
	
	/* SIZES */
    --radius: 1rem;
    --s: 0.25rem;
    --m: 0.5rem;
    --r: 1rem;
    --rs: 1.25rem;
    --rm: 1.5rem;
    --l: 2rem;
    --xl: 3rem;
    --xxl: 4rem;
	
	/* BUTTONS */
    --btn-txt-primary: #fff;
    --btn-txt-secondary: #fff;
    --btn-box-shadow: none;
    --btn-border: 0 solid transparent;
    --btn-txt-transform: inherit;
    --btn-radius: 10rem;
	
    /* TABLES */
    --table-row-line: 1px dotted var(--dark-gray);
    --table-column-line: 0 solid transparent;
    --table-font-size: calc(1 * var(--r));
    --table-header-line: 1px solid var(--dark-gray);
    --table-outside-border: 0 solid transparent;
    --table-header-bg: #fff;
    --table-header-txt: inherit;
    --table-even-row: var(--vvv-light-gray);
    --table-odd-row: transparent;
	
    /* FORMS */
    --input-width: 250px;
}

/* Geneeral */

.crm-container {
    color: var(--text);
}

/* Notifications */

.crm-container .status,
.crm-container .messages {
    background-color: var(--light-blue);
    background-image: none;
    border: 0 solid transparent;
    margin: var(--l) 0 var(--m);
    padding: var(--r) var(--l);
    color: var(--vvv-dark-gray);
    font-weight: normal;
}
.crm-container .help, 
.crm-container #help {
    background-color: var(--light-green);	
    padding: var(--r) var(--l);
}

/* Buttons */

.crm-container a.button, 
.crm-container a.button:link, 
.crm-container a.button:visited, 
.crm-container input.crm-form-submit,
.crm-container button.crm-form-submit, 
.crm-container .ui-dialog-buttonset .ui-button, 
.crm-container input[type="button"], 
.crm-container .crm-button,
.crm-container .af-button {
    text-shadow: none;
    overflow: visible;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    transition: .3s ease-in-out;
    cursor: pointer;
    font-size: inherit;
    background: var(--primary);
    background-color: var(--primary);
    box-shadow: var(--btn-box-shadow);
    color: var(--btn-txt-primary);
    border: var(--btn-border);
    margin: 0 var(--m) 0 0;
    text-transform: var(--btn-txt-transform);
    border-radius: var(--btn-radius);
    padding: 0 var(--l);
    line-height: var(--xl);
}
.crm-container .crm-button.cancel,
.crm-container a.button.cancel {
    float: right;
    background-color: var(--secondary);
    color: var(--btn-txt-secondary);
}
.crm-container .crm-button:hover, .crm-container .crm-button:focus {
    filter: brightness(1.5);
}
.crm-container .crm-submit-buttons {
    margin: var(--r) 0;
}

/* Tables */

.crm-container table {
    border-collapse: collapse;
    width: 100%;
    border: var(--table-outside-border);
}
#crm-container tr {
    font-size: var(--table-font-size);
    text-align: left;
}
.crm-container td,
.crm-container th 
/*.crm-container table.selector td,
.crm-container table.display thead th, 
.crm-container table thead.sticky th, 
.crm-container table.caseSelector tr.columnheader th,
.crm-container table.display thead th,
.crm-container table.display td,
.crm-container table.row-highlight td,
.crm-container table.row-highlight th,
.crm-container .form-item table td*/ {
    border-top: 0 solid transparent;
    border-bottom: var(--table-row-line);
    border-right: var(--table-column-line);
    vertical-align: top;
    padding: var(--s);
}
.crm-container table th,
.crm-container table.display thead th,
.crm-container table thead.sticky th,
.crm-container table.caseSelector tr.columnheader th {
    background-color: var(--table-header-bg);
    color: var(--table-header-txt);
    border-right: var(--table-column-line);
    border-bottom: var(--table-header-line);
    font-weight: bold;
}
.crm-container tr.even,
.crm-container tr.even-row td,
.crm-container .crm-row-child,
table.dataTable.stripe tbody tr.even, 
table.dataTable.display tbody tr.even{
    background-color: var(--table-even-row);
}
.crm-container tr.odd,
.crm-container tr.odd-row td,
table.dataTable.stripe tbody tr.odd, 
table.dataTable.display tbody tr.odd {
    background-color: var(--table-odd-row);
}
.crm-container tr.crm-row-ok td,
.crm-container tr.crm-row-error td {
    background-color: transparent;
} 
.crm-container td.checkbox {
    vertical-align: middle;
    text-align: center;
}
.crm-container tr.columnheader a.sorting {
    color: var(--dark-gray);
}
.crm-container thead div.sticky-header {
    z-index: 10;
    height: var(--r);
}
.crm-container .disabled,
.crm-container .disabled td,
.crm-container .cancelled,
.crm-container .cancelled td {
    color: var(--mid-gray);
}
#crm-container tr td:last-child,
#crm-container tr th:last-child,
.crm-container .form-item table td:last-child  {
    border-right: 0 solid transparent;
}
#crm-container table tr:last-child {
    border-bottom: 0 solid transparent;
}
#crm-container .crm-contribution-confirm-form-block td,
#crm-container .crm-contribution-confirm-form-block th,
.crm-container #content-right {
    border: 0 solid transparent;
}

/* Civi Dashboard */

.crm-container .header-dark {
    height: auto;
    font-weight: 600;
    margin: var(--s) 0;
    padding: var(--m) var(--r);
    background-color: var(--primary);
    color: var(--btn-txt-primary);
    border-radius: var(--radius);
}
.crm-container .font-red {
    color: var(--red);
}
.crm-container .crm-dashboard-civimember table {
    width: 100%;
}
.crm-container table th,
.crm-container table td {
    text-align: left;
}
.crm-container .crm-dashboard-civicontribute a.button {
    padding: 0 var(--r);
    line-height: var(--l);
}
.crm-container .crm-dashboard-civicontribute > td,
.crm-container .crm-dashboard-civimember > td {
    padding: 0 0 var(--m) 0;
    border: 0 solid transparent;
}
/* Forms  */

#crm-container fieldset {
    margin: var(--m) 0;
    padding: 0;
}
#crm-container.crm-public .label, 
.crm-container fieldset legend {
    font-weight: bold;
}
#crm-container.crm-public .crm-section, .crm-section {
    margin-bottom: 0;
    padding: var(--m) 0 var(--s) 0;
}
#crm-container.crm-public input[type="email"], 
#crm-container.crm-public input[type="password"], 
#crm-container.crm-public input[type="text"], 
#crm-container.crm-public select, #crm-container textarea {
    padding: var(--m);
    border-radius: 2px;
    width: var(--input-width);
    border: 1px solid var(--light-gray);
    height: 45px;
    font-size: var(--r);
    color: var(--vvv-dark-gray);
}
#crm-container textarea {
    height: 100px;
    width: 450px;
}
#crm-container .select2-container .select2-choice {
    height: 2rem;
}
#crm-container .crm-marker {
    color: var(--red);
}

/* Form Builder */ 

.crm-af-field-label {
    font-weight: bold;
}
.crm-af-field {
    padding: 2px 0;
}
.crm-af-field-help-pre {
    font-style: italic;
    margin-bottom: var(--s);
}
.af-field {
    margin: var(--r) 0;
    display: block;
}

/* Logo footer  */

#civicrm-footer.crm-public-footer {
    vertical-align: middle;
    text-align: right;
    font-size: var(--body-font);
    padding: var(--m);
}
.crm-container a.empowered-by-link {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 99px;
}
.crm-container div.empowered-by-logo {
    background: url('../images/civi99.png') no-repeat;
    display: block;
    line-height: 34px;
    position: absolute;
    top: 9px;
    width: 99px;
}
.crm-container div.empowered-by-logo span {
    visibility: hidden;
}