@charset "utf-8";
/* CSS Document */

/* RESET */
* {
  /*margin: 0;
  padding: 0;*/
  box-sizing: border-box;
}

body {
	font-size: 17px;
	line-height: 1.3;
	margin:0px 0px 100px 0px;
	color:#00355f;
	}

@font-face {
    font-family: 'phenomena';
    src: url('../fonts/Phenomena-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'phenomenaBold';
    src: url('../fonts/Phenomena-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.open-sans-normal {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.open-sans-bold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

sup { vertical-align: top; font-size: 0.6em; }

.sildeTitle{font-size:40px; color:#432285; font-family: 'phenomenaBold'; margin-bottom:10px; margin-top:50px; word-wrap: break-word; line-height: 1;}
.slideSubTitle{font-size:30px; color:#00355f; font-family: 'phenomenaBold'; margin-bottom:10px; word-wrap: break-word;}

/*COLORS*/
.mauve{color:#462e83;}
.blueLight{color:#5590cc;}
.mauveLight{color:#c9b8da;}
.blueDark{color:#00355f;}
.mauveMiddle{color:#8158D4;}
.importantRed{color:#ba2025 !important}

.carePlanTitle{color:#5590cc; font-weight: bold;}

.highliteClickText{background-color: none; font-weight: bold; color: #8158D4; text-decoration: underline;}

ul.custom-bullets li::marker {
  color: #765ea8; /* change color here */
}

ul.custom-bullets2 li::marker {
  color: white; /* change color here */
}

.ulIndent{margin-left:20px;}
li{margin-top:5px;}

img {
  border-radius: 15px;
}

.imageTitle{color:#8158D4; font-size:18px; font-weight: bold; text-align:center; margin-top:20px;}
.imageGaleryTitle{color:black; font-size:14px; font-weight: normal; text-align:center; margin-top:5px;}

.responsive-image {
  width: auto;        /* keep original size */
  max-width: 100%;    /* prevent overflow */
  height: auto;
}

.moreImageButton{background-color: #462e83; color: white; border-radius: 15px; font-size: 16px; text-align: center; padding:6px 12px; display: inline-block;}
.moreImageButton a{color:white; text-decoration: none;}

p{
margin-bottom:10px;
}
h1, h2, h3, h4, h5{font-family: 'phenomena', sans-serif;}

td {vertical-align: top;}

.strokeBoxContent{border: 0px #462e83 solid; border-radius: 0px; padding:0%; margin-top: 10px;}
.strokeBoxContentYes{border: 1px #462e83 solid; border-radius: 20px; padding:1.5%; margin-top: 10px; }
.strokeBoxContentImportant{border: 2px #ba2025 solid; border-radius: 20px; padding:1.5%; margin-top: 10px;  display: inline-block;}
.boxConsider{border: 1px #462e83 solid; border-radius: 20px; margin-top: 10px; display: inline-block; padding:3% 3% 5% 3%; background-color: #8158D4; color: white;}

.divLineSep{width: 100%; height: 1px; background-color: #00355f; margin:20px 0px;}

.videoPLace{font-size: 14px; text-align: center;}
.videoTitle{font-size: 18px; text-align: center; font-weight: bold;}
.videoPLaceColumn{float:left; width:33%;}

.containerTwoVideos {
  display: flex;
}

.vimeo{
	display: flex;
  justify-content: center; /* Horizontally centers the video */
  align-items: center;     /* Vertically centers the video */  
margin-bottom:10px;
}

.boxTwoVideos {
  width: 48%; /* or any size you want */
	padding:1%;
}

#mobileDiv,
#desktopDiv {
  display: none;
}

/*Image position on a column*/
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
}
/*End Image position on a column*/

.arrow-down {
  width: 0;
  height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 30px solid #5590cc;
  margin: 5px auto;
}

.arrow-down-mauve {
  width: 0;
  height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 30px solid #462e83;
  margin: 5px auto;
}

.arrow-rightTop {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #5590cc;
  margin: 50px 0px;

}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #5590cc;
  margin: 0px 20px 0px 0px;
}

.center-cell {
  /*text-align: center;*/
  vertical-align: middle;
}

.referencesBottom{font-size: 12px; color: #666666; margin-top:60px; word-wrap: break-word;}
.referencesPhoto{font-size: 12px; color: #666666; margin-top:0px; word-wrap: break-word; text-align: left;}
.referencesPopupAlgo{font-size: 12px; color: #666666; margin-top:20px; word-wrap: break-word; text-align: left;}
.referencesPages{font-size: 14px; word-wrap: break-word;}

a {
  color: #462e83; 
  text-decoration: underline;
}

/* WRAPPER */
.wrapper {
  width: 100%;
  background: #fff;
	padding:2% 10% 20% 2%;
	
}


/* WRAPPER INDEX */
.wrapperIndex {
  width: 100%;
  background: url("../images/home-background.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 100vh;
	margin:0px;
	}

/* INDEX MAIN*/
.wrapperIndexMain {
  width: 100%;
  background: url("../images/index/background.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 100vh;
	margin:0px;
	}
.marginDivLeftIndex{margin-bottom:40px;}
.marginDivRightIndex{margin-bottom:10px;}
.paddingLeftIndex{margin-left:12%; margin-right:5%;}

/*used in index page*/
.center-container {
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;     /* Vertically center */
  height: 100vh;           /* Make the container span the full height of the viewport */
  width: 100vw;            /* Make the container span the full width of the viewport */
  margin: 0;               /* Remove default body margins if applied to body directly */
	padding:0% 2% 0% 2%;
}

/*used in more images pages*/
.center-containerImages {
  display: flex;
  justify-content: center; /* Horizontally center */

  height: 100vh;           /* Make the container span the full height of the viewport */
  width: 100vw;            /* Make the container span the full width of the viewport */
  margin: 0;               /* Remove default body margins if applied to body directly */
	padding:0% 2% 0% 2%;
}

/* Optional: style for the image itself */
img {
  max-width: 100%;
  max-height: 100%;
}

/*columns responsive*/
* {
  box-sizing: border-box;
}

.container {
  display: flex;
  gap: 1%;
  padding: 1% 0%;
margin-top:0px;
}

.column {
  flex: 1;
  background: none;
  padding: 0rem;
}

/*slides navigation*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bottom-row {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 1%;
  background: rgba(255, 255, 255, 0.75);

}

/* Columns for slides navigation*/
.columnBottom {
  flex: 1;
  display: flex;
  justify-content: right;
	padding-right:10px;
}

/* Images */
.columnBottom img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.columnBottomRight {
  flex: 1;
  display: flex;
  justify-content: left;
	padding-left:10px;
}

/* Images */
.columnBottomRight img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
	
}

/* WRAPPER THAT MAKES BOXES GO SIDE BY SIDE */
  .two-box {
    flex-direction: column; /* stack */
  }
  .box1, .box2 {
    width: 100%; margin-top:20px;
  }


.box-wrapper {
  display: flex;
  flex-wrap: wrap;   /* allow wrapping */
  gap: 15px;
}


.div2colums{float:left; display: block; width: 50%; padding:2% 0%;}
.div2columsLeft{float:left; display: block; width: 70%; padding:0%;}
.div2columsRight{float:left; display: block; width: 30%; padding:0% 2%;}

.div3columsLeft{float:left; display: block; width: 60%; padding:0%;}
.div3columsRight{float:left; display: block; width: 40%; padding:0% 2%;}

.div2columsLeft2{float:left; display: block; width: 70%; padding:0%;}
.div2columsRight2{float:left; display: block; width: 30%; padding:0% 2%;}

.div2columsRightCenter{
display: flex;
  justify-content: center; /* Aligns items along the main axis (horizontal by default) */
  align-items: center;     /* Aligns items along the cross axis (vertical by default) */
 /* height: 100vh;*/     
}

/* EACH BOX */
.containerSymptoms {
  display: flex;
  border: 0px solid black;
  width: 245px;   /* box width */
min-height:60px;
  font-family: "phenomena";
}

/* LEFT SIDE */
.left-containerSymptoms {
  background: #432285;
  color: white;
  width: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5px;
font-weight:bold;
font-size: 20px;
}

/* RIGHT SIDE */
.right-containerSymptoms {
  background: white;
  width: 35%;
  padding: 5px;
	font-size: 16px;
}

.right-containerSymptoms label {
  display: block;
	font-family: "Open Sans", sans-serif;
}

.left-containerSymptomsFR {
  background: #432285;
  color: white;
  width: 62%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5px;
font-weight:bold;
font-size: 20px;
}
.right-containerSymptomsFR {
  background: white;
  width: 38%;
  padding: 5px;
	font-size: 20px;
}
	

/*lesionsBox*/
.box-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

/* EACH BOX */
.box {
  width: 230px;
	height:auto;
  border: 1px solid #432285;
  font-family: "phenomena", sans-serif;
font-weight: bold;
}

/* TOP ROW (WHITE) */
.box-top {
  background: white;
  padding: 2px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
	text-align: right;
}

/* TEXT */
.box-top span {
  font-size: 24px;
min-height: 65px;
}

.marginTextBoxTop{padding-left:20px; padding-top:15px;}

/* IMAGE RIGHT */
.box-top img {
  width: 74px;
  height: 42px;
}

/* BOTTOM ROW (purple) */
.box-bottom {
  background: #432285;
  padding: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ICONS */
.box-bottom img {
  width: 46px;
  height: auto;
}

.importantTable{text-align: center; padding-right:20px; width: 170px;}

.marginWrapper{margin: 20px 20px;}

/*END STYLE ALGORITHM*/


/*ROLLOVER IMAGE*/
.buttons-container {
  display: flex;
  gap: 20px; /* spacing between buttons */
}

.image-button {
  /*width: 173px;
  height: 50px;*/
  border: none;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
  display: inline-block;  /* make sure button displays */
}

/* Button 1 */
.btn1 {
  background-image: url('../images/algorithm-print.png');
		width: 173px;
	height: 50px;
}
.btn1:hover {
  background-image: url('../images/algorithm-print-hover.png');
}

.btnReset {
  background-image: url('../images/algorithm-reset.png');
		width: 135px;
	height: 49px;
}
.btnReset:hover {
  background-image: url('../images/algorithm-reset-hover.png');
}

/* Button 2 */
.btn2 {
  background-image: url('../images/ecchymosis/bt-care-plan.png');
	width: 173px;
	height: 50px;
}
.btn2:hover {
  background-image: url('../images/ecchymosis/bt-care-plan-hover.png');
}

/* INDEX MAIN Button 3 */
.btn3 {
  background-image: url('../images/index/bt-introduction.png');
	width: 224px;
	height: 47px;
}
.btn3:hover {
  background-image: url('../images/index/bt-introduction-hover.png');
}

.btn4 {
  background-image: url('../images/index/bt-prevention.png');
		width: 442px;
	height: 47px;
}
.btn4:hover {
  background-image: url('../images/index/bt-prevention-hover.png');
}

.btn5 {
  background-image: url('../images/index/bt-algorythm.png');
		width: 420px;
	height: 50px;
}
.btn5:hover {
  background-image: url('../images/index/bt-algorythm-hover.png');
}

.btn6 {
  background-image: url('../images/index/bt-erythma.png');
		width: 370px;
	height: 52px;
}
.btn6:hover {
  background-image: url('../images/index/bt-erythma-hover.png');
}

.btn7 {
  background-image: url('../images/index/bt-nodule.png');
		width: 370px;
	height: 52px;
}
.btn7:hover {
  background-image: url('../images/index/bt-nodule-hover.png');
}

.btn8 {
  background-image: url('../images/index/bt-ecchymosis.png');
		width: 370px;
	height: 52px;
}
.btn8:hover {
  background-image: url('../images/index/bt-ecchymosis-hover.png');
}

.btn9 {
  background-image: url('../images/index/bt-edema.png');
		width: 370px;
	height: 52px;
}
.btn9:hover {
  background-image: url('../images/index/bt-edema-hover.png');
}

.btn10 {
  background-image: url('../images/index/bt-dermatitis.png');
		width: 370px;
	height: 52px;
}
.btn10:hover {
  background-image: url('../images/index/bt-dermatitis-hover.png');
}

.btn11 {
  background-image: url('../images/index/bt-cellulitis.png');
		width: 370px;
	height: 52px;
}
.btn11:hover {
  background-image: url('../images/index/bt-cellulitis-hover.png');
}

.btn12 {
  background-image: url('../images/index/bt-abscess.png');
		width: 370px;
	height: 52px;
}
.btn12:hover {
  background-image: url('../images/index/bt-abscess-hover.png');
}

.btn13 {
  background-image: url('../images/index/bt-pain.png');
		width: 370px;
	height: 52px;
}
.btn13:hover {
  background-image: url('../images/index/bt-pain-hover.png');
}

.btprintAlgo{text-align: right; margin-right: 20px;}


/* INDEX MAIN Button FR */
.btn14 {
  background-image: url('../images/index-fr/bt-introduction.png');
	width: 224px;
	height: 47px;
}
.btn14:hover {
  background-image: url('../images/index-fr/bt-introduction-hover.png');
}

.btn15 {
  background-image: url('../images/index-fr/bt-prevention.png');
	width: 530px;
	height: 47px;
}
.btn15:hover {
  background-image: url('../images/index-fr/bt-prevention-hover.png');
}

.btn16 {
  background-image: url('../images/index-fr/bt-algorythm.png');
		width: 520px;
	height: 50px;
}
.btn16:hover {
  background-image: url('../images/index-fr/bt-algorythm-hover.png');
}

.btn17 {
  background-image: url('../images/index-fr/bt-erythma.png');
		width: 370px;
	height: 52px;
}
.btn17:hover {
  background-image: url('../images/index-fr/bt-erythma-hover.png');
}

.btn18 {
  background-image: url('../images/index-fr/bt-nodule.png');
		width: 370px;
	height: 52px;
}
.btn18:hover {
  background-image: url('../images/index-fr/bt-nodule-hover.png');
}

.btn19 {
  background-image: url('../images/index-fr/bt-ecchymosis.png');
		width: 370px;
	height: 52px;
}
.btn19:hover {
  background-image: url('../images/index-fr/bt-ecchymosis-hover.png');
}

.btn20 {
  background-image: url('../images/index-fr/bt-edema.png');
		width: 370px;
	height: 52px;
}
.btn20:hover {
  background-image: url('../images/index-fr/bt-edema-hover.png');
}

.btn21 {
  background-image: url('../images/index-fr/bt-dermatitis.png');
		width: 370px;
	height: 52px;
}
.btn21:hover {
  background-image: url('../images/index-fr/bt-dermatitis-hover.png');
}

.btn22 {
  background-image: url('../images/index-fr/bt-cellulitis.png');
		width: 370px;
	height: 52px;
}
.btn22:hover {
  background-image: url('../images/index-fr/bt-cellulitis-hover.png');
}

.btn23 {
  background-image: url('../images/index-fr/bt-abscess.png');
		width: 370px;
	height: 52px;
}
.btn23:hover {
  background-image: url('../images/index-fr/bt-abscess-hover.png');
}

.btn24 {
  background-image: url('../images/index-fr/bt-pain.png');
		width: 370px;
	height: 52px;
}
.btn24:hover {
  background-image: url('../images/index-fr/bt-pain-hover.png');
}

.btnResetFR {
  background-image: url('../images/algorithm-reset-fr.png');
		width: 135px;
	height: 49px;
}
.btnResetFR:hover {
  background-image: url('../images/algorithm-reset-hover-fr.png');
}

/* Button 2 */
.btn2FR {
  background-image: url('../images/ecchymosis/bt-care-plan-fr.png');
	width: 173px;
	height: 50px;
}
.btn2FR:hover {
  background-image: url('../images/ecchymosis/bt-care-plan-hover-fr.png');
}

.btnAlgoFR {
  background-image: url('../images/algorithm-print-fr.png');
		width: 173px;
	height: 50px;
}
.btnAlgoFR:hover {
  background-image: url('../images/algorithm-print-hover-fr.png');
}

/* DESKTOP/TABLET */
@media (min-width: 1225px) {

}

	.form-container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* space between fields */
  width: 100%;
}

.form-container textarea {
  width: 100%;             /* full width */
  min-height: 150px;           /* bigger height */
  padding: 12px;
  font-size: 17px;
  /*resize: vertical;*/        /* user can still resize vertically */
  /*overflow-wrap: break-word;*/ /* text wraps automatically */
  border: 1px solid #ccc;
  border-radius: 5px;
	font-family: "Open Sans", sans-serif;
	 transition: height 0.1s ease;
}

.clickEnlargeMention{text-align: center; font-size:14px; margin-bottom:0px;}
.clickEnlargeMentionLeft{text-align: left; font-size:14px; margin-bottom:0px; margin-top:20px; margin-left:10px;}

.rounded-boxIndex {
  border: 0px solid #791315; /* stroke color */
  border-radius: 20px;       /* rounded corners */
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  color: #00355f;
display:inline-block;
	max-width: 520px;
}