/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* -----------------------------------  VERSION ORDI   --------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */



@media all and (max-width: 1030px) {
	.container { width: 800px; }
}

@media all and (max-width: 830px) {
	.container { width: 580px; }
	header { text-align: center;}
}




:root {
    font-size: 1em;
    font-family: 'futura', sans-serif;
    
    --color-blue: #51d5e1;
    --color-dark-blue: #3fafb9;
    
    --color-red: #e1516c;
    
    --color-dark-grey: #292a2b;
    
    --color-background: #121415; /* Dark background color */
    --color-text: #f5f5f5; /* Off-white text color for better readability on dark background */
}



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

select{
    height: 100%;
	width: 50%;
	font-size: 1em;
	
	background-color: var(--color-dark-grey);
    color: var(--color-text); /* Text color */
    
    border-radius: 10px;
    border: solid 2px var(--color-text);
    
}
select[multiple] {
    height: auto; /* Ajuste la hauteur automatiquement en fonction du nombre d'options affichées */
    width: 95%; /* Ajuste la largeur si nécessaire */
    border: 2px solid var(--color-text); /* Style de bordure */
    background-color: var(--color-dark-grey);
    color: var(--color-text);
    padding: 5px; /* Espace intérieur pour le confort visuel */
    overflow-y: auto; /* Permet un défilement vertical si la liste est longue */
    border-radius: 10px; /* Arrondit les coins */
}


input{
    height: 100%;
	width: 50%;
	font-size: 1em;
	
	background-color: var(--color-dark-grey);
    color: var(--color-text); /* Text color */
    
    border-radius: 10px;
    border: solid 2px var(--color-text);
}
input[type="file"]{
    height: 100%;
	width: 50%;
	font-size: 1em;
	
	background-color: var(--color-dark-grey);
    color: var(--color-text); /* Text color */
    
    border-radius: 10px;
    border: solid 2px var(--color-text);
}
.hidden {
    display: none;
}

a {
    text-decoration: none; /* This will ensure links in .in2 are not underlined */
    color: var(--color-text); /* Preserving the text color */
}



body {
    width: 100vw;
    height: 100vh;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background); /* Background color */
    color: var(--color-text); /* Text color */
}

button {
    background-color: var(--color-blue);
    color: var(--color-text); /* Button text color */
    font-family: 'futura', sans-serif;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 1em;
    cursor: pointer;
    border-radius: 100px; /* 50% pour un effet de cercle (si hauteur = largeur) */
    border: none;
}



button:hover,
button:focus {
    background-color: var(--color-dark-blue);
	color: var(--color-text);
}


.btn-checked{
    background-color: var(--color-dark-grey);
    color: var(--color-blue); 
}
.btn-checked:hover,
.btn-checked:focus {
    background-color: var(--color-background);
}


.streak-halo-grey {
    --color-cercle: #9a9b9c;
}

.streak-halo-white {
    --color-cercle: #d0d3d9;
}

.streak-halo-blue {
    --color-cercle: #98b6ed;
}

.streak-halo-yellow {
    --color-cercle: #e6da70;
}
.streak-halo-purple {
    --color-cercle: #d198ed;
}
.streak-halo-red {
    --color-cercle: #ed98a3;
}

.streak-halo-exotic {
    --color-cercle: #51d5e1;
}

@keyframes exoticHaloTransition {
    0% {
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.6); /* Rouge */
    }
    25% {
        box-shadow: 0 0 15px rgba(255, 255, 0, 0.6); /* Jaune */
    }
    50% {
        box-shadow: 0 0 15px rgba(128, 0, 128, 0.6); /* Violet */
    }
    75% {
        box-shadow: 0 0 15px rgba(255, 255, 0, 0.6); /* Jaune */
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.6); /* Rouge */
    }
}







/* ----------------------------------- INDEX --------------------------------- */



.in1 {
    width: 100vw;
    height: 100vh;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	overflow: hidden; /* Empêche le défilement */
}
.in2 {
    width: 20vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--color-dark-grey);
}

.in2-1 {
    width: 100%;
    height: 90%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: flex-start;
}
.sep-menu{
    height : 100%;
}
.space-menu{
    width:3%;
}


.in2-btn-1 {
    width: 90%;
    min-height: 6%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left : 1vw;
    border-radius: 10px;
    transition: background-color 0.2s; /* Fournit une transition douce pour le changement de couleur de fond */
}

.in2-btn-1:hover {
    background-color: var(--color-dark-grey);
}


.in2-btn-2 {
    width: 90%;
    min-height: 6%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left : 1vw;
    border-radius: 10px;
}


.in3 {
    width: 80vw;
    height: 100vh;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: space-around;
}
.in3-v2 {
    width: 80vw;
    height: 100vh;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.in4 {
    width: 95%;
    height: 47%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.in5v0 {
    width: 99%;
    height: 10%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: flex-start;
}
.in5v0v2 {
    width: 99%;
    height: 7%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: flex-start;
}
/* Existing styles */
.in5v01 {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0 0; /* Les coins supérieurs arrondis et les coins inférieurs non arrondis */
    margin-left : -6px;
}

/* New styles for active tab */
.active {
    background-color: var(--color-dark-grey);
}




.in5 {
    width: 99%;
    height: 90%;
    overflow-y: scroll;
	scrollbar-width: thin;
	display: flex;
  	flex-direction: column;
    align-items: center;
    padding-top: 1vh;
	background-color: var(--color-dark-grey);
    border-radius: 10px 10px 10px 10px; 
    border : solid 6px var(--color-dark-grey);
}
.in5full{
    
    border-radius: 0px 10px 10px 10px; /* Les coins supérieurs arrondis et les coins inférieurs non arrondis */
}


.in6 {
    width: 99%;
    height: 6vh;
    min-height : 100px;
	display: flex;
  	flex-direction: row;
    align-items: center;
	border-radius: 10px;
	background-color: var(--color-background);
    margin-bottom: 1vh;
	
}

.in6-video {
    visibility: hidden;
    display: none;
	
}


.in7 {
    width: 100%;
    height: 100%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: center;
	font-size : 1em;
}
.in8-0 {
    height: 100%; 
    aspect-ratio: 1 / 1; 
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
	
}
.in8-1 {
    width: 80%; /* Ajustez la taille selon vos besoins */
    height: 80%; /* Ajustez la taille selon vos besoins */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dark-grey);
    position: relative;
    font-weight: bold;
    
}
.in8-1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: conic-gradient(var(--color-cercle) 0%, var(--color-cercle) var(--progress), var(--color-dark-grey) var(--progress), var(--color-dark-grey) 100%);
    z-index: 0;
}
.in8 {
    height: 87%;
    aspect-ratio: 1 / 1; 
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
	border-radius: 50%;
    border : solid 2px var(--color-background);
	background-color: var(--color-dark-grey);
	z-index: 1;
	
}
.in8-fire {
    height: 87%;
    aspect-ratio: 1 / 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    border : solid 2px var(--color-background);

    /* Animation de dégradé */
    background: linear-gradient(-45deg, #ff0000, #ff7c00,  #ffde00);
    background-size: 400% 400%;
    animation: Gradient 5s ease infinite;
    z-index: 1;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}


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

.in9-btn {
    width: 80%;
    height: 70%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.in9-double-btn {
    width: 70%;
    height: 70%;
    display: flex;
	flex-direction: row-reverse;
    align-items: center;
	justify-content: space-between;
}
.in9-btn-order {
    width: 40%;
    height: 90%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.btn-no-color{
    background-color: var(--color-background);
    color: var(--color-text);
}
.btn-no-color:hover{
    background-color: var(--color-dark-grey);
}
.in9-v2 {
    width: 35%;
    height: 100%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.in9-v3 {
    width: 25%;
    height: 100%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}

.in10 {
    width: 95%;
    height: 10%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
}
.in11 {
    width: 95%;
    height: 85%;
    overflow-y: scroll;
	scrollbar-width: thin;
	display: flex;
  	flex-direction: column;
	border-radius: 10px;
	background-color: var(--color-dark-grey);
	align-items: center;
}
.in12 {
    width: 98%;
    height: 6vh;
    min-height : 80px;
	display: flex;
  	flex-direction: raw;
	border-radius: 10px;
	background-color: var(--color-background);
	justify-content: center;
	align-items: center;
    margin-bottom: 1vh;
	
}
.in13 {
    height: 100%; 
    aspect-ratio: 1 / 1; 
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.in13-v2 {
    height: 100%; 
    aspect-ratio: 1 / 1; 
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}


.in14 {
    height: 65%; 
    width: 65%;
    border-radius: 50%; /* Ceci rend l'élément circulaire */
    overflow: hidden; /* Ceci masque tout ce qui dépasse du cercle */
    display: flex; /* Assurez-vous que ceci est défini pour utiliser align-items et justify-content */
    align-items: center; /* Centre l'image verticalement */
    justify-content: center; /* Centre l'image horizontalement */
}

.in14 img {
    aspect-ratio: 1 / 1; 
    height: 100%; /* L'image prend toute la hauteur du conteneur */
    width: auto; /* Garde le ratio de l'image */
    object-fit: cover; /* Assure que l'image couvre la div sans être déformée */
    min-width: 100%; /* Assure que l'image remplit la largeur si elle est plus haute que large */
    min-height: 100%; /* Assure que l'image remplit la hauteur si elle est plus large que haute */
}
.in14v2 {
    height: 75%; 
    width: 75%;
    border-radius: 50%; /* Ceci rend l'élément circulaire */
    overflow: hidden; /* Ceci masque tout ce qui dépasse du cercle */
    display: flex; /* Assurez-vous que ceci est défini pour utiliser align-items et justify-content */
    align-items: center; /* Centre l'image verticalement */
    justify-content: center; /* Centre l'image horizontalement */
}

.in14v2 img {
    aspect-ratio: 1 / 1; 
    height: 100%; /* L'image prend toute la hauteur du conteneur */
    width: auto; /* Garde le ratio de l'image */
    object-fit: cover; /* Assure que l'image couvre la div sans être déformée */
    min-width: 100%; /* Assure que l'image remplit la largeur si elle est plus haute que large */
    min-height: 100%; /* Assure que l'image remplit la hauteur si elle est plus large que haute */
}

.in15 {
    height: 100%; 
    width: 40%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.in16 {
    width: 20%;
    height: 70%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
    margin-right: 1vw;
	
	
}
.in17 {
    height: 80%;
    width: 10%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
}
.in-space-form{
  width: 1%; 
}
.in18 {
    width: 90%;
    height: 70%;
}

.newindex1 {
    width: 99%;
    height: 6vh;
    min-height : 100px;
	display: flex;
  	flex-direction: raw;
    align-items: center;
	border-radius: 10px;
	background-color: var(--color-background);
    margin-bottom: 1vh;
}

.newindex2{
    width: 75%;
    height: 100%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
}
.newindex3 {
    width: 9%;
    height: 50%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: flex-end;
}
.newindex4 {
    width: 65%;
    height: 50%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	margin-right : 1%;
	margin-left : 1%;
}
.newindex5 {
    width: 26%;
    height: 50%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: flex-start;
}

.newindex6 {
    width: 25%;
    height: 100%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.newindexbottomtext {
    width: 99%;
    height: 3vh;
    min-height : 50px;
	display: flex;
  	flex-direction: raw;
    align-items: center;
	justify-content: center;
	background-color: var(--color-dark-grey);
}

/* ----------------------------------- sign-in.php --------------------------------- */

.sign-in1{
    width: 40%;
    height: 66%;
	border-radius: 10px;
	background-color: var(--color-dark-grey);
	border : solid var(--color-text);
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 20px;
	margin-right: 20px;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: space-around;
}
.sign-in2{
    width: 90%;
    height: 13%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.sign-in3{
    width: 40%;
    height: 5%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: flex-start;
}

/* ----------------------------------- profile.php --------------------------------- */


.profother1 {
    width: 93%;
    height: 20%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 3px solid var(--color-dark-grey);
	padding-left: 1vw;
	padding-right: 1vw;
}
.profother2 {
    width: 95%;
    height: 72%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.profother3 {
    width: 90%;
    height: 80%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: center;
}
.profother4 {
    width: 85%;
    height: 100%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: center;
}
.profother6 {
    width: 100%;
    height: 35%;
    display: flex;
	flex-direction: column;
    align-items: flex-start;
	justify-content: center;
	
}
.profother6v2 {
    margin-top : 5%;
    width: 100%;
    height: 55%;
    display: flex;
	flex-direction: column;
    align-items: flex-start;
	justify-content: center;
}

.profother5 {
    width: 30%;
    height: 35%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: center;
	
}
.profother7 {
    width: 100%;
    height: 50%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: center;
	font-size : 0.9em;
	margin-bottom : 1.5%;
}


.profother7-1 {
    width: 100%;
    height: 50%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: center;
	font-size : 0.9em;
	
}
.profother7-2 {
    width: 100%;
    height: 50%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: center;
	font-size : 1.3em;
	
}
.profother8 {
    width: 25%;
    height: 100%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
}
.profother9{
   font-size : 0.8em; 
}
.pro1 {
    width: 93%;
    height: 45%;
    display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 3px solid var(--color-dark-grey);
	padding-left: 1vw;
	padding-right: 1vw;
}
.pro2-0 {
    width: 30%;
    height: 95%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.pro2-1 {
    width: 70%;
    height: 95%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.pro2 {
    width: 100%;
    height: 10%;
    margin-bottom : 5%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	
}
.pro3 {
    width: 15%;
    height: 100%;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.pro4 {
    width: 70%;
    height: 100%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
}
.input100w{
    width : 100%;
}
.pro5 {
    width: 100%;
    height: 70%;
    margin-bottom : 5%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
}
.pro6 {
    width: 30%;
    height: 100%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
}
.pro-msg{
    width: 93%;
    height: 4%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	background-color: var(--color-blue);
    color: var(--color-text); 
    border-radius: 10px;
}

.profile-pic-hover {
    position: relative;
    display: inline-block;
}

.profile-pic-hover .plus-overlay {
    
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5em; /* Adjust size as needed */
    color: white; /* Adjust color as needed */
}

.profile-pic-hover:hover .plus-overlay {
    display: block;
}

/* ----------------------------------- ../habit/new.php --------------------------------- */



.new1 {
    width: 100vw;
    height: 100vh;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
	border : solid red;
}
.new2 {
    width: 95%;
    height: 55vh;
    display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 3px solid var(--color-dark-grey);
	padding-left: 1vw;
	padding-right: 1vw;
}
.new3 {
    width: 100%;
    height: 30%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
}
.new3-2 {
    width: 100%;
    min-height: 15%;
    
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	
	margin-bottom : 2vh;
}
.new3-3 {
    width: 40%;
    height: 100%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	
	margin-bottom : 2vh;
}

.new4-1 {
    width: 20%;
    height: 50%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: flex-end;
}
.new4-2 {
    width: 20%;
    height: 50%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: flex-start;
}
.new5 {
    width: 100%;
    height: 50%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	margin-right : 1%;
	margin-left : 1%;
}
.new6{
    width: 95%;
    height: 60%;
	display: flex;
  	flex-direction: column;
    align-items: center;
	justify-content: center;
}
.new7{
    width: 70%;
    height: 60%;
    overflow-y: scroll;
	scrollbar-width: thin;
	display: flex;
  	flex-direction: column;
    align-items: center;
    padding-top: 1vh;
	background-color: var(--color-dark-grey);
	border: 3px solid var(--color-text);
    border-radius: 10px 10px 10px 10px; /* Les coins supérieurs arrondis et les coins inférieurs non arrondis */
}
.new8 {
    width: 100%;
    height: 20%;
    min-height : 50px;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	margin-right : 1%;
	margin-left : 1%;
}
.new9 {
    width: 80%;
    height: 100%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: flex-start;
}
.new10 {
    width: 10%;
    height: 100%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
}
.hab-msg{
    width: 98%;
    height: 4%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	background-color: var(--color-blue);
    color: var(--color-text); 
    border-radius: 10px;
    margin-bottom : 1%;
}
.log-msg{
    width: 40%;
    height: 4%;
    display: flex;
	flex-direction: raw;
    align-items: center;
	justify-content: center;
	background-color: var(--color-blue);
    color: var(--color-text); 
    border-radius: 10px;
    margin-bottom : 1%;
}

.header-tel{
    width: 50%;  
    margin-top:0vh; 
    margin-bottom:0vh;
    visibility: hidden;
    display: none;
    flex-direction: row; 
    align-items: center; 
    justify-content: center;
}
.header-tel{
    visibility: visible;
    display: flex; 
    margin-top:1vh; 
    margin-bottom:1vh;
    }


.show-on-cellphone{
    visibility: hidden;
    display: none;
}
/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* ----------------------------------- media query tel --------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */




@media all and (max-width: 800px) {
    
    
    .show-on-cellphone{
        visibility: visible;
        display: flex; /* ou 'inline', 'inline-block', etc., selon le comportement souhaité */
    }
    .hide-on-cellphone{
        visibility: hidden;
        display: none;
    }
    
    :root {
        font-size: 0.8em;
    }
    
    .in2 {
        width: 10vw;
    }
    .in2-1 {
        height: 98%;
    }
    .in3 {
        width: 90vw;
    }
    
    .in3-v2 {
        width: 90vw;
    }
    
    .in2-btn-1-txt {
        visibility: hidden;
        display: none;
    }
    .space-menu{
        visibility: hidden;
        display: none;
    }
    .in2-btn-1 {
    justify-content: center;
    }
    
    .in10 {
        height: 6%;
        margin-bottom : 1vh;
    }
    .in17 {
    height: 100%;
    width: 30%;
    }
    .in18 {
        height: 100%;
        width: 70%;
    }
    .in5v01 {
        width: 45%;
        margin-bottom : -2px;
    }
    .in5{
        margin-bottom: 0.8vh;
    }
    .in6 {
        min-height : 80px;
    	
    }
    .in6-video {
        min-height : 80px;
        width: 99%;
        height: 6vh;
    	display: flex;
    	visibility: visible;
      	flex-direction: row;
        align-items: center;
    	justify-content: center;
    	border-radius: 10px;
    	background-color: var(--color-background);
        margin-bottom: 1vh;
    	
    }
    
    .newindex1 {
         min-height : 80px;
        font-size: 0.65em;
    }
    
    .newindex2{
        width: 80%;
    }
    
    .newindex3 {
        width: 12%;
    }
    .newindex4 {
        width: 44%;
    }
    .newindex5 {
        width: 44%;
    }
    
    .newindex6 {
        height : 80%;
        aspect-ratio: 1 / 1; 
        font-size: 1em;
        border-radius : 100%;
    }


    .in7 {
        width : 60%;
    	font-size : 0.8em;
    }
    .in8-0 {
        height: 90%; 
    }
    .in9 {
        border-radius: 50%;
        font-size : 0.75em;
        height: 90%;
        aspect-ratio: 1 / 1; 
    }
    .in9-v2 {
        border-radius: 50%;
        font-size : 0.75em;
        height: 90%;
        width : 30%;
    }
    
    
    .profother1 {
        height: 15%;
    }
    .profother2 {
        height: 77%;
    }
    .profother3 {
        width: 90%;
        height: 80%;
        display: flex;
    	flex-direction: row;
        align-items: center;
    	justify-content: center;
    }
    .profother4 {
        width: 85%;
        height: 100%;
        display: flex;
    	flex-direction: row;
        align-items: center;
    	justify-content: center;
    }
    .profother6 {
        width: 50%;
        height: 35%;
        display: flex;
    	flex-direction: column;
        align-items: flex-start;
    	justify-content: center;
    	
    }
    .profother6v2 {
        width: 70%;
        height: 95%;
        display: flex;
    	flex-direction: column;
        align-items: flex-start;
    	justify-content: center;
    	
    }
    
    .profother5 {
        width: 50%;
        height: 45%;
        display: flex;
    	flex-direction: row;
        align-items: center;
    	justify-content: center;
    	font-size : 0.8em;
    	
    }
    .profother7 {    
        width: 100%;
        height: 30%;
        display: flex;
    	flex-direction: row;
        align-items: center;
    	justify-content: center;
    	font-size : 0.7em;
    	margin-bottom : 8%;
    	
    }
    
    

    .profother7-2 {
        width: 100%;
        height: 50%;
        display: flex;
    	flex-direction: row;
        align-items: center;
    	justify-content: center;
    	font-size : 1em;
    	
    }
    .profother9{
       font-size : 0.4em; 
    }
    .pro2-0 {
        width: 40%;
    }
    .pro2-1 {
        width: 60%;
    }
    .pro3 {
        width: 20%;
    }
    .in13 {
        height: 90%; 
        aspect-ratio: 1 / 1; 
        display: flex;
    	flex-direction: column;
        align-items: center;
    	justify-content: center;
    }
    .in13-v2 {
        height:60%; 
    }
    
    .new3 {
        height: 20%;
    }
    .new3-3 {
        width: 60%;
    }
    .new4-1 {
        width: 20%;
    }
    .new4-2 {
        width: 25%;
    }
    .new5 {
        width: 55%;
    }
    .sign-in1{
        width: 80%;
        height: 66%;
    }
    .header-tel{
    visibility: visible;
    display: flex; 
    margin-top:1vh; 
    margin-bottom:1vh;
    }
}