html {
    overflow-y: scroll;
  }


body {
    font-family: Arial, sans-serif;
    background-color: rgba(256, 256, 256, 1.0);
    color: black;
    margin: 0px;
}

.login_imageContainer {
    display: flex;
    max-width: 500px;
	width: calc(100% - 20px);
    flex-direction: column; 
    background-color: var(--lightGrey);
    border-radius: 15px;
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
    box-sizing: border-box; /* Include padding and border in the width calculation */
    margin-left: auto; /* Center the container horizontally */
    margin-right: auto; /* Center the container horizontally */
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow: var(--grey-boxShadow);
}

.expandable {
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

    background-color: transparent; /*var(--lightGrey);*/
    box-shadow: var(--grey-boxShadow); /*var(--grey-boxShadow);*/

    border-radius: 15px;
    font-size: 12px;
}
.expandable-content {
    display: none;
    padding: 10px;
}

.expandable-header {
    cursor: pointer;
    padding: 10px;
    
    color: black;
    background-color: white;
    font-weight: bold;
    
    max-width: 500px; /* Set maximum width */
    width: 100%; /* Make it take up 100% of the available width */
    box-sizing: border-box; /* Ensure padding and border are included in the width calculation */

}

.expandable-header:hover {
    background-color: transparent;
}

.expandable-header::after {
    content: '+';
    font-size: 16px;
    float: right;
    color: var(--lightBlue);
}

.expandable-header.expanded::after {
    content: '-';
}


:root{
    --black: rgb(0,0,0);
    --grey: rgb(180, 180, 180);
    --lightGrey: rgb(245, 245, 245);
    --veryLightGreen: rgba(122, 181, 33, 0.6);
    --lightGreen: rgb(121, 181, 33);
    --green: rgb(33, 153, 47);
    --veryLightBlue: rgba(17, 184, 229, 0.6);
    --lightBlue: rgb(17, 184, 229);
    --blue: rgb(23, 66, 197);
    --veryLightOrange: rgb(255, 241, 35);
    --lightOrange: rgb(250, 198, 36);
    --orange: rgb(242, 155, 37);
    --lightRed: rgb(241, 89, 39);
    --red: rgb(193, 40, 45);
    --lightPurple: rgb(102, 46, 145);
    --purple: rgb(27, 20, 100);
    
    /*--grey-boxShadow: 0 0 10px rgba(180, 180, 180, 0.6);*/
    --grey-boxShadow: 0 0 5px rgba(180, 180, 180, 0.6);
    --lightGreen-boxShadow: 0 0 10px rgba(121, 181, 33, 0.6);
    --green-boxShadow: 0 0 10px rgba(33, 153, 47, 0.6);
    --lightBlue-boxShadow: 0 0 10px rgba(17, 184, 229, 0.6);
    --blue-boxShadow: 0 0 10px rgba(23, 66, 197, 0.6);
    --lightOrange-boxShadow: 0 0 10px rgba(250, 198, 36, 0.6);
    --orange-boxShadow: 0 0 10px rgba(242, 155, 37, 0.6);
    --lightRed-boxShadow: 0 0 10px rgba(241, 89, 39, 0.6);
    --red-boxShadow: 0 0 10px rgba(193, 40, 45, 0.6);
    --lightPurple-boxShadow: 0 0 10px rgba(102, 46, 145, 0.6);
    --purple-boxShadow: 0 0 10px rgba(27, 20, 100, 0.6); 
}

p {
    line-height: 1.2em; /* Set line height for paragraphs */
}

p + p {
    margin-top: 2.2em; /* Add extra space between paragraphs */
}

/* ******************************************** 
---------- Login Elements ---------- */


.dataInputLabel{
    display: block;
    margin-bottom: 8px;
    margin-top: 8px;
    font-size: 12px;
    width: 200px;
}

.dataInput{
    width: 100%;
    padding: 8px;
    margin: 10px;
    box-sizing: border-box;
    border-radius: 15px;
    border: none;
    line-height: 2;
}

.dataInput:focus {
    /* Add your styles for when the input is selected (focused) */
    border: 0; /* For example, changing border color */
    outline: none; /* Remove default focus outline if desired */
    box-shadow: var(--lightBlue-boxShadow); /* Adding a box shadow for focus effect */
}

.smallDataInput{
    max-width: 50px;
    padding: 8px;
    margin: 10px;
    box-sizing: border-box;
    border-radius: 15px;
    border: none;
    line-height: 2;
    text-align: center;
}

.smallDataInput:focus {
    /* Add your styles for when the input is selected (focused) */
    border: 0; /* For example, changing border color */
    outline: none; /* Remove default focus outline if desired */
    box-shadow: var(--lightBlue-boxShadow); /* Adding a box shadow for focus effect */
}

.checkBox {
    cursor: pointer;
    box-sizing: border-box;
    margin: 10px;
    padding: initial;
    display: inline-block;
    width: 20px;
    height: 20px;
    box-shadow: var(--grey-boxShadow);
    background-color: var(--grey);
    border-radius: 5px;
}

.timeInput{
    margin: 10px;
}

.loginButton{
    width: 100%;
    
    background-image: url('/assets/images/rowWithButton_BG.png'); /* URL of your JPG image */
    background-size: cover; /* Stretch the image to cover the entire div */
    background-repeat: no-repeat; /* Prevent image repetition */
    background-position: center center; /* Center the image horizontally and vertically */
    box-shadow: var(--lightBlue-boxShadow);
    
    border-radius: 15px;
    padding: 14px;
    color: white;
    
    padding: 10px;
    
    cursor: pointer;

    border: none;
}

#loginMessage{
    max-width: 500px;
	width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    box-sizing: border-box;
    
    background-color: var(--lightGrey);
    box-shadow: var(--grey-boxShadow);
    border-radius: 15px;
    padding: 15px;
    
    text-align: center;
    text-justify: auto;

    font: black;
    font-size: 16px;
}

button {
    border-radius: 16px;
    background-color: #8CC63E;
    color: #fff;
    padding: 10px;
    border: none;
    cursor: pointer;
}


/* ******************************************** 
---------- PAGE HEADER --------------------- */     
.verticalRow{
    display: flex;
    align-items: center;
	
	max-width: 500px;
	width: calc(100% - 20px);
	
    padding: 0px;
    margin-left: auto; /* Center the container horizontally */
    margin-right: auto; /* Center the container horizontally */

    justify-content: flex-start;
}

.quickNavigationCharts {
    /* Dimensions */
    width: auto;
    max-width: 60px;
    height: auto;
    aspect-ratio: 1 / 1;

    /* Border */
    border-radius: 10px;
    border: 2px solid var(--lightGrey);

    /* Positioning */
    position: absolute;
    top: -15px;
    left: calc(50% + 45px);

    /* Display */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Text */
    color: var(--orange);
    font-size: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.quickNavigationXP {
    width: 60px;
    height: 60px;
    border-radius: 15px;

    position: absolute;
    top: -15px;
    left: calc(50% - 20px); /* Adjust based on box width */

    box-shadow: var(--grey-boxShadow);

    display: flex;
    justify-content: center;
    align-items: flex-end;

    color: white;
    font-size: 10px;
    padding-bottom: 10px;
}

.quickNavigationProtocol { /*Currently not in use (2024.05.29)*/
    width: 60px;
    height: 40px;
    border-radius: 15px;

    position: absolute;
    top: -15px;
    left: calc(50% - 20px); /* Adjust based on box width */

    box-shadow: var(--lightGreen-boxShadow);
    background-image: url('/assets/images/quickNavigationGreen_BG.png'); /* URL of your JPG image */
    background-size: cover; /* Stretch the image to cover the entire div */
    background-repeat: no-repeat; /* Prevent image repetition */
    background-position: center center; /* Center the image horizontally and vertically */

    display: flex;
    justify-content: center;
    align-items: flex-end;

    color: white;
    font-size: 12px;
    padding-bottom: 10px;
}


.messageContainer{
    display: flex;
    align-items: center;
}


.imageField_Large{
    flex: 0 0 25%;
    margin: 15px;
}

.imageField_Small{
    flex: 0 0 10%;
    margin: 5px;
}

.imageField_pageHead{
    /*flex: 0 0 10%;*/
    margin: 2px;
    height: 65px;
}

.imageField_DailyMessageFloatLeft{
    float: left; /* Float the image to the left */
    margin-right: 12px; /* Add some margin to separate image from text */
    margin-bottom: 0.5em;
    width: auto; /* Allow the width to adjust according to the content */
    max-width: 20%; /* Set maximum width to 20% */
    min-width: 20px; /* Set minimum width to 20px */
    height: auto; /* Allow the height to adjust according to the content */
    border-radius: 5px;
    box-shadow: var(--lightGreen-boxShadow);
}

.goals_imageField{
    float: left; /* Float the image to the left */
    margin: 10px; /* Add some margin to separate image from text */
    width: auto; /* Allow the width to adjust according to the content */
    max-width: 20%; /* Set maximum width to 20% */
    min-width: 20px; /* Set minimum width to 20px */
    height: auto; /* Allow the height to adjust according to the content */
    border-radius: 5px;
    /* box-shadow: var(--grey-boxShadow);*/
}

.imageField_DailyMessageFloatRight{
    float: right; /* Float the image to the left */
    margin-left: 12px; /* Add some margin to separate image from text */
    margin-bottom: 0.5em;
    width: auto; /* Allow the width to adjust according to the content */
    max-width: 20%; /* Set maximum width to 20% */
    min-width: 20px; /* Set minimum width to 20px */
    height: auto; /* Allow the height to adjust according to the content */
    border-radius: 5px;
    box-shadow: var(--lightGreen-boxShadow);
}

.imageField_fullWidth{
    margin: 15px auto; /* Set top and bottom margin to 15px, and horizontal margin to auto */
    max-width: 80%;
    width: auto;
    height: auto; /* Allow the height to adjust according to the content */
    display: block; /* Ensure the image is displayed as a block element */
}


.imageField_Large img{
    max-width: 100%;
    max-height: 100%;
}

.imageField_Small img{
    max-width: 100%;
    max-height: 100%;
}

.imageField_pageHead img{
    max-width: 100%;
    max-height: 100%;
}

.image_XPLevel{
    width: 100%;
    border-radius: 5px;
    box-shadow: var(--grey-boxShadow);
}

.image_XPLevel_small{
    border-radius: 10px;
    width: 45px;
    height: 45px;
    /*margin-bottom: 5px;*/
}

.XPLevelText{
    position: absolute;
    bottom: 10px; 
    text-align: center;
    width:100%;
    background-color: rgba(256, 256, 256, 0.95);
    line-height: 1.0;
    padding: 5px;
    box-sizing: border-box;
}

.quickNavigationTitle{
    position: absolute;
    bottom: 2px; 
    text-align: center;
    width:100%;
    /*background-color: rgba(256, 256, 256, 0.8);*/
    line-height: 1.0;
    padding: 1px;
    box-sizing: border-box;
    color: var(--blue);
    border-radius: 15px;
}

#xp_level_chart{
    position: relative;
    max-width: 50%;
    margin-right: 5px;
}

.header{
    flex: 0 1 auto;
    line-height: 1;
    font-family: Trebuchet MS,Helvetica,sans-serif;
    letter-spacing: 0.05em;
    font-size: 12px;
}

.header span{
    margin-right:0;
}

.fillSpace {
    flex: 1 1 auto; /* Flex grow, flex shrink, flex basis */
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align content to the end */
}

.message{
    flex: 1; 
    margin: 10px;
    padding: 10px;
}

.hidden {
    display: none;
}

/* ******************************************** 
---------- DATEPICKER  ---------------------- */
.pageHeader {
    display: flex;
    flex-direction: row;
    max-width: 450px;
    margin: 0 auto;
    background: transparent;
    border: none;
    border-radius: 0px;
}

.datePickerRow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* Add this line */
}

.datePickerLabel {
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-right: 5px;
    margin-left: 15px;
    color: black;
    white-space: nowrap;
}

#datepicker {
    font-family: Arial, sans-serif;
    font-size: 14px;
    background: transparent;
    color: black;
    border: none;
    padding: 5px;
    margin: 5px;
    width: fit-content;
    border-radius: 5px;
}

/*input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    display: block;
    background: url('Icon_DatePicker.png') no-repeat left center;
    background-size: 12px;
    width: 20px;
    height: 20px;
    font-family: Arial, sans-serif;
}*/


/* ************************************************* 
---------- timetablecontainer Elements ---------- */
.mainPageContent{ 
    max-width: 500px;
	width: calc(100% - 0px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px; /* new */
    margin-bottom: 20px; /* new */
    box-sizing: border-box;

    padding: 0px;    

    overflow: hidden; /* new */
    position: relative;
}

.chartContainer {
    display: flex;
    max-width: 500px;
	width: calc(100% - 20px);
    flex-direction: column; 
    background-color: var(--lightGrey);
    border-radius: 15px;
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
    box-sizing: border-box; /* Include padding and border in the width calculation */
    margin-left: auto; /* Center the container horizontally */
    margin-right: auto; /* Center the container horizontally */
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow: var(--grey-boxShadow);
}

.chartTitle{
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

.timetablecontainer {  /*to be migrated to protocol-table.css .protocolTable*/
    display: flex;
    flex-direction: column;
    /*background-color: var(--lightGrey); */
    background-color: rgb(250,250,250);
    border-radius: 15px;
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
    box-sizing: border-box;
    margin-top: 0px;
    margin-bottom: 0px;
    box-shadow: var(--grey-boxShadow);
}

.timeTableTitleRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.timeTableZone{
    flex: 1;
    margin-left: 5px;
}

.timeTableTime{
    font-size: 10px;
    margin: 0;
}

.timetableblock{
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    background: transparent;
}

.timetabletimeofdaycolumn {
    display: flex;
    flex-direction: column;
    width: 40px;
    padding-top: 17px;
    box-sizing:border-box;
    color: #FFFFFF;
    align-items: center;
}

.timetableroutinecolumn {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.routinerow{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    min-height: 45px;
    padding: 2px 10px 2px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    box-sizing:border-box;
    border-radius: 16px;
    background-image: url('/assets/images/routinerow_BG.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: black;
    font-size: 12px;
    align-content: center;
    align-items: center;
    line-height: 12px;
    vertical-align: middle;
    box-shadow: var(--grey-boxShadow);
}

.routinerow_ghost {
    width: 100%;
    height: 45px;
    margin-top: 5px;
    margin-bottom: 5px;
    box-sizing:border-box;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: var(--grey-boxShadow);
}

.routinerow_placeholder_narrow{
    width: 100%;
    height: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    box-sizing:border-box;
    border-radius: 16px;
    background: transparent;
}


.routinerow_checked{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    min-height: 45px;
    padding: 2px 10px 2px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    box-sizing:border-box;
    border-radius: 16px;
    background-image: url('/assets/images/routinerow_checked_BG.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* background-color: rgba(140, 198, 62, 0.2);/*#8CC63E;*/
    color: black;
    font-size: 12px;
    align-content: center;
    align-items: center;
    line-height: 12px;
    vertical-align: middle;
    box-shadow: var(--grey-boxShadow);
}

.goals_routinerow{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    height: 100px;
    padding: 2px 10px 2px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    box-sizing:border-box;
    border-radius: 16px;
    background-image: url('/assets/images/routinerow_BG.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: black;
    font-size: 12px;
    align-content: center;
    align-items: center;
    line-height: 12px;
    vertical-align: middle;
    box-shadow: var(--grey-boxShadow);
}

.routinename {
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    line-height: 17px;
}

.routinename_checked {
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    line-height: 17px;
}

.progressiontext {
    flex: 1;
    font-size:10px;
    font-weight: normal;
}

.boxNarrowBold {
    flex: 0 0 25%;
    max-width: 25%;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    padding: 5px;
    line-height: 14px;
}

.boxNarrowBold_checked {
    flex: 0 0 25%;
    max-width: 25%;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    padding: 5px;
    line-height: 14px;
}

.boxNormalText {
    flex: 1;
    font-size:12px;
    font-weight: normal;
    padding: 5px;
}

.progressionid{
   width: 20px;
   height: 20px;
   line-height: 20px;
   border-radius: 10px;
   background-color: rgba(16, 134, 229, 0.1);
   padding: 5px;
   margin-left: 5px;
   margin-right: 5px;
   text-align: center;
   font-size: 16px;
   color: black;
   font-weight: bold;
}

.frequency_container{
    width: 30px;
    margin-right: 5px;
    display: flex;
    flex-direction: row;
}

.routinerow_frequency{
    /*width: 20px;*/
    /*height: 20px;*/
    line-height: 20px;
    background-color: transparent;
    padding: 0px;
    margin: 0px;
    text-align: center;
    font-size: 12px;
    color: black;
    font-weight: normal;
 }

 .routinerow_frequency_fulfilled{
    /*width: 20px;*/
    /*height: 20px;*/
    line-height: 20px;
    background-color: transparent;
    padding: 0px;
    margin: 0px;
    text-align: center;
    font-size: 12px;
    color: black;
    font-weight: normal;
 }

 .frequency_dot{
    /*width: 16px;*/
    height: 20px;
    line-height: 20px;
    background-color: transparent;
    padding: 0px;
    margin: 0;
    text-align: center;
    font-size: 16px;
    color: transparent;
    font-weight: normal;
 }

 .frequency_dot_fulfilled{
    /*width: 16px;*/
    height: 20px;
    line-height: 20px;
    background-color: transparent;
    padding: 0px;
    margin: 0;
    text-align: center;
    font-size: 16px;
    color: var(--lightGreen);
    font-weight: normal;
 }


.progressionid_checked{
   width: 20px;
   height: 20px;
   line-height: 20px;
   border-radius: 10px;
   background-color: white;
   font-size: 10px;
   padding: 5px;
   margin-left: 5px;
   margin-right: 5px;
   text-align: center;
   font-size: 16px;
   color: black; /*#8CC63E;*/
   font-weight: bold;
}

.progressionExplanation {
    display: flex; 
    overflow: hidden; /* Hide overflow */
    max-width: 100%;
    white-space: normal;
    word-wrap: normal;
    font-size: 10px;
    color: black;
    margin: 0;
    align-content: left;  
}

.spacer{
    height:0px;
}

.group-spacer{
    height: 0px;
    width: 100%;
    position: relative;
}

.group-spacer-text {
    height: 20px;
    width: 40px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translate(-50%, -50%);
    background: rgba(120, 120, 120, 0.6);
    color: white;
    box-shadow: var(--grey-boxShadow);
    text-align: center;
    line-height: 20px; /* Set line-height equal to the height for vertical centering */
}


/*.sortableSegment{
    position: relative;
    padding: 0 0 20px 0;
}

.sortableSegmentTitle{ to be migrated to protocol-table.css .protocolTable__sortableSegmentTitle
    position: relative;
    height: 40px;
    line-height: 40px;
}*/

/* ************************************************* 
---------- General purpose overlay WINDOW ---------- */
.overlayWindow{
    display: none; /* Initially hidden */
    max-width: 500px; /* Maximum width */
    width: 100%;
    box-sizing: border-box;
    min-width: 350px;
    min-height: 50px;
    height: auto; /* Auto height */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--lightGrey);
    box-shadow: var(--grey-boxShadow);
    overflow: hidden;
    font-size: 10px;
    border-radius: 16px;
    padding: 15px;
    color: black;
}

.overlayTitle{
    flex: 1;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    color: black;
    overflow: hidden;
    text-align: center;  
}

.overlayContent{
    width: 100%;
}

.overlayTableContent{
    width: 100%;
    margin: 10px;
}

.tableRow{
    display: table-row;
    width: 100%;
}
.tableCell{
    display: table-cell;
    border: 1px dotted white; 
    padding: 8px;
    font-size: 14px;
    color: black;   
}

.tableCellBold{
    display: table-cell;
    border: 1px dotted white; 
    padding: 8px;
    font-size: 14px;
    color: black;
    font-weight: bold; /* Use font-weight instead of font-style for boldness */
    vertical-align: middle; /* To vertically align content */
}

.timeofday{
    font-size: 10px;
    font-weight: normal;
}



/* ************************************************** 
---------- GENERAL FULL SCREEN OVERLAY ---------- */  


.messageBlock{
    max-width: 500px;
	width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;    
    box-sizing: border-box;
    
    background-color: var(--lightGrey);
    box-shadow: var(--grey-boxShadow);
    border-radius: 15px;
    padding: 15px;
    
    font-size: 16px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
    position: relative;
}

.messageBlock_transparent{
    max-width: 520px;
	width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;    
    box-sizing: border-box;
    
    background-color: transparent;
    
    padding: 15px;
    
    font-size: 16px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
    position: relative;
}

.messageBlockTitle{
    max-width: 100%;

    margin: 0px;
    padding: 10px;
    font: black;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    text-justify: auto;
    overflow: hidden;
}

.messageBlockPlainText {
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 14px;
    padding: 10px;
    line-height: 1.5em;
    font-weight: normal;
    justify-content: flex-start;
}

.rowWithButton{
    max-width: 500px;       
    box-sizing: border-box; 
    width: 100%;
    margin: 16px auto 16px auto;
    background-image: url('/assets/images/rowWithButton_BG.png'); /* URL of your JPG image */
    background-size: cover; /* Stretch the image to cover the entire div */
    background-repeat: no-repeat; /* Prevent image repetition */
    background-position: center center; /* Center the image horizontally and vertically */
    box-shadow: var(--lightBlue-boxShadow);
    border-radius: 15px;
    border: none;
    padding: 14px;
    color: white;
    font-size: 16px;
    text-align: center;
    text-justify: auto;
}

.horizontalAlignmentContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    max-width: 650px;
}

.horizontalAlignmentContainer label,
.horizontalAlignmentContainer input {
    vertical-align: middle;
}

.horizontalFlexContainer{
    display: flex;
    flex-direction: row;
}

.verticalFlexContainer{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}

.closeButton {
    /* Positioning */
    position: absolute;
    right: 5px;
    z-index: 9999;

    /* Box Model */
    height: 18px;
    width: 18px;
    border-radius: 15px;

    /* Flexbox */
    flex-shrink: 0;
    flex-grow: 0;

    /* Typography */
    font-size: 10px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    color: white;

    /* Visual Styles */
    background: var(--orange);
    box-shadow: var(--grey-boxShadow);
    opacity: 0.6;

    /* Miscellaneous */
    cursor: pointer;
}


#prevBtn, #nextBtn {
    background-color: #fff;
    color: black;
    padding: 3px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    padding: 10px;
    margin: 20px;
}

#prevBtn {
    margin-right: 10px;;
}

#nextBtn {
    margin-left: 10px;;
}

#closeBtn {
    position: absolute;

    right: 10px;
    font-size: 16px;
    cursor : pointer;
    margin-top: 3px;
    margin-bottom: 3px;
}

/* ******************************************** 
---------- ROUTINE INFOBOXES ---------- */
#infoBox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 450px;
    max-height: 80%;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 15px;
    overflow: auto; /* Enable scrolling if content exceeds the box size */
    color: white;
    font-size: 14px;
    padding: 20px;
    box-sizing: border-box; /* Include padding in the total width/height */
    z-index: 1; /* Ensure it appears above other elements */
    box-shadow: 0 0 15px #595959; /* Grey glowing effect */
}

.largeCanvas {
    flex: 1;
    max-width: 100%;
    width: auto;
    height: auto;
    max-width: 460px;
    max-height: 230px;
}

.halfWidthCanvas {
    flex: 1;
    max-width: 50%;
    width: auto;
    height: auto;
}


.horizontalNavigation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .horizontalNavigationLeftElement {
    font-size: 16px;
    margin-right: auto;
    padding-left: 5px;
    color: var(--lightBlue);
    cursor: pointer;
  }

  .horizontalNavigationCenterElement {
    font-size: 12px;
    margin: auto; 
    text-align: center;
    cursor: pointer;
    color: var(--lightBlue);
  }
  
  .horizontalNavigationRightElement {
    font-size: 16px;
    margin-left: auto;
    padding-right: 5px;
    color: var(--lightBlue);
    cursor: pointer;
  }