@charset "utf-8";
body {
    background-color: white;
    font-family: Roboto, Sans-serif;
    font-weight: 500;
    margin: 0;
    position: relative;
    /*display: flex;
    flex-direction: column;
    align-items: center;*/
}

header {
    position: fixed;
    z-index: 15;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: white;
}

p {
    margin: 0px;
}

a {
    color: #21a3b7;
}

h1{
    color: #21a3b7;
    margin-bottom: 4vh;
}

h2{
    color: white;
    margin: 0;
}

h3{
    color: #21a3b7;
    font-family: Roboto, Sans-serif;
    font-weight: 500;
    margin: 0.5vw 0vw 1.5vw 1.5vw;
}

table{
    border-collapse: collapse !important;
    font-size: 1.8vh !important;
    text-transform: none !important;
}
@media (min-width: 1800px) {
    table{
        font-size: 1.5vh !important;
    }
}

td, th{
    text-align: center !important;
    vertical-align: middle !important;
    padding: 4px !important;
    border: 1px solid !important;
    text-align: center !important;
    width: auto !important;
    text-transform: none !important;
    font-size: 1.9vh !important;
}

th{
    background: #9ccb57 !important;
    padding: 4px 7px 4px 7px !important;
}

label {
    font-size: 2.1vh !important;
}

input {
    padding-left: 0.5vw !important;
}

input, select {
    margin-left: 1vh !important;
    border-radius: 5px !important;
    border: solid 2px #9ccb57 !important;
    font-size: 2vh !important;
    font-family: Roboto, Sans-serif !important;
    font-weight: 500 !important;
    background-color: #f6fcfd !important;
    width: auto !important;
    height: 4vh !important;
    min-height: 0px !important;
    min-width: 0px !important;
    max-width: none !important;
    max-height: none !important;
}
@media (min-width: 1800px) {
    label, input, select {
        font-size: 1.8vh !important;
    }
}
input:hover {
    border: solid 2px #21a3b7 !important;
}
select:hover {
    border: solid 2px #21a3b7 !important;
    cursor: pointer !important;
}
input:focus, select:focus {
    border: solid 2px #21a3b7 !important;
    outline: none !important;
}

select option {
    color: black !important;
}

table select{
    margin: 0 !important;
}
table input{
    margin: 0 !important;
}

#submitButtonMiddle, #submitButton{
    background-color: #21a3b7 !important;
    border-radius: 50px !important;
    border: 0px !important;
    cursor: pointer !important;
    color: white !important;
    padding: 1.7vh !important;
    font-size: 1.9vh !important;
    font-weight: 600 !important;
    margin: 3vh 0vh 5vh 0vh !important;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.33) !important;
    height: auto !important;
}

#submitButtonMiddle:hover, #submitButton:hover{
    transform: scale(1.05) !important;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1) !important;
}

#submitButtonMiddle {
    margin: 1vh 0vh 5vh 0vh !important;
}

.formLigne, .formLigneEdit {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 1.5vh 0px 1.5vh 0px !important;
    padding: 0px !important;
}

.formLigne p, .formLigneEdit p {
    padding: 0px !important;
}

.formLigneEdit {
    height: 3vh !important;
}

#tabLocaux {
    margin: 3vh 0px 1.5vh 0px;
}

#tabLocaux input select {
    width: auto;
    margin: 0px;
}

#tabLocaux td th {
    padding: 0vh;
    margin: 0px;
}

#tabLogements {
    margin: 0px;
}
#tabLogements input select {
    width: auto;
    margin: 0px;
}
#tabLogements td th  {
    padding: 0vh;
    margin: 0px;
}

#sommeModules {
    display: inline;
}

#tableModules{
    display: none;
}
#tableModules input {
    width: 8vh !important;
    margin: 0px;
}
#tableModules td th {
    padding: 0.3vh;
}

.colNonVisible{
    border: none !important;
    background-color: #f4f4f4 !important;
    min-width: 38px !important;
}

.image22 {
    height : 22px;
    width : 22px;
}

.image28 {
    height : 28px;
    width : 28px;
}

.image58 {
    height : 58px;
    width : 58px;
}

.suprLigne {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: center;
    background-color: red;
    padding: 0.6vh;
    border-radius: 5px;
    height: calc(22px + 1.2vh);
}
.suprLigne:hover {
    background-color: rgb(233, 0, 0);
    cursor: pointer;
}

.ajoutLigne {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: center;
    background-color: rgb(84, 208, 22);
    padding: 0.6vh;
    border-radius: 5px;
    height: calc(22px + 1.2vh);
    width: calc(22px + 1.2vh);
}
.ajoutLigne:hover {
    background-color: rgb(71, 180, 17);
    cursor: pointer;
}

#ajoutLigneFenetre {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
}

.paramPerso {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: center;
    margin-left: 1vw;
    margin-right: 0.7vw;
    padding: 0.3vw;
    border-radius: 5px;
    background-color: red;
    height: calc(22px + 1.2vh);
    width: calc(22px + 1.2vh);
}
.paramPerso:hover{
    cursor: pointer;
}

.inputParamPerso {
    width: 7.5vw !important;
    height: 3vh !important;
}

#aPDF {
    display: block;
    cursor: pointer;
    text-decoration: none;
    max-width: 8vw;
}
#divPDF {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 1.2vh;
    border-radius: 10px;
    border: 5px solid #ebebeb;
    width: 10vw;
}
#divPDF:hover {
    background-color: white;
    border: 5px solid #dbdbdb;
}
#divPDF h5 {
    margin: 0.5vh 0px 0px 0px;
    color: red;
}

#aJSON {
    cursor: pointer;
    text-decoration: none;
    max-width: 8vw;
}
#divJSON {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 1.2vh;
    border-radius: 10px;
    border: 5px solid #21a3b7;
}
#divJSON:hover {
    transform: scale(1.03);
}
#divJSON h5 {
    margin: 0px;
    color: #21a3b7;
    font-size: 0.75vw;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

#divWarning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 0.7vw;
    border: solid 5px #fec70b;
    border-radius: 10px;
    gap: 0.5vw;
    background-color: white;
    margin-left: 3vw;
}
.divWarningHygro {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 0.7vw;
    border: solid 5px #fec70b;
    border-radius: 10px;
    gap: 0.5vw;
    background-color: white;
    margin-left: 3vw;
}

#Content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    margin-top: 2.5vw;
}

#divFormulaire {
    width: 95%;
}

.caseNum {
    width: 4.2vw !important;
}

.caseNumPlus {
    width: 7vw !important;
}

.fenetreDesc {
    width: 8vw !important;
}

#tabFenetre th {
    padding: 4px !important;
}

#tabFenetres td, #tabLocaux td, #tabLogements td{
    background-color: #f4f4f4;
}

#tabFenetres select, #tabFenetres th{
    font-size: 0.9vw;
    width: auto !important;
    max-width: 7.7vw !important;
}

#tabFenetres {
    margin: 0 !important;
}

#tabLocaux, #tabLogements{
    margin-top: 0.7vw;
    width: auto;
}

#divTabLocaux, #divTabLogements {
    overflow-x: auto;
    width: fit-content;
    padding: 1vw;
    border-radius: 10px;
    border: solid rgb(205, 205, 205) 3px;
    background-color: #f4f4f4;
    margin: 1vw 0;
    max-width: 100% !important;
}
#divTabFenetres {
    overflow-x: auto;
    width: fit-content;
    padding: 2vw 1vw 3.5vw 1vw;
    border-radius: 10px;
    border: solid rgb(205, 205, 205) 3px;
    background-color: #f4f4f4;
    margin: 1vw 0;
    width: 100% !important;
}

.minTextSize {
    padding: 0;
    font-size: 0.7vw !important;
}

#divRes {
    background-color: #f4f4f4;
    border: solid 4px #21a3b7;
    width: auto;
    max-width: 65%;
    padding: 1vw 2vw 0.5vw 2vw;
    border-radius: 15px;
    margin: 0 0 0.5vh 3vw;
}

.centrer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#fenetresRes {
    box-sizing: border-box;
    background-color: #21a3b7;
    gap: 2vw;
    padding: 2.5vw;
    width: 100%;
    border-top: solid 5px rgb(29, 146, 181);
    border-bottom: solid 5px rgb(29, 146, 181);
    display: none;
}

.tabVal td{
    background-color: white;
}

.tabVal .colNonVisible{
    background-color: #21a3b7 !important;
}

.tabVal {
    margin-bottom: 1vh !important;
    max-width: 95vw !important;
}

#text-error {
    color: red;
}
#text-normal {
    color: #6b992b;
}

#reference {
    width: 22vw !important;
}

#divPdfLegende {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 12vw;
    align-items: center;
    width: 100%;
}

#legende {
    display: flex;
    flex-direction: column;
    padding: 0.5vw 1vw 0.5vw 1vw;
    border-radius: 5px;
    color: white;
    font-size: 0.9vw;
}

#partie2 {
    display: none !important;
}

.circle {
    width: 8vh;
    height: 8vh;
    border: 1.5vh solid #ccc; 
    border-top-color: rgb(62, 154, 207);
    border-radius: 100%;
    animation: rotation 1.3s linear infinite;
    margin: 2vh;
}
  
@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

#div-dl {
    display: flex;
    flex-direction: row;
    gap: 5vw;
}

input[type=file] {
    color: black;
    padding: 8px;
    background-color: #fff;
    border: 2px solid #9ccb57 !important;
    height: auto !important; 
    margin-bottom: 4vh;
}

input[type=file]::file-selector-button {
    margin-right: 8px;
    border: none;
    background: #21a3b7;
    padding: 8px 12px;
    color: #fff;
    cursor: pointer;
}

input[type=file]::file-selector-button:hover {
    background: #9ccb57;
    transform: scale(1) !important;
}

#submitButtonJSON {
    background-color: #21a3b7;
    color: white;
    padding: 0.6vw;
    border: none;
    border-radius: 10px;
}
#submitButtonJSON:hover {
    cursor: pointer;
    background-color: #2ebed4;
}

#mentions {
    font-weight: normal;
    font-size: 0.85vw;
    margin: 0 1.5vw;
}

#mentionsLegales {
    font-weight: normal;
    font-size: 0.7vw;
    margin: 0;
    padding: 0vw 3.5vw 1vw 3.5vw;
}

#divFormFile {
    display: flex;
    flex-direction: column;
    width: 95%;
}

#importButton {
    margin: 0 0 1.5vh 1.5vw;
    display: inline-block;
    border-radius: 10px;
    color: white;
    background-color: #21a3b7;
    width: auto;
    align-self: flex-start;
    font-size: 0.9vw;
    padding: 0.5vh 0.5vw;
}
#importButton:hover {
    transform: scale(1.05);
    background-color: #21a3b7;
}

#submitButtonJSON {
    margin-left: 0.5vw;
    display: inline-block;
    width: auto;
}

#jsonFileInput {
    margin: 0;
    width: 25vw !important;
}

#jsonForm {
    display: none;
    align-items: center;
    margin-bottom: 2vh;
}

#divResSave {
    display: flex;
    align-items: center;
    gap: 5vw;
}

.apparait {
    display: none;
    position: absolute;
    z-index: 100;
    background-color: #f5f5f5;
    padding: 1vh 1vw;
    border: 4px solid rgb(226, 226, 226);
    border-radius: 10px;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-65%, -55%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    
    white-space: nowrap;
    max-width: 70vw;
    width: auto;
}

.survol {
    position: relative;
    display: inline-block;
    cursor: help;
}

.survol:hover .apparait {
    display: block;
}

.logoConseil {
    height: 25px;
    cursor: help;
}

.infoVitrage {
    display: flex;
    justify-content: center;
}

.titreVitrage {
    color: #21a3b7;
    font-weight: bold;
}

#aideBoutonTabFen {
    margin: auto;
    display: block;
}

#sousTitre {
    width: 50vw;
    justify-content: center;
    text-align: center;
    margin-bottom: 2.5vh;
}
#sousTitre p {
    font-size: 0.85vw;
    color: #525252;
}

#divContact {
    display: flex;
    flex-direction: column;
    width: 100vw;
    background-color: #eef1f2;
    align-items: center;
    padding: 1.5vh 0 3vh 0;
    gap: 3vh;
    margin: 10vh 0;
}

#titreContact {
    font-size: 1.7vw;
}
#pContact {
    font-weight: 300;
}
#aContact {
    background-color: #21a3b7;
    color: #ffffff;
    padding: 10px 20px 10px 20px;
    border-radius: 5px;
}