:root {
	--covid-color: #da1010;
}

* {
	margin: 0;
	padding: 0;
}

body {
	background: #f9f9f9;
	font-family: verdana,helvetica,arial,sans-serif;
	font-size: 16px;
}

ul, ol {
	margin-left: 1em;
}

a {
	color: #003d4c;
	text-decoration: underline;
	font-weight: bold;
}
a:hover {
	color: #367889;
	text-decoration: none;
}
a img {
	border: none;
}

small {
	font-size: 75%;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

.floatClear {
	clear: both;
}

.inline {
	display: inline;
}

.framed {
	margin: .5em 0;
	padding: 1em;
	border: 1px solid #dbdbdb;

	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

.shadow {
	box-shadow: 3px 3px 3px #dbdbdb;
	-moz-box-shadow: 3px 3px 3px #dbdbdb;
	-webkit-box-shadow: 3px 3px 3px #dbdbdb;
}

.border {
	border: 1px solid #004296;
}

.padded1 {
	padding: 1em;
}

.padded05 {
	padding: .5em;
}

.width50 {
	margin: 0 25%;
}

.spaced1em {
	margin-top: 1em;
	margin-bottom: 1em;
}

.rounded4 {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.spacing1 {
	letter-spacing: 1px;
}

.white {
	background-color: #fff;
}

.red {
	background-color: #ff6f6f;
}

.green {
	background-color: #6fff6f;
}

.yellow {
	background-color: #ffff6f;
}

.lightgrey {
	background-color: #eee;
}

.uppercase {
    text-transform: uppercase;
}

.warning {
	background-color: #ff4040;
	color: #fff;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	box-shadow: 0 0 4px #999;
	-moz-box-shadow: 0 0 4px #999;
	-webkit-box-shadow: 0 0 4px #999;
}

.message {
	margin: 1em 10%;
	text-align: center;
	padding: 1em;
	font-size: .8em;
	background: #0082d6;
	color: white;
	border: 1px solid #00609e;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	box-shadow: 3px 3px 3px #dbdbdb;
	-moz-box-shadow: 3px 3px 3px #dbdbdb;
	-webkit-box-shadow: 3px 3px 3px #dbdbdb;
}

.message a {
	color: #60ffff;
}

#flashMessage {
	text-align: center;
	padding: 1em;
	font-size: 1.5em;
	line-height: 1.5em;

	position: absolute;
	top: 45%;
	left: 2em;
	right: 2em;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	box-shadow: 3px 3px 6px #000;
	-moz-box-shadow: 3px 3px 6px #000;
	-webkit-box-shadow: 3px 3px 6px #000;
}

#flashMessage.message {
	background: #90ff90;
	color: black;
	border: 1px solid #209020;
}

#flashMessage.messageError {
	background: #ff9090;
	color: black;
	border: 1px solid #902020;
}

#flashMessage.messageWarning {
	background: #ffff90;
	color: black;
	border: 1px solid #902020;
}

div.error-message {
	font-size: 0.8em;
	font-style: italic;
	font-weight: bold;
	background: #FF8080;
	border: 1px solid #FF4040;
	color: #f0f040;

	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;

	box-shadow: 3px 3px 3px #dbdbdb;
	-moz-box-shadow: 3px 3px 3px #dbdbdb;
	-webkit-box-shadow: 3px 3px 3px #dbdbdb;
}

div#disabledSurvey {
	margin: 1em 10%;
	text-align: center;
	padding: 2em;
	font-size: 2em;
	font-weight: bold;
	background: #0082d6;
	color: white;
	border: 1px solid #00609e;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	box-shadow: 3px 3px 3px #ff8080;
	-moz-box-shadow: 3px 3px 3px #ff8080;
	-webkit-box-shadow: 3px 3px 3px #ff8080;
}

.note {
	margin: 1em 10%;
	text-align: center;
	padding: 1em;
	font-size: .8em;
	background: #ffff90;
	border: 1px solid #f0f090;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	box-shadow: 3px 3px 3px #dbdbdb;
	-moz-box-shadow: 3px 3px 3px #dbdbdb;
	-webkit-box-shadow: 3px 3px 3px #dbdbdb;
}

.note.small {
	padding: .2em 1em;
}

#alert {
	text-align: center;
	background-color: #ffcb31;
	padding: 10px 0;
}

/*
 * HEADER
 */

#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 1.4em;
	padding: .2em 1em;
	background: #0082d6;
	color: white;
	border-bottom: 1px solid #00609e;
}

#header h1 {
	display: inline;
	font-size: 1rem;
	font-weight: bold;
}

#header span.exit {
	float: right;
}

#header span.exit a {
	text-decoration: none;
	color: white;
}

#header span.exit a:hover {
	color: #ff4040;
}

/*
 * MENU
 */

#menu {
	position: fixed;
	top: 1.8em;
	left: 0;
	right: 0;
	padding: 2px 1em 3px;
	background: white;
	border-bottom: 1px solid #00609e;

	box-shadow: 0 0 4px #000;
	-moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
}

#menu p {
	font-variant: small-caps;
	font-size: 0.8em;
}

#menu a {
	text-decoration: none;
	color: black;
	padding: 0 .5em;

	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

#menu a:hover {
	background: #0082d6;
	color: white;
}

#menu span.exit {
	position: absolute;
	right: 1em;
}

.menuRed {
	border-bottom: 2px solid #f04040;
}

.menuGreen {
	border-bottom: 2px solid #40f040;
}


/*
 * CONTENT
 */
#content {
	padding: 4em 1em 4em;
}

#content h1 {
	text-align: center;
	font-weight: normal;
	font-size: 1.5rem;
	margin: 0.2em 0;
}

#content h1.section {
    margin: 2rem 0;
    letter-spacing: .1rem;
    font-variant: small-caps;
}
#content h1.section:before {
    content: '--- ';
}
#content h1.section:after {
    content: ' ---';
}

#content h2 {
	text-align: left;
	font-weight: bold;
	font-size: 1.2rem;
	letter-spacing: 1px;
	border-bottom: 1px solid #0082d6;
	margin: 1em 0;
	padding-left: 2em;
	text-indent: -2em;
}

#content h3 {
	text-align: center;
	font-weight: bold;
	font-size: 1rem;
	border-bottom: 2px solid #0082d6;
	margin: 0 5em .333em;
	line-height: 1.8em;
	letter-spacing: 2px;
}

#content h4 {
	text-align: center;
	font-weight: bold;
	font-size: 1rem;
	border-bottom: 2px solid #0082d6;
	margin: 3rem 5rem;
	line-height: 1.8em;
	letter-spacing: 2px;
}

#content h5 {
	font-style: normal;
	font-weight: bold;
	font-size: 110%;
	font-variant: small-caps;
	border-bottom: 2px solid #0082d6;
	letter-spacing: 1px;
}

/*
 * Informations Survey
 */

#information {
	margin: 0 2em 1em;
}

#information>div {
	margin: 1em 1em 2em;
}

.ajaxDialog label,
#information label {
	margin: 0 0 .1em 0;
	padding-left: 1em;
	display: block;
	font-variant: small-caps;
}

.ajaxDialog form div.input,
#information form div.input {
	margin: .5em 1em;
}

.ajaxDialog form div.input label,
#information form div.input label {
	padding: 0;
}

.ajaxDialog form div.submit,
#information form div.submit {
	text-align: center;
	background: #0082d6;
	padding: .5em;
	margin: 1em 1em 0;

	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;

	box-shadow: 3px 3px 3px #dbdbdb;
	-moz-box-shadow: 3px 3px 3px #dbdbdb;
	-webkit-box-shadow: 3px 3px 3px #dbdbdb;
}

.ajaxDialog fieldset {
	margin: .8em;
	padding: .5em;
	border: 1px solid #dbdbdb;
}

.ajaxDialog legend {
	margin: 0 1em;
	padding: 0 .5em;
	font-variant: small-caps;
}

#information .memberAddress,
#information .memberManager {
	padding: .5em 2em;
	margin: 0 0 1em 0;
	border-bottom: 1px dotted #dbdbdb;
}

#information .memberReference table {
	width: 100%;
	font-size: 1em;
}

#information .memberReference table.content {
	border-bottom: 1px dashed #dbdbdb;
	padding-bottom: 1em;
	margin-bottom: 1em;
}

#information .memberReference table th {
	text-align: center;
	background: #0082d6;
	color: white;
	padding: .2em;

	border: 1px solid #00609e;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

#information .memberReference table td {
	padding: .2em .5em;
}

#information .memberReference table td.label {
	font-weight: bold;
}

#information .memberReference table th .buttons {
	margin: 0;
	padding: .5em;
	white-space: pre;
}

#information #memberAnnual table {
	font-size: 0.8em;
}

#information #memberAnnual table th {
	background: #0082d6;
	color: white;
	padding: 2px 5px;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

#information #memberAnnual table td {
	padding: 5px;

	border-bottom: 1px dashed #dbdbdb;
}

#information table.disabled th {
	color: #c0c0c0;
}

#information .disabled {
	background: #f0f0f0;
	color: #dbdbdb;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

/*
#informationSave {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2.5em;
	text-align: center;
	background: #0082d6;
	border-top: 1px solid #00609e;
}
*/

div#informationSave {
	margin: 0;
	background: #0082d6;
	text-align: center;
	padding: .333em 0;
}

#informationSave div.submit {
	margin: 0;
	padding: .333em 0;
}

#information .buttons div.submit {
	text-align: center;
	background: none;
	padding: 0;
	margin: 0;
	display: inline;

	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;

	box-shadow: 0 0 0 #000;
	-moz-box-shadow: 0 0 0 #000;
	-webkit-box-shadow: 0 0 0 #000;
}

#information .buttons button,
#information .buttons form div.submit input {
	font-size: 1em;
}

#information button:focus,
#information input:focus {
	border: 2px solid #0082d6;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

#closeSection {
	text-align: center;
	background: #0082d6;
	margin: 1em 2em;
	padding: .5em;

	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;

	box-shadow: 3px 3px 3px #dbdbdb;
	-moz-box-shadow: 3px 3px 3px #dbdbdb;
	-webkit-box-shadow: 3px 3px 3px #dbdbdb;
}

#closeSection .submit input {
	padding: .5em 1em;
}

#confirmSection {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4em;
	text-align: center;
	background: #0082d6;
	border-top: 1px solid #00609e;

	box-shadow: 0 0 4px #000;
	-moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
}

#confirmSection .submit input {
	padding: 1px 1em;
}

#closeSection .closeMessage,
#confirmSection .confirmMessage {
	color: #000;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	box-shadow: 0 2px 4px #000;
	-moz-box-shadow: 0 2px 4px #000;
	-webkit-box-shadow: 0 2px 4px #000;
}

#closeSection .closeMessage {
	padding: 1em;
}

#confirmSection .confirmMessage {
	padding: .1em 1em;
	margin: 4px 30%;
}

#confirmSection.wide .confirmMessage {
	margin: 4px 10%;
}


/*
 * Collection Survey
 */

#collection {
	margin: 0 5em 1em;
}

#collection table {
	margin: 0 auto;
	font-size: 16px;
	border-collapse: collapse;
}

#collection table.small {
	width: 70%;
}

#collection table.large {
	width: 100%;
}
#collection table th {
	text-align: center;
	font-weight: bold;
	font-variant: small-caps;
	font-size: 1em;
}

#collection table td {
	padding: 0 .5em;
	border-bottom: 1px dotted #dbdbdb;
}

#collection table.largeTr td {
	padding: .5em .5em 1.5em;
}

#collection table tr.odd td {
	background: #e8e8e8;
}

#collection label {
	margin: 0;
	padding: 0.5em 0;
	display: block;
	font-variant: small-caps;
	text-align: left;
}

#collection span.indent {
	display: inline-block;
	width: 2rem;
}

#collection .fake {
	font-style: italic;
	padding: .5em 0 0 1em;
}

#collection .spacer {
	height: 2rem;
}

#collection div.input label {
	padding: 0;
}

#collection div.fakeRadio div.checkbox {
	display: inline-block;
}

#collection div.fakeRadio div.checkbox label,
#collection div.input.radio label {
	display: inline;
	margin: 0 2em 0 .5em;
	border: none;
	vertical-align: bottom;
}

#collection div.input.text {
	display: inline;
}

#collection div.input.text input {
	text-align: center;
}

#collection div.input.text input:focus {
	background: #29abff;
	color: #fff;
}

#collection div.input.select {
	text-align: center;
}

#collection div.input.checkbox label {
	border: none;
	display: inline;
	margin-left: .5em;
}

#collection td.widthSingle select {
	width: 15em;
}

div#collectionSave {
	/*
	margin: 1em 0;
	background: #0082d6;
	text-align: center;
	border: none;
	*/
	padding: .2rem 0;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	background: #0082d6;
	border-top: 1px solid #00609e;

	box-shadow: 0 0 4px #000;
	-moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
}

#collectionSave div.submit {
	margin: 0;
	padding: 2px 0;
}

#collectionSave div.submit input {
	padding: 10px 2em;
	font-weight: bold;
}

/*
 * LOGIN
 */

#authMessage.message {
	margin: 1em 10%;
	text-align: center;
	padding: 1em;
	font-size: 1em;
	background: #f44040;
	color: #f9f9f9;
	border: 1px solid #00609e;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	box-shadow: 3px 3px 3px #dbdbdb;
	-moz-box-shadow: 3px 3px 3px #dbdbdb;
	-webkit-box-shadow: 3px 3px 3px #dbdbdb;
}


.message p {
	padding: .333em 0;
}

/*
 * FORM
 */

form {
	clear: both;
}

form p {
	padding: .2em 0;
}

label {
	display: block;
	margin-bottom:3px;
}

input, textarea {
	clear: both;
	padding: 2px 0;
	font-size: 1em;
}

select {
	font-size: 1em;
	clear: both;
	vertical-align: text-bottom;
	padding: 2px 10px;
}

input.form-error {
	border: 2px solid #ff8080;
}


form div.input {
	margin: 0 .2em;
}

form div.submit {
	border: 0;
	clear: both;
}

form div.submit input {
	padding: 2px 1em;
	font-size: 1.1em;
}

.buttons button {
	padding: 2px 1em;
	margin: 0 .5em;
}

table#calculus {
	width: 100%;
}

table#calculus caption {
	font-weight: bold;
	background: #dbdbdb;
	padding: .2em;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

table#calculus th {
	border-bottom: 1px solid #dbdbdb;
}

table#calculus td {
	border-bottom: 1px solid #dbdbdb;
}

div.infoTable {
	padding: 2em 5em;
}

div.infoTable table td {
	padding: .5em .2em;
	text-align: justify;
}

div.infoTable ul {
	margin-top: 1em;
}
div.infoTable ul li {
	margin: .3em 0;
}

div.infoTable table table td {
	padding: .2em .5em;
	text-align: left;
}

div.infoTable p {
    margin: 1rem 0;
}

div .instructions {
	padding: 1em 3em;
	text-align: justify;
	line-height: 1.4em;
}

div .instructions h2 {
	padding-top: .5em;
}

div .instructions p {
	margin: 1em 0;
}

/*
 * ACTION BUTTON
 */

div.action {
	margin: 2rem auto;
	text-align: center;
}

div.action a {
	display: inline-block;
	padding: 1rem 2rem;
	background: #00609e;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	border-radius: 9px;
}
/*
 * PRINT
 */

@media print {

    #content,
    #collection.preview {
        margin: 0;
        padding: 0;
        font-size: 10px;
    }

    #collection table {
        font-size: 10px;
    }

    #content h1 {
        font-size: 1.2rem;
    }

    #content h2 {
        font-size: 1.1rem;
    }

    #content h3 {
        font-size: 1rem;
    }
}

/*
 * DEBUG
 */

table.cake-sql-log {
	background: #dbdbdb;
	border: 1px solid black;
}
.cake-sql-log td {
	padding: 4px 8px;
	text-align: left;
	font-family: Monaco, Consolas, "Courier New", monospaced;
}
.cake-sql-log caption {
	color:#fff;
}

PRE.cake-debug {
	background: #ffcc00;
	overflow: auto;
	margin: 0 1em 1em;
	padding: 1em;
	border: 3px dashed black;
}