:root {
    --form-element-bk-color: #2e6d8e; /* #4682b4 */

    --post-it-width: 300px;
    --post-it-height: 300px;
    --post-it-title-height: 35px;
    --post-it-width-medium: 250px;
    --post-it-height-medium: 250px;
    --post-it-title-height-medium: 32px;
    --post-it-width-small: 200px;
    --post-it-height-small: 200px;
    --post-it-title-height-small: 30px;
    --post-it-img-size: 24px;    
    --post-it-corner-radius-small: 5px;
    --post-it-corner-radius-medium: 10px;
    --post-it-corner-radius-large: 15px;

    --hr-bk-color: #eae7e4;

    --pin-pad-bk-color: #F5F4F5;

    --folder-bk-color-2: transparent; 
    --folder-border-color: #2e6d8e; /* #2e6d8e; #CECACE; */
    --folder-bk-color: white;

    --table-std-bk-color-th: #2e6d8e; /* #D770AA; */
    --table-std-bk-color-1: #D3C9C2; /* #F5E0ED; */
    --table-std-bk-color-2: #D3C9C2; /* #F5E0ED; */

    --icon-bk-color: #D4CAC4;
    --icon-bk-color-hover: #EDBFD9;

    --form-bk-color: transparent; /*#D5CBC4; */

    --table-bk-color-th: #d2ccc8; /* #7F7975;  #D770AA; */
    --table-bk-color-dark:  #eae7e4; /* #D3C9C2; #EDBFD9; */
    --table-bk-color-clear: white; /* #F5E0ED; */

    --page1-bk-color_modified: #F9FAFB; 
    --page2-bk-color_modified: white; 

    --box-bk-color-1: #EDBFD9;
    --box-bk-color-2: #F5E0ED;

    --page-bk-color: #414246;

    --patient-task-select-bk-color: #D3C9C2;
    --patient-task-select-color: #414246;
    --patient-task-border-color: #D3C9C2;

    --chat-bk-color: #d2ccc8;
    --chat-sent-bk-color: #56A0C8;
    --chat-sent-color: white;
    --chat-received-bk-color: white;
    --chat-received-color: #414246;
    --chat-system-bk-color: #868e96;
    --chat-system-color: white;
    --chat-form-bk-color: #eae7e4;
    --chat-button-bk-color: #2e6d8e;
    --chat-button-hover-bk-color: #56A0C8;

    --green: #4A8262;
    --green-bk: #68A786; /* #7FAF96; */
    --red: #B65A5A;
    --red-bk: #C76D6D; /* #D28D8D; */
    --blue-bk: #4682b4;

}

/* --------------------------------------------------- */
/* Color / style modifications */ 
body.EMBEDDED {
    background-color: white;
}

body.EMBEDDED div.PAGEWRAPPER
{
    width: 100%;
    max-width: 100vw;;
}

body.EMBEDDED div.PAGEWITHOUTSLIDER
{
    margin: 0;
	padding-left: 3vw;
    padding-right: 0;
	width: 94%;
    max-width: 94vw;
	font-size: 100%;
}

body 
{
    text-align: left;
    background-color: var(--page-bk-color);
}

div.FOOTERCONTENT
{
    padding: 0;
    font-size: 85%;
    background-color: var(--page-bk-color);
}
div.FOOTERCENTER 
{
    background-color: var(--page-bk-color);
}

img.DONNA_LOGO_FOOTER 
{
    width: 150px;
    height: 42px;
    margin: auto;
}

div.PAGE
{
	background-color: var(--page1-bk-color_modified);
}

div.PAGE:nth-child(2n) {
    background-color: var(--page2-bk-color_modified);
}

DIV.BOX_WIDE
{
    border: solid 1px var(--box-bk-color-2);
	background-color: var(--box-bk-color-2);
}

DIV.FOLDER, DIV.FOLDER-ROUND {
    width: calc(100% - 40px);
}

@media (hover: hover) {
	DIV.BOX:hover
	{
        border-color: var(--box-bk-color-1);
		background-color: var(--box-bk-color-1);
	}
	
	DIV.BOX_WIDE:hover
	{
        border-color: var(--box-bk-color-1);
		background-color: var(--box-bk-color-1);
	}
	
	div.PAGE:nth-child(2n) DIV.BOX_WIDE:hover
	{
        border-color: var(--box-bk-color-1);
		background-color: var(--box-bk-color-1);
	}
}

/* --------------------------------------------------- */
/* General */

.HOVER_POINTER {
    cursor: pointer;
}



/* --------------------------------------------------- */
/* Header / title */

DIV.CONTACTLEFT {
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
	background-color: var(--menu-bk-color);
}

DIV.MENULOGO {
    text-align: center;
	background-color: var(--menu-bk-color);
	width: 20vw;
}

img.DONNA_LOGO_MENU {
    width: 150px;
    height: 42px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1023px) {	
	
	div.MENULOGO {
		display: none;
	}

    DIV.CONTACTRIGHT {
        float: right;
    }   
    
    DIV.CONTACTLEFT {
        float: left;
    }

}

@media screen and (min-width: 1024px) {	
    
    DIV.PAGECONTACT {
        display: flex;
    }    

    DIV.CONTACTLEFT {
        padding-left: 10vw;
        width: 30vw;
    }

    DIV.CONTACTRIGHT {
        width: 30vw;
        padding: 0;
    }    
}

/* --------------------------------------------------- */
/* Titles modifications */

h1 {
    text-align: left;
}

h2 {
    text-align: left;
}

h3 {
    text-align: left;
}

h1.ASSISTANT {
    text-align: left;
}
h2.ASSISTANT {
    text-align: left;
}
h3.ASSISTANT {
    text-align: left;
}

h2.FOLDER_SUB_TITLE {
    border-bottom: solid 1px var(--folder-border-color);
}
p {
    text-align: left;
}

DIV.PAGE {
    text-align: left;
}

DIV.INFO_CONTAINER {
	display: flex;
	justify-content: center;
	background-color: transparent;
	margin-top: 20px;
	margin-bottom: 20px;
}

DIV.INFO, DIV.INFO:active, DIV.INFO:focus {
    padding: 15px 5px;
	margin: 5px;
}

UL LI {
    text-align: left;
}


/* --------------------------------------------------- */
/* icon */

DIV.ICON {

}

img.ICON {
    margin-left: 5px;
}

DIV.ICON_MEDIUM {
    margin-left: 3px;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--icon-bk-color);
    display: flex;
    align-items: center;    
}

DIV.ICON_MEDIUM_NO_LMARGIN {
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--icon-bk-color);
    display: flex;
    align-items: center;    
}

DIV.ICON_MEDIUM_OK {
    margin-left: 3px;
    margin-bottom: 10px;
    width: 36px;
    height: 36px;
    border-radius: 20px;
    border: solid 2px var(--icon-bk-color);
    display: flex;
    align-items: center;    
}

DIV.ICON_MEDIUM_ERROR {
    margin-left: 3px;
    margin-bottom: 10px;
    width: 36px;
    height: 36px;
    border-radius: 20px;
    border: solid 2px var(--icon-bk-color);
    display: flex;
    align-items: center;    
}


DIV.ICON_MEDIUM IMG,
DIV.ICON_MEDIUM_OK IMG,
DIV.ICON_MEDIUM_ERROR IMG {
    width: 30px;
    height: 30px;
    margin: auto;
    display: block;
}

DIV.ICON_MEDIUM:hover, DIV.ICON_MEDIUM_NO_LMARGIN:hover {
    background-color: var(--icon-bk-color-hover);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


/* --------------------------------------------------- */
/* Divers */

HR {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: var(--hr-bk-color);  /* old IE */
    background-color: var(--hr-bk-color);  /* Modern Browsers */
    width: 100%;
    margin-top: 50px;
    margin-bottom: 10px;
}

HR.SMALL {

    color: transparent;
    background-color: transparent;
	width: 60%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--hr-bk-color), rgba(0, 0, 0, 0));
}

/* --------------------------------------------------- */
/* Tables (markdown) */
table {
	border: 0.5px solid #818286;
    border-radius: 10px;
}

table th {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-bottom: 0.5px solid #818286;    
	text-align: left;
    font-weight: 400;
    background-color: var(--table-std-bk-color-th);
    color: white;
}
table th.right {
	text-align: right;
}

table tr {
    background-color: var(--table-std-bk-color-1);
	border: 0.5px solid #818286;    
}

/*
table tr:nth-child(2n):not([class]) {
    background-color: var(--table-std-bk-color-2);
}*/

table th.HEADER_DARK {
    background-color: var(--table-bk-color-th);
    color: white;
}

table tr.TR_DARK {
    background-color: var(--table-bk-color-dark);
}

table tr.TR_CLEAR {
   background-color: var(--table-bk-color-clear); 
}

table td {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-bottom: 0.5px solid #818286;    
	text-align: left;
	vertical-align: center;
	font-weight: 300;
}

table td.right {
	text-align: right;
}

/* --------------------------------------------------- */
/* Tables (report_title) */
table.PDF_REPORT {
    border: 0;
}

table.PDF_REPORT th, table.PDF_REPORT tr, table.PDF_REPORT td {
    border: 0;
    background-color: transparent;
}

table.PDF_REPORT td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 3px;
    padding-right: 3px;
}


/* --------------------------------------------------- */
/* Tables (forms) */
table.FORM_TABLE {
    border: 0;
}

table.FORM_TABLE th, table.FORM_TABLE tr, table.FORM_TABLE td {
    border: 0;
    background-color: transparent;
}

table.FORM_TABLE td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 3px;
    padding-right: 3px;
}

td.FORM_TABLE_LABEL {
    width: 35%;
    padding: 0;
    margin: 0;
}

td.FORM_TABLE_LABEL_AFTER {
    width: 95%;
    padding: 0;
    margin: 0;
    margin-left: 10px;
}

table.FORM_TABLE_WITH_BORDER {
    border: 0.5px solid #818286;
}

table.FORM_TABLE_WITH_BORDER th, table.FORM_TABLE_WITH_BORDER td {
    border: 0.5px solid #818286;
}

table.FORM_TABLE_WITH_BORDER td {
    padding-top: 5px;
    padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

table.FORM_TABLE_WITH_BORDER tr {
    background-color: var(--table-std-bk-color-1);
	border: 0.5px solid #818286;
}

table.FORM_TABLE_WITH_BORDER tr:nth-child(2n) {
    background-color: var(--table-std-bk-color-2);
}

table.PARAMETER_FORM_TABLE {
    border: 0.5px solid #818286;
}

table.PARAMETER_FORM_TABLE th {
    background-color: var(--table-bk-color-th);
}

table.PARAMETER_FORM_TABLE td {
    border: 0.5px solid #818286;
    padding-top: 5px;
    padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

table.PARAMETER_FORM_TABLE tr {
    background-color: var(--table-bk-color-clear); 
	border: 0.5px solid #818286;
}

/* --------------------------------------------------- */
/* Tables (report) */

table.report th.right {
	text-align: right;
}

table.report td.right {
	text-align: right;
}

/* --------------------------------------------------- */
/* Forms */
DIV.REPORT_FORMWRAPPER
{
    width: 100%;
	margin: 0;
    text-align: left;
    font-size: 16px;
    background-color: var(--form-bk-color);
    border-radius: 10px;
}

DIV.REPORT_FORMWRAPPER FORM {
    padding: 0;
    margin: 0;
}

DIV.FORM_LABEL {
    display: inline-block;
	font-family: var(--font-family-bold);
    font-size: 125%;
	font-weight: 400;
    margin-left: 1px;
    margin-right: 5vw;
    margin-bottom: 5px;
}

DIV.REPORT_FORMWRAPPER H2 {
	margin-top: 2em;
	margin-bottom: 0;
}

TEXTAREA.NOTE, TEXTAREA.REPORT_TEXTAREA, TEXTAREA.REPORT_BIG_TEXTAREA, INPUT.REPORT_FILE,
    INPUT.REPORT_TEXT, SELECT.REPORT_SELECT, INPUT.REPORT_NUMBER,
    INPUT.REPORT_RADIO, INPUT.REPORT_DATE {
        text-decoration: none;
        border: 0;
        border-radius: 5px;
        background-color: var(--form-element-bk-color);
        color: white;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        font-family: var(--font-family);
        font-size: 16px; 
        font-weight: 200;
}

INPUT.REPORT_CHECKBOX {
    text-decoration: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 3px solid lightgray;
    margin: 0;
    padding: 0;
    background-color: var(--form-element-bk-color);
    color: white;
    line-height: 20px;
}

INPUT.REPORT_CHECKBOX:checked {
    color: var(--info-hover-bk-color);
}

TEXTAREA.NOTE, TEXTAREA.REPORT_TEXTAREA {
    height: 100px;    
	width: 100%;
}

TEXTAREA.REPORT_BIG_TEXTAREA {
    height: 300px;    
	width: 100%;
}

INPUT.REPORT_FILE, INPUT.REPORT_TEXT {
	width: 100%;
}

SELECT.REPORT_SELECT {
    width: 300px;
}

INPUT.REPORT_NUMBER {
	width: 200px;
}

INPUT.REPORT_SUBMIT_BUTTON, BUTTON.REPORT_SUBMIT_BUTTON
{
	background-color: #d2ccc8; 
	border: none;
    border-radius: 5px;
	padding: 10px 32px;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--font-family);
	font-size: 16px; 
	font-weight: 300;
	margin: 0;
	margin-top: 10px;
}

INPUT.REPORT_SUBMIT_ICON {
    margin-left: 3px;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 20px;
    background-color: var(--icon-bk-color);
    background-size: cover;
    display: flex;
    align-items: center;    
    font-size: 1em;
    color: transparent; /* Fix for Firefox */
    /*padding: 0 0 0 40px !important; /* Fix for Internet Explorer */
    line-height: 1 !important;
    overflow: hidden;
    cursor: pointer;    
}

INPUT.REPORT_SUBMIT_ICON:hover {
    background-color: var(--icon-bk-color-hover);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

INPUT.FB_SUBMIT_BUTTON, INPUT.FB_SUBMIT_BUTTON:active, INPUT.FB_SUBMIT_BUTTON:focus,
    BUTTON.FB_SUBMIT_BUTTON, BUTTON.FB_SUBMIT_BUTTON:active, BUTTON.FB_SUBMIT_BUTTON:focus
{
	border-radius: 5px;
	border: solid 1px var(--info-bk-color); 
	text-align: center;
	background-color: transparent; 
	color: var(--info-bk-color);
	text-decoration: none;
	cursor: pointer;
	font-family: var(--font-family);
	font-size: 16px; 
	font-weight: 300;
	padding: 16px 32px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 2em;
	min-width: 140px;
}

INPUT.FB_SUBMIT_BUTTON_DISABLED, INPUT.FB_SUBMIT_BUTTON:disabled, BUTTON.FB_SUBMIT_BUTTON:disabled {

    border-radius: 5px;
	border: solid 1px var(--info-bk-color-disabled); 
	text-align: center;
	background-color: transparent; 
	color: var(--info-bk-color-disabled);
	text-decoration: none;
    cursor: auto;
	font-family: var(--font-family);
	font-size: 16px; 
	font-weight: 300;
	padding: 16px 32px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 2em;
	min-width: 140px;
}

HR.FORM_THIN {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: var(--hr-bk-color);  /* old IE */
    background-color: var(--hr-bk-color);  /* Modern Browsers */
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (hover: hover) {	

    INPUT.INPUT.REPORT_SUBMIT_BUTTON:not(:disabled):hover {
        background-color: var(--info-hover-bk-color);
		color: var(--info-hover-text-color);
        border-color: var(--info-hover-bk-color);
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

	INPUT.FB_SUBMIT_BUTTON:not(:disabled):hover
	{
		background-color: var(--info-hover-bk-color);
		color: var(--info-hover-text-color);
        border-color: var(--info-hover-bk-color);
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}
}

DIV.INFO P
{
	text-align: center;
}

/* --------------------------------------------------- */
/* Patient tasks */

DIV.PATIENT_TASK, DIV.PRINT_BOX, DIV.SELECT_BOX {
    clear: right;
    float: right;
    padding: 5px;
    margin: 0;
    margin-bottom: 3px;
    border: solid 1px var(--patient-task-border-color);
    border-radius: 25px;
    height: 40px;
}

DIV.PATIENT_TASK SELECT, DIV.PRINT_BOX SELECT, DIV.SELECT_BOX SELECT, SELECT.SELECT_BOX {
    float: right;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 18px;
    height: 30px;
    width: auto;
    max-width: 20vw;
    background-color: var(--patient-task-select-bk-color);
    color: var(--patient-task-select-color);
    font-family: var(--font-family);
    font-weight: 200;
    -webkit-appearance: menulist-button;  
    -moz-appearance:none;    
    border: 0;
}

@media screen and (max-width: 1023px) {

    DIV.PATIENT_TASK, DIV.PRINT_BOX, DIV.SELECT_BOX, SELECT.SELECT_BOX {
        max-width: 400px;
    }
}

/* --------------------------------------------------- */
/* Folders */

DIV.FOLDERS 
{
    border-radius: 10px;
    background-color: var(--folder-bk-color-2);
}

DIV.FOLDERS_TITLE 
{
    border-radius: 10px;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 0;
    background-color: var(--folder-bk-color-2);
}

DIV.FOLDER_TITLE_VISIBLE 
{
    font-size: 110%;
    font-weight: 400;
	border: 0;
	padding-top: 12px;
	padding-bottom: 23px;	
    padding-left: 20px;
	padding-right: 20px;
	margin-right: 3px;
	margin-left: 3px;
    background-color: var(--folder-border-color);
    border-color: var(--folder-border-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: white;
}

DIV.FOLDER_TITLE_HIDDEN 
{
    font-size: 90%;
	border: 0;
	padding-top: 12px;
	padding-bottom: 17px;	
    padding-left: 17px;
	padding-right: 17px;
	margin-top: 6px;
	margin-right: 0.5px;
	margin-left: 0.5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

DIV.SUPER_FOLDER, DIV.FOLDER, DIV.FOLDER-ROUND {

	background-color: var(--folder-bk-color);
    border-color: var(--folder-border-color);
    border: 2px solid var(--folder-border-color);
    border-top: 8px solid var(--folder-border-color);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

DIV.SUPER_FOLDER {
    border-radius: 8px;
    padding-left: 3px;
    padding-right: 8px;
    padding-bottom: 3px;
    width: calc(100% - 16px);
}

DIV.SUPER_FOLDER DIV.FOLDERS_TITLE {
    padding-top: 5px;
}

DIV.FOLDER, DIV.FOLDER-ROUND {
    padding: 20px;
}

DIV.FOLDER_CONTENT {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

DIV.FOLDER_CONTENT DIV.REPORT_FORMWRAPPER {
    background-color: transparent;
}


/* --------------------------------------------------- */
/* Post-it */
div.POSTIT_WHITEBOARD {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

div.POSTIT_CONTAINER {

    background-color: transparent;
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
}

div.POSTIT, div.POSTIT_MED, div.POSTIT_SMALL {
    display: inline-block;
    vertical-align: top; /* <-- ajout important */
    border: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #414246;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
    /*box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;*/
}

div.POSTIT {
    width: var(--post-it-width);
    height: var(--post-it-height);
    border-radius: var(--post-it-corner-radius-large); 
}

div.POSTIT_MED {
    width: var(--post-it-width-medium);
    height: var(--post-it-height-medium);    
    border-radius: var(--post-it-corner-radius-medium);
}

div.POSTIT_SMALL {
    width: var(--post-it-width-small);
    height: var(--post-it-height-small);
    border-radius: var(--post-it-corner-radius-small);
}

div.POSTIT.POSTIT_FREE_HEIGHT {
    min-height: var(--post-it-height);
    height: auto;
}

div.POSTIT_MED.POSTIT_FREE_HEIGHT {
    min-height: var(--post-it-height-medium);
    height: auto;
}

div.POSTIT_SMALL.POSTIT_FREE_HEIGHT {
    min-height: var(--post-it-height-small);
    height: auto;
}
div.POSTIT_TITLE {
    display: block;
    float: left;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;

    /* To compute title color
    background-color: #414246;
    opacity: 0.15;  */
}

div.POSTIT div.POSTIT_TITLE {
    border-top-left-radius: var(--post-it-corner-radius-large); 
    border-top-right-radius: var(--post-it-corner-radius-large); 
}
div.POSTIT_MED div.POSTIT_TITLE {
    border-top-left-radius: var(--post-it-corner-radius-medium); 
    border-top-right-radius: var(--post-it-corner-radius-medium); 
}
div.POSTIT_SMALL div.POSTIT_TITLE {
    border-top-left-radius: var(--post-it-corner-radius-small); 
    border-top-right-radius: var(--post-it-corner-radius-small); 
}

div.POSTIT:not(.POSTIT_FREE_HEIGHT) div.POSTIT_TITLE {
    height: var(--post-it-title-height);
}

div.POSTIT_MED:not(.POSTIT_FREE_HEIGHT) div.POSTIT_TITLE {
    height: var(--post-it-title-height-medium);
}

div.POSTIT_SMALL:not(.POSTIT_FREE_HEIGHT) div.POSTIT_TITLE {
    height: var(--post-it-title-height-small);
}

div.POSTIT_CONTENT {
    display: block;
    float: left;
    width: 100%;
    overflow: hidden;
}

div.POSTIT:not(.POSTIT_FREE_HEIGHT) div.POSTIT_CONTENT {
    height: calc(var(--post-it-height) - var(--post-it-title-height));
}

div.POSTIT_MED:not(.POSTIT_FREE_HEIGHT) div.POSTIT_CONTENT {
    height: calc(var(--post-it-height-medium) - var(--post-it-title-height-medium));
}

div.POSTIT_SMALL:not(.POSTIT_FREE_HEIGHT) div.POSTIT_CONTENT {
    height: calc(var(--post-it-height-small) - var(--post-it-title-height-small));
}

div.POSTIT_Y {
    background-color: #F7EDAA;
}

div.POSTIT_O {
    background-color: #F8DF95;
}

div.POSTIT_R {
    background-color: #FFB2B2;
}

div.POSTIT_B {
    background-color: #C0DAF0; /*#BFEBFF;*/
}

div.POSTIT_G {
    background-color: #D4ED8E;
}

div.POSTIT_W {
    background-color: white;
}

div.POSTIT_P {
    background-color: #FFD2FF;
}

div.POSTIT_Y div.POSTIT_TITLE {
    background-color: #DFDBAB;
}

div.POSTIT_O div.POSTIT_TITLE {
    background-color: #D8C790;
}

div.POSTIT_R div.POSTIT_TITLE {
    background-color: #D8A3A3;
}

div.POSTIT_B div.POSTIT_TITLE {
   background-color: #8AB1D0; /* #B3D0DF; */
}

div.POSTIT_G div.POSTIT_TITLE {
    background-color: #C2D18B;
}

div.POSTIT_W div.POSTIT_TITLE {
    background-color: #D0CECC;
}

div.POSTIT_P div.POSTIT_TITLE {
    background-color: #DCBDDF;
}

div.POSTIT_TITLE_IMG {
    display: block;
    float: left;
    width: var(--post-it-img-size);
    height: var(--post-it-img-size);
    padding-right: 3px;
    padding-left: 3px;
}

div.POSTIT div.POSTIT_TITLE_IMG {
    padding-top: 5px;
}

div.POSTIT_MED div.POSTIT_TITLE_IMG {
    padding-top: 3px;
}

div.POSTIT_SMALL div.POSTIT_TITLE_IMG {
    padding-top: 1px;
}

div.POSTIT_TITLE_TEXT {
    display: block;
    float: left;
    width: calc(var(--post-it-width) - 2 * var(--post-it-img-size) - 12px - 2px);
    margin: 0;
    padding: 0;
    padding-left: 2px;
}

div.POSTIT div.POSTIT_TITLE_TEXT {
    width: calc(var(--post-it-width) - 2 * var(--post-it-img-size) - 12px - 2px);
    padding-top: 6px;
}

div.POSTIT_MED div.POSTIT_TITLE_TEXT {
    width: calc(var(--post-it-width-medium) - 2 * var(--post-it-img-size) - 12px - 2px);
    padding-top: 6px;
    font-size: 85%;
}

div.POSTIT_SMALL div.POSTIT_TITLE_TEXT {
    width: calc(var(--post-it-width-small) - 2 * var(--post-it-img-size) - 12px - 2px);
    padding-top: 7px;
    font-size: 65%;
}

div.POSTIT_FREE_HEIGHT div.POSTIT_TITLE {
    padding-bottom: 2px;
}

div.POSTIT_FREE_HEIGHT div.POSTIT_TITLE_TEXT {
    font-weight: 400;
    font-size: 110%;
    padding-top: 2px;
    padding-bottom: 7px;
    padding-left: 5px;
}

div.POSTIT_FREE_HEIGHT div.POSTIT_TITLE_IMG {

    padding-top: 2px;
    padding-right: 0;
}

div.POSTIT_TITLE_IMG IMG {
    margin: auto;
    padding: 0;
}

div.POSTIT_TITLE_TEXT P, div.POSTIT_CONTENT_TEXT P {
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

div.POSTIT_CONTENT_TEXT {
    float: left;
    padding-left: 5px;
    padding-top: 5px;
    margin: 0;
}

div.POSTIT_CONTENT_TEXT H3 {
    font-size: 110%;
	margin-top: 0;
	margin-bottom: 0;
    line-height: 1em;
}

div.POSTIT:not(.POSTIT_FREE_HEIGHT) div.POSTIT_CONTENT_TEXT {
    width: calc(var(--post-it-width) - 10px);
    height: calc(var(--post-it-height) - var(--post-it-title-height) - 10px);
}

div.POSTIT_MED:not(.POSTIT_FREE_HEIGHT) div.POSTIT_CONTENT_TEXT {
    width: calc(var(--post-it-width-medium) - 10px);
    height: calc(var(--post-it-height-medium) - var(--post-it-title-height-medium) - 10px);
    font-size: 85%;
}

div.POSTIT_SMALL:not(.POSTIT_FREE_HEIGHT) div.POSTIT_CONTENT_TEXT {
    width: calc(var(--post-it-width-small) - 10px);
    height: calc(var(--post-it-height-small) - var(--post-it-title-height-small) - 10px);
    font-size: 65%;
}

/* Tooltip container */
div.TOOLTIP {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    color: var(--menu-hover-color);
}
  
  /* Tooltip text */
div.TOOLTIP span.TOOLTIPTEXT {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
div.TOOLTIP:hover span.TOOLTIPTEXT {
    visibility: visible;
}

div.TOOLTIP span.TOOLTIPTEXT::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

TABLE.POSTIT, DIV.POSTIT_CONTAINER TABLE {
    border: 0.5px solid #414246;
    border-radius: 10px;
    width: 100%;
}

DIV.POSTIT_CONTAINER TABLE H3 {
    margin-top: 1em;
}

DIV.POSTIT_CONTAINER TABLE UL {
    margin-top: 0;
    margin-bottom: 0;
}


/* --------------------------------------------------- */
/* Before / after pictures */
div.DOCUMENT_PICS_FRAME 
{

    display: block;
    float: left;
    width: 14vw;
    height: 18vw;
    border: solid 1px #414246;
    background-color: white;
    margin-right: 1vw;
    margin-bottom: 2vw;
}

div.DOCUMENT_FILENAME_FRAME
{
    width: 14vw;
    height: 4vw;
    overflow-x: hidden;
    overflow-y: hidden;
    overflow-wrap: break-word;
    display: block;
    background-color: #414246;
    color: white;
    font-size: 1vw;
    text-align: center;
}

img.DOCUMENT_PICS {

    margin: auto;
    width: 14vw;
    height: 14vw;
    overflow: hidden;
    display: block;
}

/* --------------------------------------------------- */
/* Survey */
p.question_subtitle {
    margin: 0;
    padding: 0;
    padding-top: 20px;
    font-style: bold;
}

p.question {
    margin: 0;
    padding: 0;
    padding-top: 10px;
    font-style: italic;
}

p.answer {
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------- */
/* Pin pads */
FORM.PINPAD {
    width: 510px;
    margin: 50px auto;
    background: var(--pin-pad-bk-color);
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

INPUT.PINPAD {
    padding: 10 40px;
    border-radius: 5px;
    width: 450px;
    margin: auto;
    border: 1px solid rgb(228, 220, 220);
    outline: none; 
    font-size: 48px;
    text-shadow: 0 0 0 rgb(71, 71, 71);
    text-align: center;
}

INPUT.PINPAD:focus {
    outline: none;
}

FORM.PWD {
    width: 610px;
    margin: 50px auto;
    background: #fff;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

INPUT.PWD {
    padding: 10 40px;
    border-radius: 5px;
    width: 550px;
    margin: auto;
    border: 1px solid rgb(228, 220, 220);
    outline: none; 
    font-size: 18px;
    font-weight: 200;
    text-shadow: 0 0 0 rgb(71, 71, 71);
    text-align: center;
}

.pinButton {
    border: 0;
    background: none;
    font-size: 1.7em;
    border-radius: 50%;
    height: 100px;
    font-weight: 550;
    width: 100px;
    color: transparent;
    text-shadow: 0 0 0 rgb(102, 101, 101);
    margin: 7px 20px;
}

.pwdSubmit {
    border: 1px;
    border-color: #414246;
    color: #414141;
    background: #eae7e4;
    font-size: 1.2em;
    border-radius: 10px;
    height: 50px;
    width: 200px;
    text-shadow: 0 0 0 rgb(102, 101, 101);
    margin: 7px 7px;
}

LABEL.PWD {
    background: none;
    font-size: 1em;
    width: 200px;
    margin: 20px;
}


.clear, .enter {
    font-size: 1em !important;
}

.pinButton:active {
    background: #ea148c;
    color: #fff;
}

.clear:active {
    background: #ea148c;
    color: #fff;
}

.enter:active {
    background: #ea148c;
    color: #fff;
}

.pinButton:hover {
    background: #414246;
    color: #fff;
}

.clear:hover {
    background: #414246;
    color: #fff;
}

.enter:hover {
    background: #414246;
    color: #fff;
}

.pwdSubmit:hover {
    background: #ea148c;
    color: #fff;
}


@media screen and (max-width: 767px) {

    FORM.PINPAD {
        width: 250px;
        margin: 25px auto;
        padding: 18px 13px;
    }

    INPUT.PINPAD {
        padding: 5 20px;
        width: 225px;
        font-size: 24px;
    }

    FORM.PWD {
        width: 300px;
        margin: 25px auto;
        padding: 18px 13px;
    }
    
    INPUT.PWD {
        padding: 5 20px;
        width: 225px;
        font-size: 16px;
    }

    LABEL.PWD {
        width: 150px;
        margin: 10px;
        font-size: 16px;
    }

}


/* --------------------------------------------------- */
/* Modifications to avoid that pages can be printed or copied */

div.PAGECONTENT
{
	-webkit-user-select: none; /* Avoid copy: Safari */
  	-ms-user-select: none; /* Avoid copy: IE 10 and IE 11 */
  	user-select: none; /* Avoid copy:Standard syntax */
}


@media print {

	DIV.PAGEWRAPPER {
		display: none;
		visibility: hidden;
	}
}

/* --------------------------------------------------- */
/* Chat */
.chat-container {
    all: unset;
    display: block;
    width: calc(100%-30px);
    background-color: var(--chat-bk-color);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin: 0;
    overflow-y: auto;
    height: 80%;
}

.message {
    display: flex;
    flex-direction: column;
}

.received {
    margin-bottom: 10px;
    align-self: flex-start;
    color: var(--chat-received-color);
    background-color: var(--chat-received-bk-color);
    border-radius: 10px 10px 10px 0;
    padding: 10px;
    max-width: 80%;
}

.sent {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    color: var(--chat-sent-color);
    background-color: var(--chat-sent-bk-color);
    border-radius: 10px 10px 0 10px;
    padding: 10px;
    max-width: 80%;
}

.system {
    margin-bottom: 10px;
    align-self: flex-start;
    color: var(--chat-system-color);
    background-color: var(--chat-system-bk-color);
    border-radius: 10px 10px 10px 0;
    padding: 10px;
    max-width: 80%;
}


.timestamp {
    font-size: 0.8em;
    color: #666;
    align-self: flex-end;
}

.message-form {
    display: flex;
    border-bottom: 1px solid white;
    padding: 10px;
    margin: 0;
    background-color: var(--chat-form-bk-color);
    border-radius: 10px 10px 0 0;
}

.message-input {
    flex-grow: 1;
    border: none;
    border-radius: 20px;
    padding: 10px;
    font-size: 1em;
    outline: none;
    margin-right: 10px;
    resize: none;
    height: auto;
    min-height: 40px;
    max-height: 50vh;
    overflow-y: auto;
}

.send-button {
    background-color: var(--chat-button-bk-color);
    color: white;
    border: none;
    padding: 7px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    outline: none;
    height: 40px;
}

.send-button:hover {
    background-color: var(--chat-button-hover-bk-color);
    color: var(--chat-button-bk-color);
}

.loading-spinner {
    display: none;
    border: 4px solid white;
    border-top: 4px solid var(--chat-button-bk-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --------------------------------------------------- */
/* Info box */
.info-box-container {
    width: 100%;
    display: flex;
    justify-content: center;
}
  
.info-box {
    width: 50%;
    min-width: 300px;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: white;
}
  
.info-box img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

.info-box-content {
    margin: 0 auto;
    text-align: center;
}
  
.info-box.success {
    background-color: var(--green-bk);
}
  
.info-box.error {
    background-color: var(--red-bk);
}


/* --------------------------------------------------- */
/* Confirmation box */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}
.confirmationBox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    border-radius: 8px;
    text-align: center;
}

.confirmationMsg {
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px;
}

/* --------------------------------------------------- */
/* Formatting - diverses */
.float-right {
    float:right;
}
.float-left {
    float:left;
}
.bk-transparent {
    background-color:transparent;
}
.display-block {
    display: block;
}
.display-none {
    display: none;
}
.display-inline-block {
    display: inline-block;
}
.display-flex {
    display: flex;
}
.align-items-center {
    align-items: center;
}
.txt-right {
    text-align: right;
}
.txt-left {
    text-align: left;
}
.txt-center {
    text-align: center;
}
.margin-0 {
    margin: 0; 
}
.margin-left-0 {
    margin-left: 0px;
}
.margin-left-5 {
    margin-left: 5px;
}
.margin-top-10 {
    margin-top: 10px;
}
.margin-bottom-10 {
    margin-bottom: 10px;
}
.padding-0 {
    padding: 0;
}
.padding-top-2 {
    padding-top: 2px;
}
.padding-top-10 {
    padding-top: 10px;
}
.padding-bottom-10 {
    padding-bottom: 10px;
}
.padding-left-2 {
    padding-left:2px;
}
.padding-left-5 {
    padding-left:5px;
}
.color-red {
    color: var(--red);
}
.color-magenta {
    color: #ea148c;
}
.color-green {
    color: var(--green);
}
.width-100 {
    width: 100%;
}
.width-12 {
    width: 12%;
}
.width-81 {
    width: 81%;
}
.font-size-24 {
    font-size: 24pt;
}
.font-size-100pc {
    font-size: 100%;
}
.font-size-90pc {
    font-size: 90%;
}
.container-center {
  display: flex;
  justify-content: center;
  align-items: center;
}