*{
	box-sizing:border-box;
}
body{
	background-color:#333;
	padding:35px;
	font-family:Arial;
	font-size:16px;
}
#frontform form{
	text-align:center;
}
#frontform form .step1{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
#frontform form .step2{
	display:none;
}
#frontform .section{
	width:47%;
	display:inline-block;
	padding:0px 0px 20px;
	margin:1%;
	background-color:#f4f4f4;
	border-radius:10px;
}
#frontform .section.Architecture,
#frontform .section.infosClient,
#frontform .section.removeSection{
	width:96%;
}
#frontform .section h2 {
    margin-top: 0px;
    padding: 10px;
    background-color: #111;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#frontform form br{
	display:none;
}
#frontform label{
	width:100%;
	display:flex;
	justify-content:space-between;
	margin-bottom:10px;
	padding:0px 20px;
	text-align:left;
}
#frontform input{
	text-align:center;
	box-sizing:border-box;
}
#frontform input,
#frontform textarea{
    padding:5px;
    font-size:16px;
    font-family: Arial;
}
/* Spin Buttons modified */
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
   	width: 1em;
    border-left: 1px solid #000;
   	opacity: .5;
}
input[type="number"]::-webkit-inner-spin-button:hover,
input[type="number"]::-webkit-inner-spin-button:active{
    box-shadow: 0 0 2px #0CF;
    opacity: .8;
}
#frontform .section.infosClient input{
	width:22%;
	margin:0px 1%;
}
#frontform .section.Architecture .AllServices{
	padding:0px 20px;
}
#frontform .section.Architecture .serviceTemplate,
#frontform .section.Architecture .subTemplate{
	display:none;
}
#frontform .section.Architecture .service{
	position: relative;
    background-color: #fff;
    padding: 20px;
    width: 100%;
    margin: 20px auto;
    border:1px solid #444;
    text-align:left;
}
#frontform .section.Architecture .service .addSub{
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: #111;
    border-radius: 50%;
    bottom: -13px;
    line-height: 26px;
    font-size: 24px;
    color: #fff;
    left: calc(50% - 13px);
    cursor:pointer;
    text-align:center;
}
#frontform .section.Architecture .service .remove{
    width: 26px;
    height: 26px;
    background-color: #111;
    border-radius: 50%;
    line-height: 24px;
    font-size: 24px;
    color: #fff;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    margin-right:10px;
}
#frontform .section.Architecture .service input[type="text"]{
	width:80%;
	margin-bottom:10px;
}
#frontform .section.Architecture .service label{
	width:15%;
	display:inline-block;
}
#frontform .section.Architecture .service .main label input{
	width:15%;
}
#frontform .section.Architecture .service textarea{
	width: 48%;
    margin: 0px 15px 10px 0px;
}
#frontform .section.Architecture .service .sub,
#frontform .section.Architecture .service .differentSub{
	border-left: 1px solid #444;
    margin-left: 20px;
    margin-top:20px;
    padding:0px 20px;
}
#frontform .section.Architecture .service .differentSub div{
	display:flex;
	justify-content:space-between;
	margin-top:5px;
}
#frontform #ajouterService{
	margin-top:20px;
	padding:10px 20px;
	border:none;
	border-radius:3px;
	background-color:#111;
	color:#fff;
	font-size:15px;
	font-weight:bold;
	cursor:pointer;
}
input[type="submit"],
button,
.button{
	padding:10px 20px !important;
	border:none;
	border-radius:3px;
	background-color:#111;
	color:#fff;
	font-size:15px !important;
	font-weight:bold;
	cursor:pointer;
	margin-bottom:20px;
}
#Precedent{
	float:left;
	display:none;
}
#Suivant{
	float:right;
}
.tooltipcontainer{
    flex-grow:1;
    text-align:left;
}
.tooltip {
        position: relative;
    display: inline-block;
    cursor: help;
    color: #fff;
    width: 18px;
    height: 18px;
    background-color: #000;
    line-height: 18px;
    font-size: 14px;
    text-align: center;
    border-radius: 50%;
    margin-right: 5px;
    margin-bottom: 10px;
}
.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 300px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity .6s;
    top: 135%;
    left: 50%;
    margin-left: -60px;
}
.tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -95px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
#frontform .removeSection label{
    display:inline;
    padding: 0px 20px 0px 5px;
}
#frontform .removeSection input[type="submit"]{
    display: block;
    margin: 35px auto 0px;
}