/**
 * Merci à https://kuler.adobe.com/Deep-China-color-theme-241117/ pour les couleurs.
 */

body {
	font-family: Arial;
	background-color: #F0F2F2;
}

#header {
	background-color: #BF0F0F;
}

#header p {
	color: white;
	padding-top: 10px;
	font-size: 20px;
}

#title-panel {
	background-color: #F2D9BB;
	padding-bottom: 20px;
}
#title-panel h1 {
	font-size: 40px;
}
#title-panel h2 {
	font-size: 25px;
}
#title-panel p {
	font-size: 16px;
}

#content {
	padding-top: 30px;
}

.subscription-btn {
	white-space: normal;
	height: auto;
}

#dateOfBirth {
	width: 120px;
}

.mandatoryField {
	color: red;
}
p.mandatoryField, p.recommendedField {
	font-size: 16px;
}
.recommendedField {
	color: green;
}

#extra-information {
	font-size: 16px;
}

#extra-information p {
	text-align: left;
}

#error-message {
	position: absolute;
	width: 400px;
	max-width: 100%;
	display: none;
}

/* Specific styles */

#error-message-ok {
	padding-top: 20px;
	text-align: center;
}

#price-info {
	color: #BF0F0F;
	font-style: italic;
}

#summary {
	padding-top: 10px;
	font-size: 16px;
}

#reference-payment {
	color: #BF0F0F;
	font-weight: bold;
}
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}
.topright:hover {color:red;}
}