body {
    /* height: 100% !important; */
    height: 100vh;
}


div {
    display: flex;
    flex-direction: column;
    /* border: 1px solid #254D94; */ 
}

p {
    display:inline-block !important;
    font-size: clamp(11px, 1vw, 16px);
}

td {
    font-size: clamp(11px, 1vw, 16px);
    text-align: center;
}

form {
    margin-bottom: 0;
}

.content { 
    height: 100vh; 
}

.background-image {
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    background-image: url("../images/cadavre1.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px) opacity(0.4);
}

.background-image-index {
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    background-image: url("../images/bike.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px) opacity(0.6);
}

.top-section {
    background: #2d2e30;
    line-height: clamp(16px, 1.5vw, 16px);
    color: #b2b2b2;
    font-size: clamp(12px, 1.5vw, 16px);
    text-align: center;
    
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #d1d0dc; 
  text-align: center;
  font-size: clamp(12px, 1.5vw, 16px);
}

.footer 
{ 
    
    
}

.copyright-section {
    color: #fff;
    background: #224B96;
    padding: 5px 5px;
    font-size: clamp(12px, 1.5vw, 16px);
}


.nav-header-style {
    padding: 0;
    background-color: rgba(160, 170, 190, 0.4);
    color: #fff;
}

.nav {
    font-size: clamp(12px, 1.5vw, 18px);
}

.nav:hover {
    border: 1px solid rgba(0, 0, 0, 1);
    background-color: #224B96;
    color: #ffffff !important;
}
.nav:not(:last-child) {
    border-right: 1px solid darkgrey;
}
/*

.nav {
    margin: 0px;
    padding-top:20px;
    padding-bottom:20px;
    background-color: rgba(210, 220, 240, 1);
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-size: 1.5vw;
    font-weight: 300;
    border: 2px solid rgba(180, 190, 210, 0.8);
}
*/


.nav2-header-style {
    padding: 0;
    background-color: rgba(235, 240, 255, 0.4);
    color: #fff;
}
.nav2:hover {
    border-right: 1px solid #fff;
    background-color: #224B96;
    color: #ffffff !important;
}
.nav2:not(:last-child) {
    border-right: 1px solid darkgrey;
}
.nav2 {
    margin-right: 1px;
    margin-left: 1px;
    padding-top:10px;
    padding-bottom:10px;
    background-color: rgba(210, 220, 240, 0.9);
    border: 2px solid rgba(180, 190, 210, 0.8);
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-size: clamp(12px, 1.5vw, 18px);
    font-weight: 300;
}

.center {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    align-self: center;
}

.font1_0 {
    font-size: clamp(10px, 1vw, 14px);
}

.font1_5 {
    font-size: clamp(11px, 1.5vw, 16px);
}

.font2_0 {
    font-size: clamp(12px, 2vw, 18px);
}

.font2_5 {
    font-size: clamp(13px, 2.5vw, 25px);
}


.buttonSubmit {
    width: 100px;
    align-self: center;
}

.flexRow {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.centerSelf {
    align-self: center;
}

.flexRowSpread {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content:space-between;
}


.flexRowCenter {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content:center;
}

.flexColumnCenter {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content:center;
}


.flexGrow2 {
    flex-grow: 2; 
}

.flexGrow4 {
    flex-grow: 4; 
}

.flexShrink2 {
    flex-shrink: 2;
}

.flexWidth10 {
    flex-basis: 10%; /* default auto */
}
.flexWidth20 {
    flex-basis: 20%; /* default auto */
}

.flexWidth50 {
    flex-basis: 50%; /* default auto */
}

.flexWidth90 {
    flex-basis: 90%; /* default auto */
}

.flexStart {
    align-self: flex-start;
}

.middle-box { 
    display: flex;
    justify-content: flex-start;
    flex: 1 0 auto;
}

.titleBox {
    padding:10px;
    /* background-color: #DAE3F2; */
    color: #254D94;
    font-family: 'Lato', sans-serif;
    font-size: clamp(12px, 3vw, 30px);
    font-weight: bold;
    align-self: center;
    /* border: 1px solid #254D94; */
}
.subtitleBox {
    padding:5px;
    /* background-color: #DAE3F2; */
    color: #254D94;
    font-family: 'Lato', sans-serif;
    font-size: clamp(10px, 2.5vw, 25px);
    font-weight: bold;
    align-self: center;
    /* border: 1px solid #254D94; */
}

.subtitle {
    font-size: 2.5vw;
    font-weight:normal;
    align-self: center;
}


.textBox {
    font-size: clamp(10px, 1vw, 16px);
    padding: 15px;
    background-color: rgba(218, 227, 242, 0.7);
    align-self: center;
    border: 2px solid rgba(57, 97, 168, 0.7);
    width: 80%;
    overflow: auto;
}

.varBox {
    height:50vh;
}



.invitationBox {
    padding: 20px;
    background-color: rgba(238, 247, 255, 0.7);
    align-self: center;
    border: 1px solid rgba(87, 127, 198, 0.7);
    width: 90%;

}

.box {
    align-self: center;
    width: 70%;
}

.formBox {
    padding: 10px;
    background-color: rgba(250, 243, 242, 0.8);
    align-self: center;
    border: 1px solid rgba(190, 183, 182, 1.0);
    width: 70%;
    min-width: 300px;        
}

.selectBox {
    min-width: 100px;  
}

.login-box-input { 
    flex: 2;
    min-width: 100px;        
}

.button {
    
}

.buttonBox {
    padding: 15px;
    align-self: center;
}

.center-box {
    display: flex;
    flex-direction: column;
    align-content: center; 
}

.messageContent {
    display:flex;
    align-content: center;
    width: 50%;
    margin: 5px;
    padding: 5px;
    align-self: center;
    border: 1px solid #254D94;
}

.messageBox {
    align-self: center;
    font-weight:500; 
    line-height: 2.3vh;
    margin: 5px;
    padding: 5px;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.infoBox {
    color: #254D94;
    background-color: rgba(218, 217, 247, 0.5);
}

.errorBox {
    color: #D54D94;
    background-color: rgba(218, 217, 247, 0.7);
}



/* Style the tab */
.tab {
    overflow: hidden;
}


.tabBox {
    display: flex;
    flex-direction: row;
    align-content:flex-start;
    width: 200px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: #DDDDDD;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.6s;
    font-size: clamp(10px, 1vw, 16px);
}

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

/* Create an active/current tablink class */
.tab button.active {
    background-color: #DAE3F2;
    border-right: 2px solid #254D94;
    border-left: 2px solid #254D94;
    border-top: 2px solid #254D94;
    border-bottom: 2px solid #254D94;

}

/* Style the tab content */
.tabcontent {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content: space-between
}