* {
    margin: 0;
    box-sizing: border-box;
}
/* {
 -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
*/

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}
/*
@media only screen and (hover: none) and (pointer: coarse) {

  input,
  select,
  textarea {
    font-size: 11px;
  }

  input:focus,
  select:focus,
  textarea:focus {
    font-size: 16px;
  }
}

*/

html {
    height: 100%;
    margin: 0px;
}

 body {
    min-height: 100%;
  
}


 /*2025-05-29 Tour Start*/
#tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: 1000;
}



#tour-popover.arrow-left::before {
    left: 20px;
}

#tour-popover.arrow-right::before {
    left: calc(100% - 20px);
}

#tour-popover {
    position: absolute;
    /*background-color: #f7f7ff;*/
    background-color: white;
    border: 1px solid #ddd;
    padding: 10px;
    z-index: 1001;
    border-radius: 0%;
}

    #tour-popover button {
        margin-top: 10px;
    }

.popover-above::before {
    top: -10px;
    border-color: transparent transparent #fff transparent;
}

.popover-below::before {
    bottom: -10px;
    border-color: #fff transparent transparent transparent;
}

#tour-title, #tour-text {
    color: #6383A9; /* White text color */
}

.tour-banner {
    background-color: #234465;
    /*padding: 10px;*/
    text-align: center;
    border-bottom: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
}
/*2025-05-29 Tour end*/

.HdrWelcome {
  background-color: maroon;
  color:  white;
  text-align: left;
  font-Size: 10px;
  font-weight: bold;
  font-family: Verdana, Arial, Microsoft Sans Serif;
}

.HdrVersion {
  background-color: maroon;
  color: white;
  text-align: right;
  font-Size: 10px;
  font-weight: bold;
  font-family: Verdana, Arial, Microsoft Sans Serif;
}


.TopMenuFade
{
	border-color:#6497CF;
	color: #DCE7F2;
	background-color: #6383A9;;
	filter:progid:DXImageTransform.Microsoft.Gradient
	(endColorstr=#6497CF, startColorstr=white, gradientType='0');
	font-Size: 10px;
	font-weight: bold;
	font-family: Verdana, Arial, Microsoft Sans Serif;
}


/*2024-11-11 Start*/

/*2025-05-14 added MaintenanceBlock*/
.MaintenanceBlock {
    width: 100%;
    height: 130px;
    margin: 0px auto;
    bottom: 0px;
    position: absolute;
    display: block;
    /*border: 1px solid red;*/
}

.maintenance {
    background-color: #234465;
    color: white;
    font-size: 10px;
}

.MaintenanceMsg {
    background-color: #6383A9;
    color: white;
    font-size: 10px;
    /*height: 120px; Removed 2025-05-14*/
    width: 100%;
}


.LoginHdr {
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0;
    color: #244465;
    opacity: 1;
}

#ImgAppLogo {
    width: 15%;
    background-color: transparent;

}

.AppLogoImg {
    width: 15%;
    background-color: transparent;

}


.logobg {
    background-color: #6383A9;
}

.BottomBdr {
    margin-bottom: 5px;
    border-bottom: 3px  dashed #6383A9;
    
}


.logincontactus {
    color: #6383A9;
    font-family: Verdana, Arial, Microsoft Sans Serif;
    background-color: #FAFAFB;
    font-Size: 10px;
    text-align: left;
    font-weight: normal;
    
}



.logincopyright {
    height: 100vh; /*2025-03-05: set the height so that the copyright appears in the middle vertically*/
    color: #6383A9;
    font-family: Verdana, Arial, Microsoft Sans Serif;
    background-color: #FAFAFB;
    font-Size: 10px;
    font-weight: bold;
    text-align: center;
    text-decoration: blink;
}


.LoginLbl {
    text-align: left;
    height: 10%; /*2023-11-02*/
    margin: 0px auto;
    width: 90%;
    background-color: #FAFAFB;
    color: #333333;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    
}

.LoginTxt {
    text-align: left;
    height: 8%; /*2023-11-02*/
    margin: 0px auto;
    width: 90%;
    position: relative;
}

.LoginLblRightAlgn {
    text-align: right;
    height: 10%; /*2023-11-02*/
    
    margin-top: 3px;  /*Added 2025-05-14*/
    margin-right: 17%;
    width: 90%;
    
    color: #6383A9;
    font-size: 8px;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    line-height: 10px;
}

/*2025-02-10*/
.LoginRegister {
    text-align: center;
    margin: 0px auto;
    width: 90%;
    background-color: #FAFAFB;
    color: black;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
}


/*2025-08-30 start*/
.ChgPWInput {
    height: 62%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: transparent;
}


.ChgPWLbl {
    text-align: left;
    height: 16%;
    margin: 0px auto;
    width: 90%;
    background-color: #FAFAFB;
    color: #333333;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    
}

.ChgPWTxt {
    text-align: left;
    height: 16%;
    margin: 0px auto;
    width: 90%;
    position: relative;
}

/*2025-08-30 end*/


/*2025-06 start RegUser*/

.MainRegUser {
    overflow: auto;
    height: calc(100% - 55px); /*2025-05-14*/
    width: 100%;
    top: 15px; /*2025-05-14*/
    margin: 0px auto;
    vertical-align: middle;
    text-align: center;
    display: block;
    /*border: 10px solid yellow;*/
    position: relative;
}


.RegUser {
    text-align: center;
    display: block;
    background-color: #FAFAFB;
    overflow: hidden; /*2025-07-31-2*/
    height: 80%;
    width: 90%;
    margin: 0px auto;
    border-radius: 12px 12px 12px 12px;
    /*position: relative;
    vertical-align:middle;
    margin-top: calc(20vh / 2);*/
    margin-top: 5vh;

    /*border: 10px solid red;*/
}


.RegUserBody {
    display: block;
    height: 95%;
    width: 95%;
    text-align: center;
    /*display: block table-cell;*/
    vertical-align: middle;
    margin: 10px auto;
    /*margin-top: 5px;*/ /*2024-11-20*/
    position: relative;
    top: 0px;
    /*border: 10px solid blue;*/
    overflow: auto;
}


.RegUserHdr {
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0;
    color: #244465;
    opacity: 1;
    height: 50px;
    /*border: 10px solid red;*/
}


.RegUserImg {
    background: url('../images/RegUser.png') 40% 40% no-repeat padding-box;
    width: 30%;
    /*height: 78%;*/
    float: left;
    /*border: 10px solid yellow;*/
    position: relative;
}


.RegUserInputBlock {
    height: 78%; /*2024-11-20 was 39*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: black;
    margin: 0px auto;
    float: right;
    width: 60%;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    align-content: space-around;
    text-align: left;
    position: relative;
    /*border: 10px solid lime;*/
    overflow: hidden; /*2025-07-31*/
}



.RegUserInput {
    height: 92%; /*2024-11-20 was 39*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: black;
    margin: 0px auto;
    float: right;
    width: 99%;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    /*align-content: space-around;*/
    /*align-content: unset;*/
    text-align: left;
    vertical-align: top;
    /*border: 10px solid orange;*/
    overflow: auto;
}



.RegUserLblSmall {
    margin: 0px auto;
    width: 300px; /*Must be px not % in order for the flex box to wrap*/
    background-color: #FAFAFB;
    color: black;
    letter-spacing: 0px;
    opacity: 1;
    height: auto; /*2025-07-31 40px;*/
    font-size: 12px;
    top: 0px;
    position: relative;
    text-align: left; /*2025-07-31*/
    /*border: 1px solid red;*/
    
}

.RegUserLbl {
    /*height: 14%;*/
    width: 96%; /*2025-07-30*/
    height: auto; /*2025-07-30*/
    background-color: #FAFAFB;
    color: #333333;
    letter-spacing: 0px;
    opacity: 1;
    text-align: left;
    margin: 0px auto;
    position: relative;
    /*border: 5px solid red;*/
    /*left: 5px;*/
}

.RegUserBtns {
    height: 8%;
    margin: 0px auto;
    width: 90%;
    text-align: center;
    vertical-align: middle;
    position: relative;
    margin-top: 2px; /*2025-07-31*/

}
/*
.RegUserError {
    height: 40px;
    width: 80%;
    line-height: 40px;
    text-align: center;
    bottom: 0px;
    margin: 2px auto;
    position: relative;
    border-radius: 12px 12px 12px 12px;
    vertical-align: middle;
}
*/


.RegUserMsg {
    display: block;
    height: auto;
    width: 80%;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    left: 10%;
    position: relative;
    /*border: 1px solid white;*/
}

/*2025-06 end RegUser*/


 /*2025-06-19*/

.griditem {
    color: #6383A9;
    font-family: Verdana, Arial, Microsoft Sans Serif;
    background-color: #FAFAFB;
    font-Size: 10px;
    font-weight: normal;
    text-align: center;

}


.Contact {
    text-align: center;
    display: block;
    background-color: #FAFAFB;
    overflow: auto;
    display: block;
    height: 80%;
    width: 90%;
    margin: 0px auto;
    border-radius: 12px 12px 6px 6px;
    /*position: relative;
    vertical-align:middle;
    margin-top: calc(20vh / 2);*/
    margin-top: 5vh;
}




.InputBlockLarge {
    text-align: center;
    display: block;
    background-color: #FAFAFB;
    overflow: auto;
    display: block;
    height: 80%;
    width: 90%;
    margin: 0px auto;
    border-radius: 12px 12px 6px 6px;
    /*position: relative;
    vertical-align:middle;
    margin-top: calc(20vh / 2);*/
    margin-top: 5vh;
}



.InputBodyLarge {
    height: 88%; /*2024-11-20 was 90*/
    width: 95%; /*2025 was 88*/
    text-align: center;
    /*display: block table-cell;*/
    vertical-align: middle;
    margin: 10px auto;
    /*margin-top: 5px;*/ /*2024-11-20*/
    position: relative;
    top: 0px;
}

.InputLblSmall {
    font-size: 10px;
}


.ContactBody {
    height: 88%; /*2024-11-20 was 90*/
    width: 95%; /*2025 was 88*/
    text-align: center;
    /*display: block table-cell;*/
    vertical-align: middle;
    margin: 10px auto;
    /*margin-top: 5px;*/ /*2024-11-20*/
    position: relative;
    top: 0px;
}

.ContactImg {
    display:none;
    
    background: url('../images/SupportPhoto.png') 50% 50% no-repeat padding-box;
    width: 40%;
    height: 73%;
    float: left;
    
    
}

.mandatory {
    color: red;
}
.ContactInput {
    height: 78%; /*2024-11-20 was 39*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: black;
    margin: 0px auto;
    float: right;
    width: 60%;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    align-content: space-around;
    text-align: left;
    
}



.ContactLblSmall {
    margin: 0px auto;
    width: 280px; /*Must be px not % in order for the flex box to wrap*/
    background-color: #FAFAFB;
    color: #333333;
    letter-spacing: 0px;
    opacity: 1;
    height: 35px;
    
}

.ContactLblMedium {
    margin: 0px auto;
    width: 280px; /*Must be px not % in order for the flex box to wrap*/
    background-color: #FAFAFB;
    color: #333333;
    letter-spacing: 0px;
    opacity: 1;
    height: 50px;
}
/*
.ContactTxtSmall {
    
    margin: 0px auto;
    width: 300px; 
}
    */
.ContactLbl {
    /*height: 14%;*/
    width: 92%;
    background-color: #FAFAFB;
    color: #333333;
    letter-spacing: 0px;
    opacity: 1;
    text-align: left;
    margin: 0px auto;
    
}

/*
.ContactTxt {
    text-align: left;
    height: 8%; 
    margin: 0px auto;
    width: 90%;
    position: relative;
    
}

.ContactCaptchaInstr {
    text-align: left;
    height: 6%;
    margin: 0px auto;
    width: 92%;
    position: relative;
    color: black;
    left: 2%;
    float: left;
    border-color: aqua;
    border: 1px solid;
}

.ContactCodes {
    text-align: left;
    height: 20%;
    border-color: green;
    border: 1px solid;
}

.ContactCaptcha {
    text-align: left;
    height: auto;
    margin: 0px auto;
    width: 90%;
    
}
*/
.ContactBtns {
    height: 20px%;
    margin: 0px auto;
    width: 90%;
    text-align: center;
    vertical-align: middle;
}

.ContactError {
    height: 40px;
    width: 90%;
    line-height:40px;
    text-align: center;
    bottom: 0px;
    margin: 2px auto;
    position: relative;
    border-radius: 12px 12px 12px 12px;
    vertical-align: middle;
    
}


.RegUserImg {
    background: url('../images/RegUser.png') 40% 40% no-repeat padding-box;
    width: 40%;
    height: 73%;
    float: left;
}


.SettingsInput {
    width: 90%;
    /*
    text-align: center;
    margin-left: 0px auto;
    margin-right: 0px auto;
    position: relative;*/
    border: 0px;
}

    /*2024-11-11 End*/
    : root {
    /* Colors: */
    --unnamed-color-0abd71: #0ABD71;
    --unnamed-color-444444: #444444;
    --unnamed-color-d3d3d3: #D3D3D3;
    --unnamed-color-00ff31: #00FF31;
    --unnamed-color-1f78b4: #1F78B4;
    --unnamed-color-0000ee: #0000EE;
    --unnamed-color-256b98: #256B98;
    --unnamed-color-f9f9fd: #F9F9FD;
    --unnamed-color-f9f9fd14: #F9F9FD14;
    --unnamed-color-707070: #707070;
    --unnamed-color-343a40: #343A40;
    --unnamed-color-ced4da: #CED4DA;
    --unnamed-color-6383a6: #6383A6;
    --unnamed-color-8c2447: #8C2447;
    --unnamed-color-e1e4e880: #E1E4E880;
    --unnamed-color-6383a8: #6383A8;
    --unnamed-color-6282a7: #6282A7;
    --unnamed-color-525252: #525252;
    --unnamed-color-234465: #234465;
    --unnamed-color-0000009a: #0000009A;
    --unnamed-color-e1e4e8: #E1E4E8;
    --unnamed-color-a9b4cc: #A9B4CC;
    --unnamed-color-244465: #244465;
    --unnamed-color-34c759: #34C759;
    --unnamed-color-ff3b30: #FF3B30;
    --unnamed-color-007aff: #007AFF;
    --unnamed-color-939393: #939393;
    --unnamed-color-ff5061: #FF5061;
    --unnamed-color-fdfcf8: #FDFCF8;
    --unnamed-color-3333336c: #3333336C;
    --unnamed-color-9d9f9f: #9D9F9F;
    --unnamed-color-0aa68b: #0AA68B;
    --unnamed-color-37d6ba: #37D6BA;
    --unnamed-color-80cbe8: #80CBE8;
    --unnamed-color-59a4ce: #59A4CE;
    --unnamed-color-87dbf6: #87DBF6;
    --unnamed-color-89dbf6: #89DBF6;
    --unnamed-color-91a6b5: #91A6B5;
    --unnamed-color-2e6821: #2E6821;
    --unnamed-color-3c8f2d: #3C8F2D;
    --unnamed-color-7bce34: #7BCE34;
    --unnamed-color-fc7e85: #FC7E85;
    --unnamed-color-fff3f7: #FFF3F7;
    --unnamed-color-abbcca: #ABBCCA;
    --unnamed-color-ffaa39: #FFAA39;
    --unnamed-color-ffc065: #FFC065;
    --unnamed-color-7c2f13: #7C2F13;
    --unnamed-color-cc7829: #CC7829;
    --unnamed-color-a04833: #A04833;
    --unnamed-color-ef3e3b: #EF3E3B;
    --unnamed-color-c82833: #C82833;
    --unnamed-color-dae8f7: #DAE8F7;
    --unnamed-color-a2aee6: #A2AEE6;
    --unnamed-color-c0d6f2: #C0D6F2;
    --unnamed-color-ea8826: #EA8826;
    --unnamed-color-feaa40: #FEAA40;
    --unnamed-color-e3eaf3: #E3EAF3;
    --unnamed-color-2f170b: #2F170B;
    --unnamed-color-1a87c4: #1A87C4;
    --unnamed-color-25beef: #25BEEF;
    --unnamed-color-454851: #454851;
    --unnamed-color-be3e5f: #BE3E5F;
    --unnamed-color-d18165: #D18165;
    --unnamed-color-ea9d7d: #EA9D7D;
    --unnamed-color-000001: #000001;
    --unnamed-color-c9effb: #C9EFFB;
    --unnamed-color-eff5f9: #EFF5F9;
    --unnamed-color-baf1eb: #BAF1EB;
    --unnamed-color-ff97a6: #FF97A6;
    --unnamed-color-eab2b2: #EAB2B2;
    --unnamed-color-000000: #000000;
    --unnamed-color-fcfaf7: #FCFAF7;
    --unnamed-color-201135: #201135;
    --unnamed-color-5d74e4: #5D74E4;
    --unnamed-color-fececc: #FECECC;
    --unnamed-color-c7dbff: #C7DBFF;
    --unnamed-color-000141: #000141;
    --unnamed-color-a0c5ff: #A0C5FF;
    --unnamed-color-e7f0fe: #E7F0FE;
    --unnamed-color-64ccc5: #64CCC5;
    --unnamed-color-333333: #333333;
    --unnamed-color-0a6ebd: #0A6EBD;
    --unnamed-color-fafafb: #FAFAFB;
    --unnamed-color-6383a9: #6383A9;
    --unnamed-color-ffffff: #FFFFFF;
    /* Font/text values */
    --unnamed-font-family-albert-sans: Albert Sans,Verdana, Arial, Microsoft Sans Serif;
    --unnamed-font-family-product-sans: Product Sans;
    --unnamed-font-family-dm-sans: DM Sans;
    --unnamed-font-family-sf-pro: SF Pro;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-300: 300px;
    --unnamed-font-weight-600: 600px;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-weight-bold: bold;
    --unnamed-font-weight-medium: medium;
    --unnamed-font-size-6: 6px;
    --unnamed-font-size-7: 7px;
    --unnamed-font-size-8: 8px;
    --unnamed-font-size-10: 10px;
    --unnamed-font-size-12: 12px;
    --unnamed-font-size-14: 14px;
    --unnamed-font-size-15: 15px;
    --unnamed-font-size-16: 16px;
    --unnamed-font-size-25: 25px;
    --unnamed-font-size-6-5: 6.5px;
    --unnamed-font-size-8-5: 8.5px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-character-spacing--0-28: -0.28px;
    --unnamed-line-spacing-8: 8px;
    --unnamed-line-spacing-9: 9px;
    --unnamed-line-spacing-10: 10px;
    --unnamed-line-spacing-12: 12px;
    --unnamed-line-spacing-13: 13px;
    --unnamed-line-spacing-15: 15px;
    --unnamed-line-spacing-16: 16px;
    --unnamed-line-spacing-17: 17px;
    --unnamed-line-spacing-18: 18px;
    --unnamed-line-spacing-19: 19px;
    --unnamed-line-spacing-30: 30px;
    --unnamed-decoration-underline: underline;
    --unnamed-text-transform-titlecase: titlecase;
}

/* Character Styles */
.unnamed-character-style-1 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-6-5);
    line-height: var(--unnamed-line-spacing-8);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-333333);
    text-decoration: var(--unnamed-decoration-underline);
}

.unnamed-character-style-2 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-6);
    line-height: var(--unnamed-line-spacing-15);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}

.unnamed-character-style-3 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-8-5);
    line-height: var(--unnamed-line-spacing-15);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-333333);
}

.unnamed-character-style-4 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-8-5);
    line-height: var(--unnamed-line-spacing-15);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-6383a9);
}

.unnamed-character-style-5 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-12);
    line-height: var(--unnamed-line-spacing-15);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-6383a9);
}

.unnamed-character-style-6 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-7);
    line-height: var(--unnamed-line-spacing-9);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-333333);
}

.unnamed-character-style-7 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-19);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0a6ebd);
}

.unnamed-character-style-8 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-19);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}

.unnamed-character-style-9 {
    font-family: var(--unnamed-font-family-sf-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-15);
    line-height: var(--unnamed-line-spacing-18);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
}

.unnamed-character-style-10 {
    font-family: var(--unnamed-font-family-sf-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}

.unnamed-character-style-11 {
    font-family: var(--unnamed-font-family-sf-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing--0-28);
    color: var(--unnamed-color-ffffff);
}

.unnamed-character-style-12 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-8);
    line-height: var(--unnamed-line-spacing-10);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-333333);
    text-transform: var(--unnamed-text-transform-titlecase);
}

.unnamed-character-style-13 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-7);
    line-height: var(--unnamed-line-spacing-9);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-333333);
    text-transform: var(--unnamed-text-transform-titlecase);
}

.unnamed-character-style-14 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-8);
    line-height: var(--unnamed-line-spacing-10);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}

.unnamed-character-style-15 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-6);
    line-height: var(--unnamed-line-spacing-8);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-333333);
    text-decoration: var(--unnamed-decoration-underline);
}

.unnamed-character-style-16 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-25);
    line-height: var(--unnamed-line-spacing-30);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0a6ebd);
}

.unnamed-character-style-17 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-medium);
    font-size: var(--unnamed-font-size-10);
    line-height: var(--unnamed-line-spacing-12);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-3333336c);
}

.unnamed-character-style-18 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-300);
    font-size: var(--unnamed-font-size-7);
    line-height: var(--unnamed-line-spacing-10);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
}

.unnamed-character-style-19 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-medium);
    font-size: var(--unnamed-font-size-8-5);
    line-height: var(--unnamed-line-spacing-10);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0a6ebd);
}

.unnamed-character-style-20 {
    font-family: var(--unnamed-font-family-dm-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-18);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0a6ebd);
}

.unnamed-character-style-21 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-6);
    line-height: var(--unnamed-line-spacing-8);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0a6ebd);
}

.unnamed-character-style-22 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-6);
    line-height: var(--unnamed-line-spacing-8);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}

.unnamed-character-style-23 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-7);
    line-height: var(--unnamed-line-spacing-9);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0a6ebd);
}

.unnamed-character-style-24 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-8-5);
    line-height: var(--unnamed-line-spacing-10);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0a6ebd);
}

.unnamed-character-style-25 {
    font-family: var(--unnamed-font-family-product-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-10);
    line-height: var(--unnamed-line-spacing-13);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-333333);
}

.unnamed-character-style-26 {
    font-family: var(--unnamed-font-family-albert-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-17);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0a6ebd);
}

.xyz {
    font: normal 20px/24px Albert Sans;
    color: var(--unnamed-color-244465);
    /*font: var(--unnamed-font-style-normal) var(--unnamed-font-weight-medium) var(--unnamed-font-family-albert-sans);*/
    /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) 20px/24px var(--unnamed-font-family-albert-sans);*/
    letter-spacing: var(--unnamed-character-spacing-0);
    /*font: normal normal medium 20px/24px Albert Sans;*/
    /*color: #244465;*/
    opacity: 1;
}


/*replaced with page
    .submenu {
    
    background-color: #6383A9;
    color: white;
    font-size: 10px;
    font-family: Verdana, Arial, Microsoft Sans Serif;
}*/


/*2025-05-14 Changed MainLogin*/
.MainLogin {
    overflow: auto;

    height: calc(100% - 55px); /*2025-05-14*/
    width: 100%;
    top: 15px; /*2025-05-14*/
    margin: 0px auto;

    vertical-align:middle;
    text-align: center;
    display: block;
    /* border: 1px solid white;*/

    position: relative;
    
}

.Login {
    text-align: center;
    display: block;
    background-color: #FAFAFB;
    overflow: auto;
    height: 70%; 
    width: 90%;
    margin: 0px auto;
    border-radius: 12px 12px 12px 12px;
    position: relative;
}


.LoginHdr {
    height: 75px; /*2024-11-20 was 55*/
    width: 100%;
    text-align: center;
    display: block table-cell;
}

.LoginLogo {
    width: 100%;
    height: 100%;
    float: left;
    display: table-cell;
}

.LoginLogoImg {
    height: 53px;
    width: 156px;
}



.LoginBody {
    height: 100%; /*2024-11-20 was 90*/
    width: 88%; /*2024-11-20 was 90*/
    text-align: center;
    /*display: block table-cell;*/
    vertical-align: middle;
    margin: 10px auto;
    margin-top: 15px; /*2024-11-20*/
    position: relative;
    background-color: transparent;
   
}



.LoginWelcome {
    height: 6%;
    text-align: center;
    margin: 10px auto;
    
}

.LoginOTPNotification {
    height: 7%;
    text-align: center;
    margin: 0px auto;
}

.LoginLogin {
    height: 10%;
    text-align: center;
    margin-bottom: 15px; /*2024-11-20 added*/
}


.LoginInput {
    height: 47%; /*2024-11-20 was 39*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: transparent;
}

.LoginCountryLbl {
    text-align: left;
    vertical-align: bottom;
    height: 15%; /*2023-11-02*/

    margin: 0px auto;
    width: 90%;
    position: relative;

    background-color: #FAFAFB;
    color: #333333;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    line-height:14px;
}

.LoginCountry {
    text-align: left;
    height: 25%; /*2023-11-02*/
    margin: 0px auto;
    width: 90%;
    
    vertical-align: top;
}



.LoginIDPassportLbl {
    text-align: left;
    height: 15%; /*2023-11-02*/
    margin: 0px auto;
    width: 90%;
    background-color: #FAFAFB;
    color: #333333;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    line-height:14px;
}

.LoginIDPassport {
    text-align: left;
    height: 18%; /*2023-11-02*/
    margin: 0px auto;
    width: 90%;
    position: relative;

}


.LoginTermsAndConditions {
    text-align: left;
    height: 15%;
    margin: 0px auto;
    width: 90%;
    color: #333333;
    font-size: 9px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    /*line-height: 10px;*/
    display: block;
    margin-bottom: 5px;
}

.LoginCaptchaInstr {
    margin-top: 10px;
    text-align: left;
    height: auto;
    margin: 0px auto;
    width: 90%;
    position: relative;
    color: black;
   /*background-color: pink;*/

}


.LoginCodes {
    width:90%;
    height: 40%;

    margin: 0px auto;
    display: flex;
    flex-direction: column;
    bottom: 20px;

}

.LoginCaptcha {
    text-align: left;
    height: auto;
    margin: 0px auto;
    width: 85%;
    /*position: relative;*/
    /*background-color: blue;*/

}


.LoginBtns {
    
    height: 20%;
    margin: 0px auto;
    width: 90%;
    text-align: center;
    vertical-align: middle;
  
    
}


/*2024-01-12 Start*/

.LoginSentToBody {
    height: 90%;
    width: 90%;
    text-align: center;
    vertical-align: middle;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}


.LoginSentToInstr {
    margin: 0px auto;
    height: 15%;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;

    font-style: normal;
    font-weight: normal;
    font-size: 8px;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    text-align: center;
    line-height: 9px;
    opacity: 1;
}

.LoginSentTo {
    height: 10%; 
    margin: 0px auto;
    text-align: left;
}

.LoginSentToBtns {
    height: 20%; /*2023-11-02*/
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*2024-01-12 End*/

.LoginOTPBody {
    height: 90%;
    width: 90%;
    text-align: center;
    vertical-align: middle;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.LoginOTPHdr {
    margin: 0px auto;
    height: 16%; /*2023-11-02*/
    text-align: center;
    vertical-align: middle;
    line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.LoginOTPInstr {
    margin: 0px auto;
    height: 15%;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
}

.LoginEnterOTPMsg {
    height: 8%; /*2023-11-02*/
    margin: 0px auto;
    /*margin-bottom: 8px;*/ /*2023-11-02*/
}


.LoginOTP {
    height: 8%; /*2023-11-02*/
    margin: 0px auto;
}

.LoginOTPBtns {
    height: 20%; /*2023-11-02*/
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.LoginOTPMsg {
    height: 20%;
    margin: 0px auto;
    display: block;
    text-align: left;
    font-style: normal;
    font-weight: normal;
    font-size: 7px;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    line-height: 9px;
    opacity: 1;
    
}


    /*2025-05-14*/
    .LoginFooter {
        height: auto;
        width: 75%;
        text-align: center;
        vertical-align: center;
        bottom: 130px; /*2025-05-14*/
        margin: 8px auto;
        position: absolute;
        background-color: transparent;
        spacing: 5px;
/*
        display: flex;
        flex-direction: column;
        border: 1px solid red;*/
    }

/*2025-05-14*/
.LoginSite {
    display: block;
    height: auto;
    width: 66%;
    text-align: center;
    background-color: black;
    float: right;
    border-radius: 6px;
    padding: 5px;
    /*border: 1px solid aqua;*/
}

.LoginError {
    display: block;
    height: auto;
    width: 66%;
    text-align: center;
    background-color: maroon;
    color: white;
    float: right;
    border-radius: 6px;
    padding: 5px;
    /*border: 1px solid white;*/
}

.HomeHeader {
    text-align: center;
    height: 60px;
    width: 100%;
    margin: 0px auto;
    /*background-color: green;*/
    justify-content: center;
    align-items: center;
}

.HomeLogoHeading {
    height: 53px;
    width: 76%;
    margin: 0px auto;
    display: inline-block;
    text-align:center;
    float: left;
    /*position: relative;*/
    /*background-color: blue;*/
}




.HomeLogo {
    left: calc(left-10px);
    /*left: calc(100% / 2 -85px);*/
    height: 50px;
    
}


.HomeUser {
    text-align: center;
    height: 90%;
    width: 10%;
    display: inline-block;
    float: right;
    margin-right: 0px auto;
    /*background-color: yellow;*/
}

.LoginOrientationMsg {
    text-align:center; 
    height:10%;
    width:95%;
    display: none;
}


.HomeOrientationMsg {
    text-align:center; 
    height:10%;
    width:95%;
    display: none;
}


.LoggedOutOrientationMsg {
    text-align:center; 
    height:10%;
    width:95%;
    display: none;
}

.whitespace {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    /*border: 2px solid #CED4DA;*/
    border: 1px solid grey; /*2023-11-02*/
    opacity: 1;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    font-size: 10px;
}


.whitespace-disabled {
    /*background: #FAFAFB 0% 0% no-repeat padding-box;*/
    background-color: #FAFAFB;
    /*border: 1px solid #CED4DA;*/
    border: 1px solid grey; /*2023-11-02*/
    opacity: 1;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    font-size: 10px;
}


.readonly {
    background-color: #FAFAFB; 
    color: #333333;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    line-height: 14px;
    opacity: 1;
}


.hiddenonreadonly {
    background-color: #FAFAFB;
    color: #FAFAFB;
    border-style: none;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    font-size: 10px;
    border-width: 0;
}


.datacapture-big {
    background-color: #FAFAFB;
    opacity: 1;
    margin: 0px auto;
}


.datacapture-rounded {
    background-color: #FAFAFB;
    color: black;
    border-radius: 12px 12px 0px 0px;
    opacity: 1;
}



.btn {
    background-color: gainsboro;
    color: black;
    font-size: 10px;
    font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    cursor: pointer;
    border: outset 2px;
    border-radius: 3px 4px;
    font-weight: normal;

}


.error {
    background-color: maroon;
    color: white;
    font-weight: bold;
    font-size: 10px;
    border-style: none;
    font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    /*margin: 0px auto;*/
}

.FilterDateRange {
    width: 90%;
    height: 10%;
}

.FilterPage {
    border: 0px;
    height: 75%;
    margin: 0px auto;
}


#overlay {
    background: transparent url('../images/Smudge/overlay.png') 0% 0% no-repeat padding-box;
    opacity: 1;
}

#logo {
    
    top: 26px;
    left: 116px;
    width: 156px;
    height: 53px;
    background: transparent url('../images/Logos/tHSLogo_PP.png') 6% 6% no-repeat padding-box;
    opacity: 1;

}

.hdr {
    
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    
    letter-spacing: 0;
    color: #244465;
    opacity: 1;
    
}


.hdr-medium {
    /*font: normal normal medium 20px/24px Albert Sans;*/
    font-style: normal;
    font-weight:500;
    font-size: 16px;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    /*font: var(--unnamed-font-style-normal) bold var(--unnamed-font-weight-medium) 24px/28px var(--unnamed-font-family-albert-sans);*/
    letter-spacing: 0;
    color: #244465;
    /*font: normal normal medium 20px/24px Albert Sans;*/
    /*color: #244465;*/
    opacity: 1;
    /*font: normal 20px/24px Albert Sans;*/
    /*font: var(--unnamed-font-style-normal) var(--unnamed-font-weight-medium) var(--unnamed-font-family-albert-sans);*/
    /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) 20px/24px var(--unnamed-font-family-albert-sans);*/
}



.msg {
    /*top: 154px;
    left: 35px;
    width: 305px;
    height: 18px;*/
    /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-7)/var(--unnamed-line-spacing-9) var(--unnamed-font-family-albert-sans);*/
    font-style: normal;
    font-weight: normal;
    font-size: 7px;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    text-align: center;
    background-color: transparent; /*added 2024-11-20*/
    
    line-height: 9px;
    
    opacity: 1;
}

.img-bg {
    /* UI Properties */
    background: var(--unnamed-color-234465) 0% 0% no-repeat padding-box;
    background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
}

.thumbnail {
    background-color: #234465;
    float: left;
    width: 110px;
    height: 100px;
    margin: 5px auto;
    border: 1px lightblue outset;
    border-radius: 5%;
    cursor: pointer;
    /*background: var(--unnamed-color-234465) 0% 0% no-repeat padding-box;*/
    opacity: 1;
    color: white;
    /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-12)/var(--unnamed-line-spacing-30) var(--unnamed-font-family-product-sans);*/
    text-align: center;
    letter-spacing: 0px;
    font-weight: normal;
    font-size: 11px;
    /*line-spacing: 30px;*/
    font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
}
/*below Added 2024-11-20*/
.thumbnail-header {
    background-color: #234465;
    float: left;
    width: 200px;
    height: 90px;
    margin: 5px;
    border: 1px lightblue outset;
    border-radius: 5%;
    cursor: pointer;
    /*background: var(--unnamed-color-234465) 0% 0% no-repeat padding-box;*/
    opacity: 1;
    color: white;
    /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-12)/var(--unnamed-line-spacing-30) var(--unnamed-font-family-product-sans);*/
    text-align: center;
    letter-spacing: 0px;
    font-weight: normal;
    font-size: 11px;
    /*line-spacing: 30px;*/
    font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
}



/*2023-09-06*/


.thumbnail_scrollmenu {
    float: left;
    width: 51px;
    height: 49px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 7px;
    background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    color: white;
    opacity: 1;
    line-height: 9px;
    font-weight: normal;
    font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    flex-shrink: 0;
}

/*2023-09-18*/
.thumbnailimgdiv_scrollmenu {
    width: 100%;
    height: 24px;
    margin-top: 3px;
    
}

/*2023-09-18*/
.thumbnailimg_scrollmenu {

    width: 20px;
    height: 20px;
    border-radius: 5px 5px 5px 5px;
}

/*2023-10-14*/
.thumbnailspacer_scrollmenu {
    width: 100%;
    height: 0px;
}
/*2023-09-06*/

.divWrapperWithMenuBar {
    width: 270px;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}


.thumbnail_menubar {
    display: block;
    float: left;
    width: 60px;
    height: auto;
    margin-right: 5px;
    cursor: pointer;
    font-size: 7px;
    /*background-color: green;*/
    line-height: 9px;
    /*background: green url('../images/Logos/tHSLogo_PP.png') 60% 60%/90% 90% no-repeat padding-box;*/
    /*border: 1px solid green;*/
}

/*2023-09-18*/
.thumbnailimgdiv_menubar {
    width: 100%;
    height: 28px;
    /*border: 1px solid blue;*/
}

/*2023-09-18*/
.thumbnailimg_menubar {
    /*width: 27px;*/
    height: 27px;
    /*border: 1px solid red;*/
}

    .Perc100x100 {
    width: 100%;
    height: 100%;
    text-align: center;
}



.Perc100x90 {
    width: 100%;
    height: 90vh;
    text-align: center;
}




.Perc100x50 {
    width: 100%;
    height: 50%;
    text-align: center;
}



.Perc90x100 {
    width: 90%;
    height: 100%;
    text-align: center;
}



.Perc90x90 {
    width: 90%;
    height: 90%;
    text-align: center;
}



.Perc80x80 {
    width: 80%;
    height: 80%;
    text-align: center;
}




.thumbnail-btn {
    float: left;
    width: 98%;
    /*2023-09-19 height: 55px;*/ /*2023-08-04? test this was 100px*/
    height: 45px;
    margin: auto;
    background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;
    opacity: 1;
    color: white;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-12)/var(--unnamed-line-spacing-30) var(--unnamed-font-family-product-sans);
    text-align: center;
    letter-spacing: 0px;
}

.widget-btn {
    /*2023-09-19 height: 45px;*/ /*2023-08-04? test this was 85px*/
    height: 35px;
    width: 98%;
    font-weight: normal;
    font-style: normal;
    font-size: 13px;
    font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    /*font-size: 10px;
    font-family: */
    cursor: pointer;
    border-radius: 8px;
    opacity: 1;
    text-align: center;
    margin: 0px auto;
    vertical-align: middle;
    line-height: 35px; /*Needed to center the text vertically*/
    opacity: 1;
    /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-19) var(--unnamed-font-family-product-sans);*/
    letter-spacing: 0px;
}

.page {
    

    background-color: #6383A9;
    color: white;
    font-size: 10px;
    font-family: Verdana, Arial, Microsoft Sans Serif;
    margin: 0px auto;
}
    

.gridheading10 {
    text-align: center;
    font: normal normal medium 20px/24px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #244465;
    opacity: 1;
}


.gridheading {
    background: #256B98 0% 0% no-repeat padding-box;
    opacity: 1;
    text-align: center;
    font: normal normal medium 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: white;
}

.datacapture {
    background-color: #FAFAFB;
    font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}


.datacapturealt {
    font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}



.datagridheading {
    background: #256B98 0% 0% no-repeat padding-box;
    opacity: 1;
    text-align: center;
    font: normal normal medium 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: white;
}

.labels {

    font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}


.warning {
    font-family: Verdana, Arial, Microsoft Sans Serif;
    color: Yellow;
    font-size: 10px;
    background-color: black;
}


.info {
    background-color: #002C55;
    color: White;
    font-size: 10px;
    font-weight: bold;
    border-style: none;
    font-family: Verdana, Arial, Microsoft Sans Serif;
}


.btn {
    background-color: gainsboro;
    color: black;
    font-size: 10px;
    font-family: Verdana, Arial, Microsoft Sans Serif;
    cursor: pointer;
    border: outset 2px;
    border-radius: 3px 4px;
}


.bad {
    background-color: orange;
    color: black;
    font-size: 10px;
    font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
}

.card {

     height: 74px;
     width: 74px;

     top: 4px; 
     left: 0px; 
     position: absolute;
     border-radius: 6px;
}

.card-smaller {
    
    height: 90%;
    width: 90%;
    background: var(--unnamed-color-234465) 0% 0% no-repeat padding-box;
    background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
}

.add {
    height: 48px;
    width: 48px;
    top: 13px; 
    left: 12px; 
    position: absolute;
    opacity: 1;
   
}

.card-text {
    top: 66px; 
    left: 6px; 
    color: #333333;
    text-align: center;
    font: normal normal normal 7px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    position: absolute;
}

.hdr-small {
    text-align: center;
    font: normal normal bold 10px/10px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #6383A9;
    opacity: 1;
    top: 0px;
    position: relative;
    line-height: 5px;
    /*background-color: yellow;*/
}

.cal_card {
    /*top: 211px;
left: 41px;*/
    width: 99%; /*2023-09-22 was 95%*/
    height: 89px;
    /* UI Properties */
    opacity: 1;

}

.cal_card_block {
    /*background: var(--unnamed-color-234465) 0% 0% no-repeat padding-box;*/
    /*background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;*/
    position:absolute;
    left: 0px;
    text-align: center;
    vertical-align: middle;
    width: 63px;
    height: 56px;
    /* UI Properties */
    background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
    float: left;
    margin: 8px;
}


.cal_card_block_emphasised {
    
    /*background: var(--unnamed-color-234465) 0% 0% no-repeat padding-box;*/
    /*background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;*/
    position:absolute;
    left: 0px;
    text-align: center;
    vertical-align: middle;
    width: 63px;
    height: 56px;
    /* UI Properties */
    background: maroon 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
    float: left;
    margin: 8px;
}

.cal_card_block_text_big {
    /* Layout Properties */
    /*top: 220px;
left: 62px;
width: 26px;
height: 24px;*/
    /* UI Properties */
    /*top: 5px;
left: 5px;*/
    font: normal normal bold 20px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    position: relative;
    top: 14px;
}

.cal_card_block_text_small {
    /* Layout Properties */
    /*top: 245px;
left: 64px;
width: 22px;
height: 13px;*/
    /* UI Properties */
    top: 20px;
    font: normal normal normal 10px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    position: relative;
}

.cal_card_text_block {
    /* Layout Properties */
    /*top: 211px;
left: 155px;
width: 130px;
height: 56px;*/
    /* UI Properties */
    text-align: left;
    font: normal normal normal 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #6383A9;
    opacity: 1;
    width: 70%;
    height: 70%;
    
    float: right;

}


.cal_text {
    width: 70%;
    line-height: 0.8px;
}


.cal_text_emphasised {
    width: 70%;
    color: maroon;
}



.div_create_appointment {
    /* Layout Properties */
    /*top: 179px;
left: 41px;
width: 76px;
height: 9px;*/
    /* UI Properties */
    text-align: left;
    font: normal normal normal 7px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    width: 100%;
    height: 10%;
}

.upcoming_appointments_icons {
    /* Layout Properties */
    /*top: 425px;
left: 202px;*/
    width: 9px;
    height: 8px;
    /* UI Properties */
    background: transparent 0% 0% no-repeat padding-box;
    opacity: 1;
}

.reschedule {
    /* Layout Properties */
    /*top: 272px;
left: 155px;
width: 40px;
height: 9px;*/
    /* UI Properties */
    text-align: center;
    font: normal normal normal 7px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}

.cancel {
    /* Layout Properties */
    /*top: 272px;
left: 214px;
width: 22px;
height: 9px;*/
    /* UI Properties */
    text-align: center;
    font: normal normal normal 7px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}

.bookings_create_new_appointment_label {
    /*top: 179px;
left: 41px;
width: 76px;
height: 9px;*/
    text-align: left;
    font: normal normal normal 8px/20px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    height: 20px;
    vertical-align: middle;
}



.add-small {
    text-align: left;
    font: 900 14px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}

.btn-as-text {
    /* Layout Properties */
    /*top: 272px;
left: 155px;
width: 40px;
height: 9px;*/
    /* UI Properties */
    text-align: center;
    font: normal normal normal 7px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    border: 0px;
    opacity: 1;
    background-color: transparent;
    cursor: pointer;
}

.AppointmentInput {
    width: 100%;
    height: 90%;
}


.NewAppointmentInput {
    overflow-y: auto;
    width: 100%;
    height: 60%;
}


.AppointmentMsg {
    width: 100%;
    height: auto;
    /*line-height: 40px;*/
    background-color: maroon;
    color: white;
    font-size: 8px;
    border-style: none;
    font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
}

.ExistingAppointments {
        margin-top: 10px;
        width: 100%;
        margin: 0px auto;
        text-align: center;
        display: block;
        position: relative;
        height: 70%;
        overflow-y: auto;
}

.avail-cal-day {
    /*background-color: #234465;*/
    color: #6383A9;
}


.calendar {
    font-size: 10px;
    font-family: Product Sans,Verdana, Arial, Microsoft Sans Serif;
    background-color: white;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}

.selected {
    background-color: maroon;
    color: white;
}


.cal-other-month {
    background-color: #A9B4CC;
    color: white;
}

.cal-heading {
    background: #256B98 0% 0% no-repeat padding-box;
    opacity: 1;
    text-align: center;
    font: normal normal medium 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: white;
}

.Demographics {
    width: 90%; /*2023-11-02*/
    height: 98%;
    margin: 0px auto;
    /*background-color: pink;*/
    overflow-y: auto;
    overflow-x: auto;
    display: block;
    position: relative;
    
}

/*2023-11-03 Added*/
.DemographicsInput {
    width: 95%;
    text-align: center;
    margin-left: 0px auto;
    margin-right: 0px auto;
    border: 0px;
    
}

#txtSurname {
 width: 50%;
}


.ContactInfo {
    width: 100%;
    height: 1000px;
    margin: 0px auto;
}

.AddNewAddrWrapper {
    height: 120px;
    width: 90%;
    text-align: left;
    float: left;
    margin: 0px auto;
    overflow-y: auto;

}


#divAddresses {
    height: 1000px;
    width: 98%;
    text-align: left;
    float: left;
    margin: 0px auto;
    overflow-y: auto;
}



.add_address {
    float: left;
    width: 200px;
    height: 200px;
    margin: 5px;
    border: 1px lightblue outset;
    border-radius: 5%;
    padding: 10px;
    cursor: pointer;
}

.address {

    background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
}



.addr-add-card {
     
    height: 90px;
    width: 95px;
    top: 0px;
    left: 15px;
    position: absolute;
    border-radius: 6px;
    background-color: #234465;
}


.addr-add {
  
    height: 37px;
    width: 37px;
    top: 20px;
    left: 43px;
    position: absolute;
}

.addr-card-text {
    top: 70px;
    left: 32px;
    width: 62px;
    height: 9px;
    color: white;
    text-align: center;
    font: normal normal normal 7px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    position: absolute;
}


.addr-card-text-block {
    width: 90%;
    height: auto;
    background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    text-align: left;
    font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: white;
    opacity: 1;
    margin-top: 15px;
    margin-left: 20px;
}




.addr-text-big {

    margin-left: 10px;
    height: 15px;
    font: normal normal bold 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;

    color: white;
    opacity: 1;
}



.addr-text-medium-highlight {

    margin-left: 10px;
    height: 12px;
    font: normal normal bold 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    color: yellow;
    opacity: 1;
}



.addr-text {
    font: normal normal normal 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    margin-left: 10px;
}

.addr-btn-as-text {
   
    text-align: center;
    font: normal normal normal 9px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: white;
    border: 0px;
    opacity: 1;
    background-color: transparent;
    left: 70%;
    cursor: pointer;
}


.addr-type-div {
    top: 10px;
    left: 10px;
    width: 75%;
    float: left;
}


.addr-btn-div {
    top: 10px;
    left: 70%;
    width: 25%;
    float: right;
    text-align: right;
}



.funder-card-text-block {
   
    width: 90%;
    height: auto;
    background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    text-align: left;
    font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: white;
    opacity: 1;
 
    margin: 20px;
    line-height: 2px;
}




.funder-text-big {

    margin-left: 10px;
    height: 15px;
    font: normal normal bold 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;

    color: white;
    opacity: 1;
}



.funder-text {
    font: normal normal normal 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    margin-left: 10px;
}

.doc-card-text-block {
  
    width: 98%;
    height: 50px;
    background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    text-align: left;
    font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: white;
    opacity: 1;
 
    margin-top: 20px;
    line-height: 2px;
    
}


.doc-div-icon {
   
    width: 15%;
    float: left;
    height: 95%;
    left: 5px;
   
    text-align: center;
   
    background: transparent url('../images/pdf.svg') 15% 25% no-repeat padding-box;
   
    position: relative;
}

.doc-div-det {
   
    width: 45%;
    float: left;
    height: 98%;
   
    text-align: left;

    position: relative;
  

}



.doc-det-btn-as-text {

    text-align: center;

    letter-spacing: 0px;
    color: white;
    border: 0px;
    top: 30%;
    position: relative;
    background-color: transparent;
    color: var(--unnamed-color-ffffff);
    font: normal normal normal 10px/14px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    text-decoration: underline;
    position: relative;
    cursor: pointer;
    
}


.doc-text {
  
    color: white;
    top: 25%;
    position: relative;
    text-decoration: underline;
    font: normal normal normal 10px/14px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
}


.doc-div-download {
    width: 25%;
    float: right;
    
    text-align: center;
    vertical-align: middle;

    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    position: relative;
    margin-right: 7px;
    top: 30%;

}


.doc-download-btn-as-text {
    
    text-align: center;
    
    letter-spacing: 0px;
    color: white;
    border: 0px;
    top: 25%;
    position: relative;
    background-color: transparent;
    
    color: var(--unnamed-color-ffffff);
    font: normal normal normal 10px/14px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    cursor: pointer;
}



.up {
    top: 0px;
    position: relative;
    width: 26px;
    height: 70%;
  
    background: transparent 4% 4% no-repeat padding-box;
    opacity: 1;
}


.XRayList {
    height: 90%;
    width: 90%;
    text-align: center;
    margin: 0px auto;
    display: block;
    border: none;
}

.FundersList {
    height:90%;
    width:93%;
    text-align:center;
    margin: 0px auto;
}


.x-ray-card-text-block {

width: 88%;
height: 50px;
background: #234465 0% 0% no-repeat padding-box;
border-radius: 6px;
text-align: left;
font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
letter-spacing: 0px;
color: white;
opacity: 1;

margin: 20px;
line-height: 2px;
}



.x-ray-div-icon {
    height: 70%;
    width: 15%;

    float: left;
    
    left: 4px;
    top: 8px;
    
    text-align: center;
    background: transparent 12% 12% no-repeat padding-box;
    
    position: relative;
    background-size: 90% 90%;
}


.x-ray-div-spacer {
    float: left;
    top: 2px;
    text-align: center;

    background: transparent 1% 1% no-repeat padding-box;
    position: relative;
    width: 10px;
    height: 100%;
    
}


/*#divPage {
    height: 75%
}*/


.WhiteSpaceNo {
    background-color: White;
    color: Black;
    font-size: 10px;
    font-family: Verdana, Arial, Microsoft Sans Serif;
    text-align: right;
}

#Calendar1 {
    width: 50px;
}


.calendar {
    font-size: 10px;
    font-family: Product Sans,Verdana, Arial, Microsoft Sans Serif;
    background-color: white;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}

.selected {
    background-color: maroon;
    color: white;
}


.cal-other-month {
    background-color: #A9B4CC;
    color: white;
}


.cal-heading {
    background: #256B98 0% 0% no-repeat padding-box;
    opacity: 1;
    text-align: center;
    font: normal normal medium 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: white;
}

.burger-menu {
    top: 20px;
    left: 20px;
    float: left;
    width: 10%;
    height: 20px;
    margin: 5px;
    text-align: center;
    border-radius: 5%;
    padding: 10px;
    /*background-color: red;*/

}

.burger-icon {
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5%;
    cursor: pointer;
}

.bar {
    width: 100%;
    height: 2px;
    background-color: #FFF;
}

.burger-menu-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 290px;
    height: 100%;
    /*background-color: #fff;*/
    background-color: #FAFAFB; /*must be same as readonly*/
    padding: 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1;
}


    .burger-menu-items.active {
        transform: translateX(0);
    }

.burger-menu-item {
    float: left;
    width: 100%;
    height: 22px;
    cursor: pointer;
    text-align: left;
    opacity: 1;
    /*list-style: none;*/
    font: normal normal 300 11px/20px Albert Sans, Verdana, Arial, Microsoft Sans Serif; /*2023-09-22 12px to 10*/
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    line-height: 0.8;
}

.burger-menu-item-close {
    float: left;
    width: 30px;
    height: 22px;
    cursor: pointer;
    text-align: left;
    opacity: 1;
    /*list-style: none;*/
    font: normal normal 300 14px/20px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    line-height: 0.8;
}

.burger-menu-item-top {
    float: left;
    width: 100%;
    height: 25px;
    cursor: pointer;
    text-align: left;
    /*background-color: pink;*/
    vertical-align: middle;
    /*list-style: none;*/
    font: normal normal normal 14px/19px Albert Sans, Verdana, Arial, Microsoft Sans Serif; /*2023-09-22 16px to 12*/
    letter-spacing: 0px;
    color: #000000;
    text-transform: capitalize;
    opacity: 1;
    line-height: 1;
}


.burger-menu-item-icon-div {
    top: 0;
    width: 30px;
    height: 100%;
    display: inline-block;
    float: left;
    position: relative;
    text-align: center;
    margin-left: 2px;
    margin-top: 2px;
    /*background-color: blue;*/
}

.burger-menu-item-icon {
    width: 20px;
    height: 20px;
    opacity: 0;
}



.burger-menu-item-text-div {
    top: 0;
    width: 74%;
    display: block;
    vertical-align: middle;
    float: left;
    text-align: left;
    margin-left: 5px;
    margin-top: 10px;
    /*background-color: blueviolet;*/
    line-height: 10px;
}


.burger-menu-item-arrow-div {
    top: 0;
    width: 10%;
    height: 100%;
    display: block;
    float: left;
    text-align: left;
    margin-top: 10px;
}

.hyperlink {
    text-decoration: underline;
    color: navy;
    cursor: pointer;
}

/*2023-09-18 below added*/

.thumbnail_small {
    float: left;
    width: 60px;
    height: 50px;
    margin: 5px;
    border: 1px lightblue outset;
    border-radius: 5%;
    cursor: pointer;
}



.thumbnailimgdiv {
    margin-top: 2px auto;
    width: 100%;
    height: 50px;
}

.thumbnailimg {
    width: 48px;
    height: 48px;
    border-radius: 6px;
}

.thumbnailimg_small {
    width: 100%;
    height: 30px;
}


.thumbnailhdr {
    width: 90%;
    height: 25px;
    margin: 2px auto;
    bottom: 2px;

}

.thumbnailhdr_small {
    width: 100%;
    height: 10px;
    bottom: 2px;
}


.thumbnailhdr_scrollmenu {
    width: 100%;
    height: 25px;
}

.thumbnailhdr_menubar {
    width: 100%;
    height: 10px;
}


.thumbnailspacer {
    width: 100%;
    height: 1px;
}

.thumbnailspacer-bigger {
    width: 100%;
    height: 2px;
}

.HomeRounded {
    width: 90%;
    height: 80%;
    margin: 0px auto;
    border-radius: 12px 12px 6px 6px;
    overflow-y: hidden;
}


.divDet {

    height: 99%;
    width: 95%;
    text-align: center;
    margin: 0px auto;
    border-radius: 12px 12px 6px 6px;
    position: relative;
    overflow: hidden;
}

#divBody {
    text-align: center;
    height: 100%;
    width: 100%;
    overflow-y: hidden; 
    top: 13px;
    position: absolute;

    /*display: none;*/
}

.HomeDetBody {
    height: 300px;
    width: 100%;
    margin: 0px auto;
    border-radius: 12px 12px 0px 0px;
    overflow-y: hidden;
    background-color: transparent;
}


.HomeDetBodyWithMenuBarOnly {
    
    height: calc(100% - 40px);
    width: 100%;
    margin: 0px auto;
    border-radius: 12px 12px 0px 0px;
    position: absolute;
    overflow-y: visible;
    background-color: transparent;
    display: block;
}


.HomeBottom {
    text-align: center;
    height: 214px;
    width: 100%;
    overflow: hidden;
    display: flex;

    bottom: 8px; /*2023-10-06*/
    position: absolute;
    /*background-color: red;*/
    /*background-color: #FAFAFB;*/
    /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
    /*box-shadow: 0px 12px 24px #0000000F;*/
    opacity: 1;
    margin: 0px auto;
    border-radius: 0px 0px 6px 6px;
}

.HomeBottomWithMenuBarOnly {
    text-align: center;
    height: 50px;
    width: 100%;
    overflow: hidden;

    /*bottom: 220px;*/
    bottom: 10px; /*2023-10-09*/
    position: absolute;
    background-color: transparent;
    /*background-color: #FAFAFB;*/
    /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
    /*box-shadow: 0px 12px 24px #0000000F;*/
    opacity: 1;
    margin: 0px auto;
    border-radius: 0px 0px 6px 6px;

}

#divAppointments {
    text-align: center;
    height: 99px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    float: left;
    left: 0px;
    top: 0px;
    margin: 0px auto;
    /*background-color: greenyellow;*/
}

#divAppWrapper {
    text-align: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0px auto;
    /* background-color: yellow;*/
}


#iFrmAppointments {
    display: flex;
    height: 98%;
    width: 100%;
    border: 0;
    text-align: center;
    overflow: hidden;
    margin: 0px auto;
    /*background-color: orange;*/
}


/*2023-10-14:  changed from #divScroll to .divScroll*/
.divScroll {
    text-align: center;
    height: 59px;
    width: 100%;
    display: block;
    top: 100px;
    left: 0px;
    float: left;
    margin: 0px auto;
    position: absolute;
    /*background-color: navy;*/
    overflow-x: auto;
    overflow-y: hidden;
}

/*2023-10-14 Added*/
.divScrollWrapper {

    height: 100%;
    width: 100%;
    /*width: calc(100vw + 500px);*/
    
    overflow-x: auto;
    overflow-y: hidden;
    position: absolute;
    margin: 0px auto;
    text-align: center;
    flex-wrap: nowrap;
    display: flex;
    flex-shrink: 0;

}




.HomeMenuBar {
    /*The appointments, scroll menu and the menu bar are visible*/
    text-align: center;
    height: 55px;
    width: 100%;
    overflow: hidden;
    display: flex;
    border-radius: 0px 0px 6px 6px;
    left: 0px;
    bottom: 0px;
    margin: 0px auto;
    position: absolute;
    float: left;
    background-color: transparent;
}

.HomeMenuBarOnly {
    /*Only the menu bar is visible*/
    text-align: center;
    height: 60px;
    width: 100%;
    overflow: hidden;
    display: flex;
    border-radius: 0px 0px 6px 6px;
    left: 0px;
    top: 0px;
    margin: 0px auto;
    position: absolute;
    float: left;
    /*
    border: 1px solid orange;
    background-color: orange;
    */
}

#IFrmWidgetMenu {
    border-radius: 0px 0px 6px 6px;
    display: flex;
    height: 100%;
    width: 100%;
    border: 0;
    margin: 0px auto;
    text-align: center;
    overflow: hidden;
    justify-content: center; /*2023-11-04*/
    align-items: center; /*2023-11-04*/
    /*background-color: orange;*/
}

.WidgetPage {
    width: 100%;
    height: 95vh; /*2023-10-19 added was 90% in aspx page*/
    text-align: center;
    overflow: hidden;
    background-color: transparent;
}

/*Widgets page start*/
.RoundedBottomCorners {
    border-radius: 0px 0px 6px 6px;
    /*background-color: yellow;*/
}

.iFrmWidget {
        
    background-color: transparent;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    border: 0px;

          
}

/*2013-10-14 from # to .*/

.divTypes {
    width: 100%;
    /*2023-09-19 height:80%;  */
    height: auto;
    overflow-y: hidden; /*cannot hide overflow-x as then the scroll menu does not scroll*/
    /*background-color: yellowgreen;*/
    border-radius: 0px 0px 6px 6px;
    margin: 0px auto;
    text-align: center;

}


.divWrapper {
    width: 30%;
    /*height: auto;*/
    text-align: center;
    margin: 0px auto;
    background-color: transparent;
    /*overflow: auto;*/
    overflow-y: auto;
    border: 0px;
}


.divWrapperSmallWithScroll {
    width: 30%;
    /*height: auto;*/
    text-align: center;
    margin: 0px auto;
/*    background-color: orange;*/
    /*overflow: auto;*/
    overflow-y: auto;
    height: 1vh; /*2023-09-21 must set the height for the scroll bar to show*/
    border: 0px;
}

.divWrapperWithScroll {
    width: 30%;
    /*height: auto;*/
    text-align: center;
    margin: 0px auto;
    /*background-color: orange;*/
    /*overflow: auto;*/
    overflow-y: auto;
    height: 70vh; /*2023-09-21 must set the height for the scroll bar to show*/
    border: 0px;
}


.divWrapperSmallWithScroll {
    width: 30%;
    /*height: auto;*/
    text-align: center;
    margin: 0px auto;
    /*background-color: pink;*/
    /*overflow: auto;*/
    overflow-y: auto;
    height: 100%; /*2023-09-21 must set the height for the scroll bar to show*/
    border: 0px;

}

.divWrapperMediumWithScroll {
    width: 30%;
    /*height: auto;*/
    text-align: center;
    margin: 0px auto;
    /*background-color: pink;*/
    /*overflow: auto;*/
    overflow-y: auto;
    height: 50vh; /*2023-09-21 must set the height for the scroll bar to show*/
    border: 0px;
}

.divWrapperMaxWithScroll {
    width: 30%;
    /*height: auto;*/
    text-align: center;
    margin: 0px auto;
    /*background-color: pink;*/
    /*overflow: auto;*/
    overflow-y: auto;
    height: 100vh; /*2023-09-21 must set the height for the scroll bar to show*/
    border: 0px;
}

/*2023-10-10*/

.divWrapperFewWidgetsWithScroll {
    width: 90%; /*2023-10-19 was 280px*/
    /*height: auto;*/
    text-align: center;
    margin: 0px auto;
    /*background-color: red;*/
    /*overflow: auto;*/
    overflow-y: auto;
    height: 70vh; /*2023-09-21 must set the height for the scroll bar to show*/
    border: 0px;
    top: 0px;
    position: relative;
}

.divWrapperMaxWidgetsWithScroll {
    /*max width of widgets e.g. limited to 2 or 5 per line*/
    width: 90%; /*2023-10-19 280px;*/
    /*height: auto;*/
    text-align: center;
    margin: 0px auto;
    /*background-color: orange;*/
    /*overflow: auto;*/
    overflow-y: auto;
    height: 70vh; /*2023-09-21 must set the height for the scroll bar to show*/
    border: 0px;
}

/*Widgets page end*/

/*BookingSummary page start*/
#divAppointmentsSummary {
    text-align: center;
    height: 100%;
    /*2023-09-19 height: 95%;*/
    width: 98%;
    /*overflow: hidden;*/
    /*background-color: aqua;*/
    /*height: 100vh; 2023-10-07*/
}

#divCreateAppointment {
    height: 100%;
    width: 28%; /*2023-10-05*/
    text-align: left;
    float: left;
}

#divCreateAppointmentPlus {
    top: 0px;
    height: 98%; /*2023-10-05*/
    width: 98%; /*2023-10-05*/
    text-align: left; /*2023-10-05*/
    position: relative;
    margin: 0px auto;
    float: left; /*2023-10-05*/

}

#divUpcomingAppointments {
    height: 99%;
    width: 67%; /*2023-10-05*/
    text-align: left;
    position: relative;
    float: right;

}

#attUpcomingAppointments {
    height: auto;
    top: 0px;
    line-height: 0.8px; 
}

#divUpcomingAppointmentsDet {
    /*height: 45%;*/
    height: 58%;
    width: 100%;
    display: inline-block;
    text-align: left;
    position: relative;
    overflow-y: scroll;
    line-height: 10px; /*2023-09-20*/
    /*background-color: red;*/
}



.view_all_appointments {
    /* Layout Properties */
    /*top: 498px;
    left: 202px;
    width: 81px;
    height: 8px;*/
    text-align: left;
    font: normal normal normal 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    height: auto;
    line-height: 0.8;
    bottom: 30px;
    /*background-color: blue;*/
}

/*BookingSummary page end*/

#divSickNotes {
    width: 98%;
    height: 90%;
    text-align: center;
    margin: 0px auto;
    display: inline-block;
}

.LoggedOutHdr {
    text-align: center;
    height: 75px;
    width: 100%;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}


.LoggedOutLogo {
    height: 68px;
    width: 190px;
    top: 10px;
}


.LoggedOutLogoImg {
    height: 68px;
    width: 190px;
    top: 10px;
}

.LoggedOutRounded {

    width: 80%;
    height: 50%;
    margin: 0px auto;
    border-radius: 12px 12px 6px 6px;
    overflow-y: hidden;
    background-color: #FAFAFB; /*same as readonly*/
    display: inline-block;
    position: relative;
}

.LoggedOutBody {
    text-align: center;
    height: 90%;
    width: 90%;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    margin: 0px auto;
}


.timeout {
    color: white;
    font: normal normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
}

#divXRays {
	/*background-color: green;*/
        overflow-y: auto;
        height: 90%;
}

#frmReminder {
        overflow-y: auto;
}


/*2024-06-13 start shares*/


.CorrectInfoBody {
    height: 90%;
    width: 90%;
    text-align: center;
    vertical-align: middle;
    margin: 0px auto;
    /*
        position: relative;
        display: block;
            */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.CorrectInfoInstr {
    margin: 0px auto;
    height: 10%;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    text-align: center;
    line-height: 9px;
    opacity: 1;
}


.CorrectInfoOldNew {
    margin: 0px auto;
    height: 70%;
    vertical-align: middle;
    /*display: flex;
    flex-direction: column;*/
    /*justify-content: center;*/
    align-items: center;
    text-align: center;
    width: 100%;
    /*background-color: red;*/
}


.CorrectInfoType {
    margin: 0px auto;
    height: 20%;
    /*
    vertical-align: middle;*/
    position: relative;
    /*display: flex;
    flex-direction: column;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    text-align: center;
    width: 100%;
    /*clear: both;*/
    /*background-color: yellow;*/
}

#CBxLstCorrectInfoType {
    margin: 0px auto;
    /*position: relative;
    background-color: pink;*/
}

.CorrectInfo {
    margin: 0px auto;
    height: 12%;
    /*text-align: center;*/
    vertical-align: middle;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    width: 100%;
    clear: both;
    /*background-color: green;*/
    padding: 2px;
}


.divLbl {
    text-align: right;
    margin: auto;
    width: 23%; /*2024-08-09*/
    height: 100%;
    /*
    display: flex;
    flex-direction: column;
        */
    float: left;
    display: inline-block;
    /*position: absolute;*/
    /*border: 1px solid black;*/
    background-color: #FAFAFB;
    color: #333333;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    margin-bottom: 2px;
    margin-right: 10px;
    /*border: 1px solid red;*/
    vertical-align: middle;
}


.divInput {
    text-align: left;
    margin: 0px auto;
    width: 72%; /*2024-08-09*/
    height: auto;
    overflow: visible;
    vertical-align: middle;
    float: right;
    display: inline-block;
    /*border: 1px solid red;*/
    background-color: #FAFAFB;
   
    font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}

/*2024-08-12*/

.CorrectInfoCellNo {
    margin: 0px auto;
    height: 24%;
    vertical-align: middle;
    width: 100%;
    clear: both;
    /*background-color: green;*/
    padding-top: 3px;
}

.divCellNoLbl {
    text-align: right;
/*    margin: auto;*/
    width: 23%; /*2024-08-09*/
    height: 100%;

    float: left;
    display: inline-block;
   
    background-color: #FAFAFB;
    color: #333333;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    /*margin-bottom: 2px auto;*/
    margin-right: 10px auto;
    /*border: 1px solid orange;*/
    vertical-align: middle;
    /*top: 2px;*/
    padding-top: 5px;
}
.divCellNoInput {
    text-align: left;
    margin: 0px auto;
    width: 72%; /*2024-08-09*/
    height: 100%;
    /*overflow: visible;*/
    vertical-align: middle;
    float: right;
    display: inline-block;
    /*border: 1px solid greenyellow;*/
    background-color: #FAFAFB;
   
    font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}


.CorrectInfoCellNoCountryInput {
    text-align: left;
    vertical-align: middle;
    margin: 0px auto;
    width: 95%;
    /*display: flex;
    flex-direction: column;*/
    float: left;
    /*border: 1px solid blue;*/
    background-color: #FAFAFB;
    font: normal normal normal 10px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    line-height: 16px;
    height: 48%;
    /*margin-bottom: 2px;*/
    position: relative;
    /*top: 2px;*/
    padding-bottom:4px;
}



.CorrectInfoCellNoInput {
    text-align: left;
    margin: 0px auto;
    width: 100%;
    /*position: absolute;*/
    /*display: flex;
    flex-direction: column;*/
    float: right;
    /*border: 1px solid aqua;*/
    background-color: #FAFAFB;
    font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    /*line-height: 16px;*/
    opacity: 1;

    height: auto;/*had to set this to make the cell no text boxes the same height as the combo box*/
    position: relative;
   
}


.WhiteSpaceNoBorder {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: none;
    opacity: 1;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    font-size: 10px;
    
}




.CorrectInfoIDPassport {
    margin: 0px auto;
    height: 70%;
    vertical-align: middle;
    /*display: flex;
    flex-direction: column;*/
    /*justify-content: center;*/
    align-items: center;
    text-align: center;
    width: 100%;
    /*background-color: red;*/
}


.CorrectInfoNarrower {
    margin: 0px auto;
    height: auto;
    padding: 10px 0px 0px 0px;
    /*text-align: center;*/
    vertical-align: middle;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    width: 80%;
    clear: both;
    /*background-color: green;*/
}


.divLbl50 {
    text-align: right;
    margin: auto;
    width: 40%;
    /*height: 100%;*/
    /*
    display: flex;
    flex-direction: column;
        */
    float: left;
    display: inline-block;
    /*position: absolute;*/
    /*border: 1px solid black;*/
    background-color: #FAFAFB;
    color: #333333;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    margin-bottom: 2px;
    margin-right: 10px;
    /*border: 1px solid red;*/
    vertical-align: middle;
}


.divInput50 {
    text-align: left;
    margin: 0px auto;
    
    /*margin-top: 20px;*/
    width: 54%;
    /*height: 100%;*/
    vertical-align: middle;
    /*

    display: flex;
    flex-direction: column;*/
    float: right;
    display: inline-block;
    /*border: 1px solid orange;*/
    background-color: #FAFAFB;
    /*    background-color: orange;*/
    font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}




.divLbl100 {
    /*text-align: right;*/
    margin: 5px auto;
    padding: 10px 0px 0px 0px;
    width: 100%;
    /*height: 20px;*/
    /*
    display: flex;
    flex-direction: column;
        */
    float: left;
    display: inline-block;
    /*position: absolute;*/
    /*border: 1px solid black;*/
    background-color: #FAFAFB;
    color: #333333;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    /*margin-bottom: 2px;
    margin-right: 10px;*/
    /*border: 1px solid red;*/
}


.divInput100 {
    text-align: center;
    margin: 0px auto;
    width: 100%;
    /*height: 25px;*/
    /*
    display: flex;
    flex-direction: column;*/
    float: right;
    display: inline-block;
    /*border: 1px solid pink;*/
    background-color: #FAFAFB;
    font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}


.CorrectionFile {
    height: 90%;
    width: 90%;
    text-align: center;
    vertical-align: middle;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.CorrectionFileLbl {
    height: 8%; /*2023-11-02*/
    margin: 0px auto;
    /*margin-bottom: 8px;*/ /*2023-11-02*/
}


/*Client*/


.ShareBlock {
    width: 90%;
    height: 600px;
    background: #234465 0% 0% no-repeat padding-box;
    border-radius: 6px;
    text-align: center;
    font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    color: white;
    opacity: 1;
    margin-top: 15px;
    margin-left: 20px;
    overflow: hidden;
}

.ShareBlockFrame {
    margin: 2px auto;
    width: 95%;
    height: 95%;
    background-color: transparent;
    border: none;
    font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    text-align: center;
}

.ShareDetPage {
    background-color: transparent;
    height: 98%;
    width: 98%;
    text-align: center;
    vertical-align:middle;
    position: relative;
    margin: 0px auto;
}

#divShareDet {
    height: 97%;
    width: 97%;
    background-color: transparent;
    text-align: center;
    position: relative;
    margin: 0px auto;
    top: 0px;
    
}


.ShareActions {
    background-color: transparent;
    width: 40%;
    /*height: 100px;*/
    margin: 0px auto;
    /*display: block;*/
    float: right;
    height: 65px;
/*    position: relative;
    right: 0px;*/
    text-align: right;
   
}



.ShareActionsFrame {
    border: none;
    background-color: transparent;
    /*position: absolute;*/
    /*display: none;*/
    height: 100%;
    width: 100%;
    
    
}


.Slider {
    margin: 2px auto;
    /*margin-right: 10%;*/
    margin-top: 10%;
    /*height: 16px;
    width: 100px;*/
    background-color: transparent;
    display: inline-block;
    /*float: right;*/
    /*position: absolute;*/
    width: 100%;
    height: 23px;
}


.SliderBtn {
    margin: 0px auto;
    /*margin-right: 10%;*/
    /*margin-top: 2%;*/
    /*height: 16px;*/
    width: 25%;
    background-color: transparent;
    display: block;
    float: left;
    position: relative;
    text-align: right;
}

.SliderText {
    /*margin: 0px auto;*/
    background-color: transparent;
    /*border:  1px solid aqua;*/
    color: white;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    float: left;
    /*width: 30%;*/
    /*position: absolute;*/
    text-align: left;
    display: inline-block;
    margin-left: 20%;
   
}

.SliderLeft {
    margin: 0px auto;
    margin-right: 20%;
    border-radius: 10px 10px 10px 10px;
    height: 16px;
    width: 33px;
    background-color: #6383A9;
    display: block;
    float: left;
    
}

.SliderBtnLeft {
    margin: 1px auto;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 8px 8px 8px 8px;
    height: 14px;
    width: 14px;
    /*background-color: #FAFAFB;*/
    background-color: orange;
    position: relative;
    overflow: visible;
    display: block;
    float: left;
    /*z-index: 1;*/
    vertical-align: middle;
    justify-content: center;
    cursor: pointer;
}


.SliderRight {
    margin: 0px auto;
    margin-right: 20%;
    border-radius: 10px 10px 10px 10px;
    height: 16px;
    width: 33px;
    background-color: #6383A9;
    border: none;
    display: block;
    float: left;
    
}


.SliderBtnRight {
    margin: 1px auto;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 10px 10px 10px 10px;
    height: 14px;
    width: 14px;
    /*background-color: #FAFAFB;*/
    background-color: greenyellow;
    position: relative;
    overflow: visible;
    display: block;
    float: right;
    /*z-index: 1;*/
    vertical-align: middle;
    justify-content: center;
    cursor: pointer;
}



.CopyLink {
    text-align: left;
    /*margin-right: 10%;*/
    /*margin-top: 40px auto;*/
    /*margin-left: 15% auto;*/
    /*background-color: yellow;*/
    display: block;
    /*float: left;*/
    width: 100%;
    position: absolute;
    left: 0px;
    height: 20px;
    background-color: transparent;
    vertical-align: top;
}


.ActionSpacer {
    margin: 0px auto;
    width: 39%;
    background-color: transparent;
    display: block;
    float: left;
    position: relative;
    height: 20px;
}

.CopyLinkBtn {
    /*margin: 10px auto;*/
    background-color: transparent;
    color: white;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    float: left;
    width: 50%;
    /*position: relative;*/
    text-align: left;

}


.copy-link-btn-as-text {
    /*text-align: center;*/
    letter-spacing: 0px;
    color: white;
    border: 0px;
    /*top: 25%;*/
    /*position: relative;*/
    background-color: transparent;
    font: normal normal normal 10px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    cursor: pointer;
}


.ShareMetaData {
    /*text-align: center;*/
    background-color: transparent;
    width: 55%;
    float: left;
    margin: 6px auto;
    display: block;
    /*position: absolute;*/
    
    /*overflow: auto;*/
    height: 110px;
    
}



.ShareMetaDataLbl {
    text-align: right;
    background-color: transparent;
    width: 50%;
    margin-right: 4px;
    display: flex;
    margin-bottom: 4px;
}



.ShareMetaDataInput {
    text-align: left;
    background-color: transparent;
    width: 96%;
    margin-right: 4px;
    display: flex;
    margin-bottom: 4px;
    position: relative;
}


.ShareMetaDataInputLbl {
    
    /*height: 30%;*/
    /*margin: 0px auto;*/
    /*width: 50%;*/
    background-color: transparent;
    color: white;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    /*line-height: 12px;*/
    right: 50px;
}


.ShareMenu {
    width: 75%;
    position: relative;
    margin: 0px auto;
    /*margin-left: 12%;*/
    margin-top: -2px;
    float: left;
    background-color: transparent;
    display: inline-block;
}



.ShareWidgets {
    text-align: left;
    display: inline-block;
    /*overflow: scroll;*/
    width: 100%;
    margin: 2px auto;
    margin-top: 10px;
    /*margin-left: 0%;*/
    position: relative;
    /*border-top: 2px solid white;*/
    float: left;
    background-color: transparent;
    color: white;
}


/*User*/



.ShareWith {
    text-align: left;
    height: 98%;
    width: 98%;
    margin: 2px auto;
    position: relative;
    
    /*background-color: deeppink;*/
    color: white;
}



.ShareWithFrame {
    border: none;
    /*background-color: greenyellow;*/
    width: 60%;
    /*width: 74%;
    height: 98%;
    margin: 0px auto;
    position: relative;
    text-align: left;*/
    /*display: none;*/
}

.ShareWithPage {
    /*background-color: blue;*/
    height: 100%;
    width: 98%;
    margin: 0px auto;
    text-align: center;
    position: relative;
    /*margin-left: 100px;*/
    /*display: none;*/
}

.ShareWithBody {
    text-align: center;
    margin: 0px auto;
    /*/*background-color: yellow;*/*/
    position: relative;
    height: 90%;
    width: 100%;
    
}



.ShareDet {
    text-align: center;
    display: block;
    background-color: #FAFAFB;
    overflow: auto;
    display: block;
    height: 65%;
    width: 100%;
    margin: 0px auto;
    border-radius: 12px 12px 6px 6px;
    position: relative;
}



.ShareDetBody {
    height: 90%;
    width: 90%;
    text-align: center;
    /*display: block table-cell;*/
    vertical-align: middle;
    margin: 10px auto;
    position: relative;
    background-color: transparent;
}



.ShareInputDet {
    height: 45%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
   
    
    /*background-color: yellow;*/
}



.ShareInputLbl {
    text-align: left;
    height: 10%; /*2023-11-02*/
    margin: 0px auto;
    width: 90%;
    background-color: #FAFAFB;
    color: #333333;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
    letter-spacing: 0px;
    opacity: 1;
    line-height: 13px;
}

.ShareInput {
    text-align: left;
    height: 10%; /*2023-11-02*/
    margin: 0px auto;
    width: 90%;
    position: relative;
}



/*2024-06-13 End*/



/*2023-10-14 added device*/
@media screen and (max-device-width: 700px) and (orientation: landscape) {
/*@media (min-device-width: 800px) and (min-device-height: 640px) {*/


    
    .burger-menu {
        display: none;
    }
  

    .MainLogin {
        overflow: auto;
        display: block;
        height: 100%;
        width: 100%;
        /*background-color: yellow;*/
        margin: 0px auto;
        text-align: center;
    }

    .LoginHdr {
        height: 100%;
        width: 60px;
        /*text-align: left;
        vertical-align: middle;*/
        display: block;
        float: left;
        margin: 0px auto;
        /*background-color: yellowgreen;*/
    }

    .LoginLogo {
        width: 80px;
        height: 100%;
        float: left;
        /*background-color: red;*/
    }

    .LoginLogoImg {
        top: 90px;
        height: 43px;
        right: 40%;
        width: 146px;
        transform: rotate(-90deg);
        position: relative;
        margin: 0px auto;
    }

    /*
    .Login {
        overflow: auto;
        display: inline-block;
        position: relative;
        height: 80%;
        width: 75%;
        float: right;
        margin: 20px auto;
        margin-right: 5%;
    }*/

    .Login {
        overflow: auto;
        display: none; /*inline-block;*/
        position: relative;
        height: 80%;
        width: calc(100% - 100px);
        float: right;
        margin: 20px auto;
        margin-right: 5%;
        /*background-color: red;*/
    }

    .LoginBody {
        height: 95%;
        width: 95%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        position: relative;
        /*        float: right;*/
    }



    .LoginWelcome {
        /*display: none;*/
        height: auto;
        margin: 0px auto;
        width: 98%;
    }

    .LoginOTPNotification {
        /*display: none;*/
        height: auto;
        margin-bottom: 10px;
        width: 98%;
    }


    .LoginLogin {
        margin: 5px auto;
        height: 20%;
        width: 96%;
        display: none;
    }


    .LoginInput {
        height: auto;
        width: 45%;
        float: left;
        /*
        background-color: green;
        justify-content: center;
        align-content: center;*/
        margin: 0px auto;
        position: relative;
        /*border: 1px solid red;*/
    }

    .LoginCountryLbl {
        text-align: left;
        margin: 10px auto;
        width: 100%;
        height: auto;
        display: block;
        /*border: 1px solid red;*/
        float: left;
        background-color: #FAFAFB;
        color: #333333;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        margin-bottom: 2px;
    }

    .LoginCountry {
        text-align: left;
        margin: 0px auto;
        width: 98%;
        height: auto;
        display: block;
        float: left;
        /*border: 1px solid green;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
        margin-bottom: 10px;
    }

    .LoginIDPassportLbl {
        text-align: left;
        margin: 0px auto;
        width: 100%;
        height: auto;
        display: block;
        float: left;
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        margin-bottom: 2px;
    }

    .LoginIDPassport {
        text-align: left;
        margin: 0px auto;
        width: 98%;
        height: auto;
        display: block;
        float: left;
        /*border: 1px solid orange;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }



    .LoginCaptchaInstr {
        text-align: left;
        height: 10%;
        margin: 0px auto;
        width: 52%;
        position: relative;
        color: black;
        left: 2%;
        float: right;
    }

    .LoginCodes {
        text-align: left;
        height: 60%;
        width: 50%;
        float: right;
        margin: 0px auto;
        position: relative;
        /*margin-right: 10px;*/
        /*
        background-color: yellow;
        visibility: hidden;
        */
    }


    .LoginCaptcha {
        text-align: left;
        height: 70%;
        margin: 0px auto;
        width: 50%;
        position: absolute;
        float: right;
    }


    .LoginBtns {
        height: 10%;
        margin: 0px auto;
        width: 53%;
        position: absolute;
        text-align: left;
        float: right;
        bottom: 0px;
    }
    /*
    #BtnSendCode {
        bottom: 15%;
        position: absolute;
        left: 25%;
    }
*/



    .LoginOTPBtns {
        height: 20%;
        margin: 0px auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }




    .HomeHeader {
        text-align: center;
        height: 45px;
        width: 100%;
        margin: 0px auto;
    }


    .HomeLogo {
        height: 43px;
        width: 126px;
    }


    .HomeUser {
        text-align: center;
        height: 90%;
        width: 20%;
        display: inline-block;
        float: right;
        margin-right: 5px auto;
        background-color: transparent;
    }


    .LoginOrientationMsg {
        text-align: center;
        height: 50%;
        width: 50%;
        /*margin-top: 30px auto;*/
        margin: 50px auto;
        background-color: #FAFAFB;
        border-radius: 12px 12px 6px 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        color: #333333;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        line-height: 14px;
        opacity: 1;
    }

    
    .HomeOrientationMsg {
        text-align: center;
        height: 50%;
        width: 50%;
        margin-top: 10% auto;
        margin: 10px auto;
        background-color: #FAFAFB;
        border-radius: 12px 12px 6px 6px;
        display: none;
        justify-content: center;
        align-items: center;

        color: #333333;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        line-height: 14px;
        opacity: 1;
    }
        



    .HomeRounded {
        width: 90%;
        height: 78%;
        margin: 0px auto;
        border-radius: 12px 12px 6px 6px;
        /*background-color: wheat;*/
        overflow-y: hidden;
        display: none;
    }

    .divWrapperMaxWidgetsWithScroll {
        /*max width of widgets e.g. limited to 2 or 5 widgets per line*/
        width: 70%;
        /*height: auto;*/
        text-align: center;
        margin: 0px auto;
        /*background-color: orange;*/
        /*overflow: auto;*/
        overflow-y: auto;
        height: 70vh; /*2023-09-21 must set the height for the scroll bar to show*/
        border: 0px;
    }

    .divWrapperFewWidgetsWithScroll {
        width: 80%;
        height: calc(70vh - 55px); /*2023-09-21 must set the height for the scroll bar to show*/
        text-align: center;
        margin: 0px auto;
        background-color: transparent;
        /*overflow: auto;*/
        overflow-y: auto;
        border: 0px;
        display: block;
        position: relative;
        top: auto;
    }



    .divDet {
        height: 100%;
        width: 100%;
        text-align: center;
        margin: 0px auto;
        border-radius: 12px 12px 6px 6px;
        position: relative;
        overflow: hidden;
        background-color: transparent;
    }

    .HomeDetBody {
        height: 100%;
        width: 43%;
        margin: 0px auto;
        border-radius: 0px 0px 0px 0px;
        overflow-y: hidden;
        float: right;
        display: inline-block;
        position: relative;
        /*
        background-color: lightgreen;
        visibility: hidden;
        */
    }

    .HomeDetBodyWithMenuBarOnly {
        height: 90%;
        width: 98%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        /*position: relative;*/
        overflow-y: scroll;
        /*background-color: navy;*/
        /*display: flex;*/
        float: right;
        display: inline-block;
        position: relative;
    }

    #divBody {
        height: 90%;
        width: 100%;
        top: 5px;
        overflow-y: hidden;
        /*background-color: pink;
        visibility: hidden;*/
    }

    .HomeBottom {
        text-align: center;
        height: 90%;
        width: 55%;
        float: left;
        overflow: hidden;
        display: block;
        /*bottom: 220px;*/
        position: relative;
        /*background-color: lightblue;*/
        /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
        /*box-shadow: 0px 12px 24px #0000000F;*/
        opacity: 1;
        margin: 20px auto;
        border-radius: 0px 0px 6px 6px;
        align-items: center;
    }


    .HomeBottomWithMenuBarOnly {
        top: 0%;
        text-align: center;
        height: 90%;
        width: 15%;
        float: left;
        overflow: hidden;
        display: none;
        /*
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        */
        /*bottom: 220px;*/
        position: relative;
        background-color: navy;
        /*background-color: #FAFAFB;*/
        /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
        /*box-shadow: 0px 12px 24px #0000000F;*/
        opacity: 1;
        margin: 0px auto;
    }

    #divAppointments {
        text-align: center;
        height: 99px;
        width: 100%;
        overflow: hidden;
        position: absolute;
        float: left;
        top: 0px;
        margin: 0px auto;
        /*background-color: greenyellow;*/
        z-index: 0;
    }


    .card {
        /*top: 0px;
         left: 0px;
    
         border-radius: 6px;

         position: absolute;*/
        height: 70px;
        width: 70px;
        top: 6px; /*2023-10-05*/
        left: 0px; /*2023-10-05*/
        position: absolute;
        border-radius: 6px;
    }

    .add {
        height: 48px;
        width: 48px;
        top: 13px; /*2023-10-05*/
        left: 10px; /*2023-10-05*/
        position: absolute;
        opacity: 1;
    }



    .card-text {
        top: 64px; /*2023-10-06*/
        left: 7px; /*2023-10-09*/
        color: #333333;
        text-align: center;
        font: normal normal normal 6px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        position: absolute;
    }


    /*2023-10-14:  changed from #divScroll to .divScroll*/
    .divScroll {
        text-align: center;
        height: 60px;
        width: 100%;
        top: 100px;
        float: left;
        margin: 0px auto;
        position: absolute;
        /*background-color: navy;*/
        z-index: 0;
    }

    /*2023-10-14 Added*/
    .divScrollWrapper {
        height: 100%;
        width: 100%;
        /*width: calc(100vw + 500px);*/
        overflow-x: auto;
        overflow-y: hidden;
        position: absolute;
        margin: 0px auto;
        text-align: center;
        flex-wrap: nowrap;
        display: flex;
        flex-shrink: 0;
    }

    /*#divMenu {
        float: right;
    }*/


    .HomeMenuBar {
        /*The appointments, scroll menu and the menu bar are visible*/
        height: 80%;
        width: 15%;
        top: 2px;
        /*overflow: hidden;*/
        border-radius: 0px 0px 6px 6px;
        margin: 0px auto;
        float: right;
        z-index: 0;
        position: relative;
        display: none;
        /*background-color: red;*/
    }

    .HomeMenuBarOnly {
        /*Only the menu bar is visible*/
        display: none;
        height: 100%;
        width: 1%;
        /*top: 2px;*/
        overflow: hidden;
        border-radius: 0px 0px 0px 0px;
        margin: 0px auto;
        float: left;
        /*background-color: green;*/
        z-index: 0;
        position: relative;
        /*2023-10-25
        display: block;
        display: flex;
        flex-wrap: wrap;
        */
        /*
        border: 1px solid red;
        background-color: red;
        */
    }
    /*
    .iFrmWidget {
        
       width: 100%;
        height: 90%;
        overflow-y: hidden;
        border: 0px;
             
    }
*/


    .WidgetPage {
        width: 100%;
        height: auto; /*2023-10-19 added was 90% in aspx page*/
        text-align: center;
        overflow-y: hidden;
        /*background-color: aqua;
        visibility: hidden;*/
    }

    #frmWidgets {
        overflow-y: hidden;
    }


    .divWrapperWithScroll {
        width: 90%;
        text-align: center;
        margin: 0px auto;
        /*background-color: orange;*/
        overflow-y: auto;
        height: 95vh; /*2023-09-21 must set the height for the scroll bar to show*/
        border: 0px;
    }



    .divWrapperFewWidgetsWithScroll {
        float: left;
        width: 100%;
        height: auto;
        text-align: center;
        margin: 0px auto;
        /*background-color: orange;*/
        /*overflow: auto;*/
        overflow-y: hidden;
        height: 100%; /*2023-09-21 must set the height for the scroll bar to show*/
        border: 0px;
        position: absolute;
        display: flex;
        justify-content: center;
    }


    #IFrmWidgetMenu {
        border-radius: 0px 0px 6px 6px;
        display: block;
        height: 100%;
        width: 100%;
        border: 0;
        text-align: center;
        overflow: hidden;
        /*background-color: black;*/
        float: right;
        top: 0px;
        position: absolute;
    }

    .thumbnail-btn {
        width: 98%;
        height: 50px; /*2023-08-04? test this was 100px*/
        margin: auto;
        background: #fafafb 0% 0% no-repeat padding-box;
        opacity: 1;
        color: white;
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-12)/var(--unnamed-line-spacing-30) var(--unnamed-font-family-product-sans);
        text-align: center;
        letter-spacing: 0px;
    }

    .widget-btn {
        height: 45px; /*2023-08-04? test this was 85px*/
        width: 90%;
        font-weight: normal;
        font-style: normal;
        font-size: 13px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*font-size: 10px;
        font-family: */
        cursor: pointer;
        border-radius: 8px;
        opacity: 1;
        text-align: center;
        margin: 0px auto;
        vertical-align: middle;
        line-height: 45px; /*Needed to center the text vertically*/
        opacity: 1;
        letter-spacing: 0px;
        position: absolute;
    }
    /*2023-11-01: divWrapperWithMenuBar below applies in general not only to landscape for some unknown reason???*/
    /*    
    .divWrapperWithMenuBar {
        width: 280px;
        height: auto;
        display: flex;
        flex-direction: row;
        background-color: black;
        border: 1px solid black;
    
    }
   
    .divWrapperWithMenuBar {
        visibility: hidden;
    }
    */
    /*
    .thumbnail_menubar {
        display: block;
        float: left;
        width: 40px;
        height: 40px;
        cursor: pointer;
        font-size: 7px;
        line-height: 9px;
        
    }

    */

    .thumbnailspacer {
        width: 100%;
        height: 0px;
    }


    /*2023-09-18*/
    .thumbnailimgdiv_menubar {
        width: 100%;
        height: 23px;
    }

    /*2023-09-18*/
    .thumbnailimg_menubar {
        width: 20px;
        height: 20px;
    }


    .AppointmentInput {
        width: 100%;
        height: 65%;
        /*background-color: blue;*/
        overflow: auto;
    }

    .NewAppointmentInput {
        overflow-y: auto;
        width: 100%;
        height: 60%;
    }


    .AppointmentMsg {
        width: 98%;
        height: 10px;
        line-height: 10px;
        background-color: yellow;
        color: white;
        font-size: 9px;
        border-style: none;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

    .ExistingAppointments {
        width: 100%;
        margin: 0px auto;
        text-align: center;
        display: block;
        position: relative;
        height: 80%;
        overflow-y: auto;
    }



    .thumbnail {
        background-color: #234465;
        float: left;
        width: 90px;
        height: 80px;
        /*margin: 0px auto;*/
        border-radius: 5%;
        cursor: pointer;
        /*border: 2px solid orange;*/
        opacity: 1;
        color: white;
        text-align: center;
        letter-spacing: 0px;
        font-weight: normal;
        font-size: 10px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }
    /*2023-10-27*/
    .thumbnailimgdiv {
        width: 100%;
        height: 50%;
        text-align: center;
        margin-top: 4px;
        /*background-color: yellow;*/
    }

    .thumbnailimg {
        width: 33px;
        height: 33px;
        text-align: center;
    }


    .thumbnailhdr {
        width: 100%;
        height: auto;
        bottom: 1px;
    }

    .Demographics {
        width: 95%;
        height: 75%;
        margin: 0px auto;
        /*background-color: pink;*/
        overflow-y: auto;
        overflow-x: hidden;
    }


    #divPage {
        height: auto;
        /*background-color: pink;*/
        overflow-y: auto;
    }

    .LoggedOutRounded {
        display: none;
     }
/*

    .LoggedOutHdr {
        height: 100%;
        width: 60px;
        display: block;
        float: left;
        margin: 0px auto;
        background-color: red;
        
    }

    .LoggedOutLogo {
        top: 90px;
        height: 43px;
        right: 40%;
        width: 146px;
        transform: rotate(-90deg);
        margin: 0px auto;
    }

*/
    .LoggedOutOrientationMsg {
        text-align: center;
        height: 50%;
        width: 65%;
        margin-top: 10% auto;
        margin: 10px auto;
        background-color: #FAFAFB;
        border-radius: 12px 12px 6px 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*float: right;*/

        color: #333333;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        line-height: 14px;
        opacity: 1;
    }

/*
    .LoggedOutHdr {
        text-align: center;
        height: 90%;
        width: 160px;
        margin: 0px auto;
        display: inline-block;
        left: 0px;
        background-color: transparent;
        position: absolute;
    }


    .LoggedOutLogo {
        height: 53px;
        width: 156px;
        top: 90px;
        left: 0px;
        transform: rotate(-90deg);
        position: absolute;
    }


    .LoggedOutRounded {
        float: right;
        width: calc(100% - 320px);
        height: 70%;
        margin: 0px auto;
        text-align: center;
        border-radius: 12px 12px 6px 6px;
        overflow-y: hidden;
        background-color: #FAFAFB; 
        display: flex;
        justify-content: center;
        align-items: center;
        right: 160px;
        position: absolute;
    }

    .LoggedOutBody {
        text-align: center;
        height: 90%;
        width: 90%;
        vertical-align: middle;
        overflow: hidden;
        position: absolute;
        margin: 0px auto;
    }*/
}

/*Laptop - larger*/
/*@media (min-device-width: 400px) and  (max-device-height: 1000px) and (orientation: landscape) {*/
@media (min-device-width: 400px) and  (max-device-height: 1000px) and (min-device-height: 801px) and (orientation: landscape) {

    
    .LoginLogo {
        margin: auto 0px;
        margin-bottom: 2%;
        margin-top: 2%;

    }

    .Login {
        overflow: auto;
        height: calc(100% - 198px); 
        width: 40%;
       
       
    }


    .LoginLogin {
        margin-bottom: 10px; 
        margin-top: 0px;
    }

    .LoginBody {
        height: 90%;
        width: 100%;
       
        display: block table-cell;
        
        margin: 0px auto;
        position: relative;
    }

    .LoginWelcome {
        margin-top: 12px;
    }

    .LoginOTPNotification {
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        height: 25px;
    }

    .LoginInput {
        height: 110px; 
    }

    .LoginLbl {
        height: 14px;
    }

    .LoginTxt {
        height: 14px;
    }


    .LoginLblRightAlgn {
        height: 14px; 
        margin-right: 19%;
    }

    .LoginTermsAndConditions {
  
        height: 16px;
        margin-bottom: 3px;
    }

    .LoginCaptchaInstr {
        height: 14px;
        margin-left: 9%;
        display: block;
        margin-top: 5px;
    }

    .LoginCodes {
        height: 40%;
        width: 90%;
        
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        
        bottom: 20px;
       
    }

    

    .LoginCaptcha {
        text-align: left;
        width: 91%;
        margin-top: 5px;
        top: 0px;
    }

    .LoginBtns {
        height: auto;
        margin-top: 2px;
    }

    .LoginOTPBody {
        height: 90%;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        /*
        position: relative;
        display: block;
            */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .LoginOTPHdr {
        margin: 0px auto;
        height: 20%;
        text-align: center;
        vertical-align: middle;

        line-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
     
    }

    .LoginOTPInstr {
        margin: 0px auto;
        height: 15%;
        text-align: center;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

    .LoginEnterOTPMsg{
      
      height: auto;
      margin: 0px auto;
    }


    .LoginOTP{
      height: auto;
      
      margin: 0px auto;
    }

    .LoginOTPBtns {
        height: 30%;
        margin: 0px auto;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .LoginOTPMsg {
        height: 20%;
        margin: 0px auto;
        
        display: block;
        text-align: left;
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

    #divUserNameLbl {
      margin-left: 55px;
    }

    #divUserName {
      margin-left: 55px;
    }



    #divUserIdLbl {
      margin-left: 55px;
    }


    #divUserId {
      margin-left: 55px;
    }

    #divForgotUserName {
        height: 48%;
        /*margin-left: 20px; */
        width: 90%;
        text-align: left;
        margin-left: 4%;
        /*border: 1px solid red;*/
    }


    /*2024-06-13 start shares*/

    .CorrectInfoBody {
        height: 90%;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

  
    .CorrectInfoInstr {
        margin: 0px auto;
        height: 10%;
        text-align: center;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        text-align: center;
        line-height: 9px;
        opacity: 1;
    }


    .CorrectInfoOldNew {
        margin: 0px auto;
        height: 70%;
        vertical-align: middle;
        /*display: flex;
        flex-direction: column;*/
        /*justify-content: center;*/
        align-items: center;
        text-align: center;
        width: 100%;
        /*background-color: red;*/
    }



    .CorrectInfoType {
        margin: 0px auto;
        height: 20%;
        /*
        vertical-align: middle;*/
        position: relative;
        /*display: flex;
        flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        text-align: center;
        width: 100%;
        /*clear: both;*/
        /*background-color: yellow;*/
    }

    #CBxLstCorrectInfoType {
        margin: 0px auto;
        /*position: relative;
        background-color: pink;*/
    }

    .CorrectInfo {
        margin: 0px auto;
	      height: 20%;
	      /*text-align: center;*/
	      vertical-align: middle;
	      /*display: flex;*/
	      /*flex-direction: column;*/
	      /*justify-content: center;*/
	      /*align-items: center;*/
	      width: 100%;
	      clear: both;
	      /*background-color: green;*/
    }


    .divLbl {
        text-align: right;
        margin: auto;
        width: 30%;
        height: 100%;
        /*
        display: flex;
        flex-direction: column;
        */
        float: left;
        display: inline-block;
        /*position: absolute;*/
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 10px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        margin-bottom: 2px;
        margin-right: 10px;
        /*border: 1px solid red;*/
        vertical-align: middle;
    }

  .divInput {
	text-align: left;
	margin: 0px auto;
	width: 65%;
	height: 100%;
	vertical-align: middle;
	
	float: right;
	display: inline-block;
        /*border: 1px solid orange;*/
	background-color: #FAFAFB;
	
	font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
	letter-spacing: 0px;
	color: #333333;
	opacity: 1;
  }

/*2024-08-12*/

    .CorrectInfoCellNo 
    {
        margin: 0px auto;
	height: 20%;
	vertical-align: middle;
	width: 100%;
	clear: both;
    }

    .divCellNoLbl {
        text-align: right;
	margin: auto;
	width: 30%;
	height: 100%;
	
	float: left;
	display: inline-block;
	/*position: absolute;*/
	/*border: 1px solid black;*/
	background-color: #FAFAFB;
	color: #333333;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
	letter-spacing: 0px;
	opacity: 1;
	margin-bottom: 2px;

	vertical-align: middle;
  }

    .divCellNoInput {
        text-align: left;
	margin: 0px auto;
	width: 65%;
	height: 100%;
	vertical-align: middle;
	
	float: right;
	display: inline-block;
        /*border: 1px solid orange;*/
	background-color: #FAFAFB;
	
	font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
	letter-spacing: 0px;
	color: #333333;
	opacity: 1;
    }

    .CorrectInfoCellNoCountryInput {
        text-align: left;
        vertical-align: middle;
        margin: 0px auto;
        width: 92%;
        /*display: flex;
        flex-direction: column;*/
        float: left;
        /*border: 1px solid blue;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
        line-height: 16px;
        height: 48%;
        /*margin-bottom: 2px;*/
        position: relative;
        /*top: 2px;*/
        padding-bottom:4px;
    }



    .CorrectInfoCellNoInput {
        text-align: left;
        margin: 0px auto;
        width: 100%;
        /*position: absolute;*/
        /*display: flex;
        flex-direction: column;*/
        float: right;
        /*border: 1px solid aqua;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        /*line-height: 16px;*/
        opacity: 1;

        height: auto;/*had to set this to make the cell no text boxes the same height as the combo box*/
        position: relative;
   
    }



    .WhiteSpaceNoBorder {
        background: #FFFFFF 0% 0% no-repeat padding-box;
    
        border: none;
        opacity: 1;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        font-size: 10px;
    }


    .CorrectInfoIDPassport {
        margin: 0px auto;
        height: 70%;
        vertical-align: middle;
        /*display: flex;
        flex-direction: column;*/
        /*justify-content: center;*/
        align-items: center;
        text-align: center;
        width: 100%;
        /*background-color: red;*/
    }


    .CorrectInfoNarrower {
        margin: 0px auto;
        height: auto;
        padding: 10px 0px 0px 0px;
        /*text-align: center;*/
        vertical-align: middle;
        /*display: flex;*/
        /*flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        width: 60%;
        clear: both;
        /*background-color: green;*/
    }


    .divLbl50 {
        text-align: right;
        margin: auto;
        width: 50%;
        /*height: 100%;*/
        /*
        display: flex;
        flex-direction: column;
        */
        float: left;
        display: inline-block;
        /*position: absolute;*/
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 10px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        margin-bottom: 2px;
        margin-right: 10px;
        /*border: 1px solid red;*/
        vertical-align: middle;
    }


    .divInput50 {
        text-align: left;
        margin: 0px auto;
    
        /*margin-top: 20px;*/
        width: 40%;
        /*height: 100%;*/
        vertical-align: middle;
        /*

        display: flex;
        flex-direction: column;*/
        float: right;
        display: inline-block;
        /*border: 1px solid orange;*/
        background-color: #FAFAFB;
        /*    background-color: orange;*/
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }

    .divLbl100 {
        /*text-align: right;*/
        margin: 5px auto;
        padding: 10px 0px 0px 0px;
        width: 100%;
        /*height: 20px;*/
        /*
        display: flex;
        flex-direction: column;
        */
        float: left;
        display: inline-block;
        /*position: absolute;*/
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 10px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        /*margin-bottom: 2px;
        margin-right: 10px;*/
        /*border: 1px solid red;*/
    }


    .divInput100 {
        text-align: center;
        margin: 0px auto;
        width: 100%;
        /*height: 25px;*/
        /*
        display: flex;
        flex-direction: column;*/
        float: right;
        display: inline-block;
        /*border: 1px solid pink;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }


    .CorrectionFile {
        height: 90%;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .CorrectionFileLbl {
        height: 8%; /*2023-11-02*/
        margin: 0px auto;
        /*margin-bottom: 8px;*/ /*2023-11-02*/
    }

    .Contact {
       width: 90%;
     }

    .ContactImg {
        
        display: inline-block;
    }

    .ContactLbl {
    
        margin-left:  7%;
    
    }

    .HomeHeader {
        text-align: center;
        height: 80px;
        width: 100%;
        margin: 0px auto;
    }


    .HomeLogo {
        margin-top: 6px;
        height: 65px;
        width: 188px;
        right: 5px;


       /*background-color: blue;*/
    }


    .HomeUser {
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        text-align: left;
        height: 90%;
        width: 10%;
        display: inline-block;
        float: right;
        background-color: transparent;
        
        /*right: 0px;*/
 
    }
    .HomeRounded {
        
        /*height: 90%;*/
        height: calc(100% - 140px);
        display: flex;
        justify-content: center;
        align-content: center;
        overflow-y: hidden;
        width: 90%;
        margin: 0px auto;
        border-radius: 12px 12px 6px 6px;
        /*background-color: wheat;*/
    }

    
    .divDet {
        height: 95%;
        width: 95%;
        text-align: center;
        margin: 0px auto;
        border-radius: 12px 12px 6px 6px;
        position: relative;
        /*background-color: black;*/
        overflow: hidden;
    }

    .HomeDetBody {
        /*height: 10%; set in code so does not change here*/
        height: 68%;
        width: 100%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        overflow: hidden;
        
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: transparent;
    }

    /*.HomeDetBodyWithMenuBarOnly {

        width: 100%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        position: absolute;
        overflow-y: visible;
    
        display: flex;
    }*/


    .HomeDetBodyWithMenuBarOnly {
        height: 90%;
        width: 100%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        /*position: relative;*/
        overflow-y: hidden;
        
        /*display: flex;*/
        display: block; /*inline-block;*/
        position: relative;
        /*height: 20%;*/
        /*width: 100%;
            margin: 0px auto;*/
        /*border-radius: 12px 12px 0px 0px;*/
        /*position: relative;*/
        /*overflow: hidden;
            background-color: pink;*/
        /*scrollbar-color: transparent transparent;*/
        /*display: block;*/
        /*display: flex;*/
        /*float: right;*/
        /*display: none*/; /*inline-block;*/
        /*position: absolute;*/
        /*visibility: hidden;*/
    }


    #divBody {
        text-align: center;
        height: 100%;
        width: 100%;
        top: 13px;
        position: absolute;
        overflow-y: hidden; /*2023-10-17*/
        background-color: transparent;
        
        /*display: none;*/
        /*visibility: hidden;*/
    }


    .thumbnail-btn {
        width: 98%;
        height: 80px; /*2023-08-04? test this was 100px*/
        margin: auto;
        background: #fafafb 0% 0% no-repeat padding-box;
        /*background-color: saddlebrown;*/
        opacity: 1;
        color: white;
        font: normal normal bold 12px/30px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        text-align: center;
        letter-spacing: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .widget-btn {
        height: 70px; /*2023-08-04? test this was 85px*/
        width: 95%;
        font-weight: normal;
        font-style: normal;
        font-size: 12px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*font-size: 10px;
        font-family: */
        cursor: pointer;
        border-radius: 8px;
        opacity: 1;
        text-align: center;
        margin: 0px auto;
        vertical-align: middle;
        opacity: 1;
        /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-19) var(--unnamed-font-family-product-sans);*/
        letter-spacing: 0px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .HomeBottom {
        /*text-align: center;*/
        height: 32%;
        width: 100%;
        /*overflow: hidden;*/
        display: block;
        /*bottom: 220px;*/
        bottom: 8px; /*2023-10-06*/
        /*position: absolute;*/
        /*background-color: red;*/
        /*background-color: #FAFAFB;*/
        /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
        /*box-shadow: 0px 12px 24px #0000000F;*/
        opacity: 1;
        margin: 0px auto;
        border-radius: 0px 0px 6px 6px;
    }



    .HomeMenuBar {
        display: none;
        /*visibility: hidden;*/
    }

    .divScroll {
        /*text-align: center;*/
        height: 98%;
        width: 98%;
        top: 0px;
        /*right: 0px;*/
        /*background-color: navy;*/
        margin: 0px auto;
        /*display: flex;*/
        /*position: absolute;*/
        display: inline-block;
        position: relative;
        float: right;
        /*flex-wrap: wrap;*/
        /*justify-content: center;
        align-content: center;*/
        /*overflow-x: visible;
        overflow-y: hidden;*/
    }

    #IFrmScrollMenu {
        /*display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;*/
        height: 100%;
    }


    .divScrollWrapper {
        height: 90%;
        width: 100%;
        /*overflow-x: visible;*/
        overflow-y: auto;
        /*float: right;*/
        /*position: absolute;*/
        /*margin: 0px auto;*/
        text-align: center;
        white-space: wrap;
        /*background-color: greenyellow;*/
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 7px;
        align-items: center;
    }



    /*2023-11-08*/
    .thumbnail_scrollmenu {     /*2023-11-08*/
        margin-bottom: 3px;
        float: left;
        width: 70px;
        height: 70px;
        margin-right: 5px;
        cursor: pointer;
        font-size: 9px; /*2023-11-08*/
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        color: white;
        opacity: 1;
        line-height: 9px;
        font-weight: normal;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*white-space: pre-wrap;*/
        text-align: center;
    }


    .thumbnailspacer_scrollmenu {
        width: 100%;
        height: 0px;
    }



    /*2023-09-18*/
    .thumbnailimgdiv_scrollmenu {
        width: 100%;
        height: 30px;
        text-align: center;
        margin-bottom: 1px; /*2023-11-08*/
        margin-top: 5px; /*2023-11-08*/

    }

    /*2023-09-18*/
    .thumbnailimg_scrollmenu {
        width: 28px;
        height: 28px;
        /*height: 20px;*/
        
    }

   
    .thumbnailhdr_scrollmenu {
        margin: 5px auto;
        width: 96%;
        height: 28px;
        bottom: 2px;
        text-align: center;
        display: grid;
        align-items: center;

        /*
        align-items: center;
        justify-content: center;

        display: flex;
        flex-wrap: nowrap;
        */
    }


    .thumbnailhdr_small {
        
        /*margin: 5px auto;*/
        width: 90%;
        height: 30px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .thumbnailhdr_menubar {
        margin: 0px auto;
        width: 100%;
        height: 30px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        /*border: 1px solid red;*/

    }




    #divAppointments {
        text-align: center;
        height: 98%;
        width: 48%;
        overflow: hidden;
        position: absolute;
        left: 0px;
        top: 0px;
        margin: 0px auto;
        display: block;
        /*background-color: darkolivegreen;*/
        
    }

    #divCreateAppointment {
        height: 100%;
        width: 25%;
        text-align: left;
        float: left;
        
    }

    #divCreateAppointmentPlus {
        top: 0px;
        height: 98%;
        width: 100%; 
        text-align: left; 
        
        margin: 0px auto;
        float: left; 
        
        
    }

    .card {
        height: 110px;
        width: 110px;
        top: 20%;
        left: 0px; /*2023-10-05*/
        position: absolute;
        border-radius: 6px;
        
    }

    .add {
        height: 80px;
        width: 80px;
        top: calc(20% + 12px);
         /*2023-10-05*/
        left: 14px; /*2023-10-05*/
        position: absolute;
        opacity: 1;
    }


    .card-text {
        top: calc(20% + 95px);
        left: 14px; /*2023-10-09*/
        color: #333333;
        text-align: center;
        font: normal normal normal 8px/13px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        position: absolute;
    }

    #divUpcomingAppointments {
        height: 99%;
        width: 70%;
        text-align: left;
        
        float: right;
                
    }

    #attUpcomingAppointments {
        height: auto;
        top: 0px;
        /*line-height: 0.8px;*/
        font: normal normal normal 13px/18px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*background-color: red;*/
    }

    #divUpcomingAppointmentsDet {
        /*height: 45%;*/
        height: 58%;
        width: 100%;
        display: inline-block;
        text-align: left;
        position: relative;
        overflow-y: scroll;
        line-height: 10px; /*2023-09-20*/
        /*background-color: red;*/
    }



    .view_all_appointments {
        text-align: left;
        font: normal normal normal 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
        height: auto;
        line-height: 5;
        bottom: 28px;
        /*background-color: blue;*/
    }

    .divTypes {
        /*background-color: darkblue;*/
        overflow-y: hidden;
        text-align: center;
    }



    .divWrapperFewWidgetsWithScroll {
        /*float: left;*/
        width: 60%;
        
        text-align: center;
        margin: 0px auto;
        /*background-color: red;*/
        /*overflow: auto;*/
        overflow-y: hidden;
        /*height: 80%;*/ /*2023-09-21 must set the height for the scroll bar to show*/
        height: calc(100% - 100px);
        border: 0px;
        /*position: absolute;*/
        display: flex;
        justify-content: center;
    }

    .divWrapperMaxWidgetsWithScroll {
        /*max width of widgets e.g. limited to 2 or 5 widgets per line*/
        width: 50%;
        height: 100%;
        text-align: center;
        margin: 0px auto;
        /*background-color: saddlebrown;*/
        /*overflow: auto;*/
        overflow-y: auto;
        /*height: 70vh;*/ /*2023-09-21 must set the height for the scroll bar to show*/ 
        border: 0px;
    }

    .HomeBottomWithMenuBarOnly {
        text-align: center;
        height: 100px;
        width: 100%;
        overflow: hidden;
        display: flex;
         
        /*bottom: 220px;*/
        /*bottom: 10px;*/ /*2023-10-09*/
        /*position: absolute;*/
        /*background-color: navy;*/
        /*background-color: #FAFAFB;*/
        /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
        /*box-shadow: 0px 12px 24px #0000000F;*/
        opacity: 1;
        margin: 0px auto;
        border-radius: 0px 0px 6px 6px;
        /*background-color: green;*/
       
    }



    .HomeMenuBarOnly {
        /*Only the menu bar is visible*/
        text-align: center;
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0px 0px 6px 6px;
        
        /*bottom: 0px;*/
        margin: 0px auto;
        /*position: absolute;*/
        
        /*background-color: deeppink;*/
        /*display: none;
        visibility: hidden;*/
        /*
         border: 1px solid deeppink;
         background-color: deeppink;
        */
        
        
    }

    #IFrmWidgetMenu {
        border-radius: 0px 0px 6px 6px;
        display: block; /*2023-10-31*/
        height: 100%;
        width: 800px;
        border: 0;
        text-align: center;
        overflow: hidden;
        float: right;
        top: 0px;
        position: absolute;
        /*background-color: deeppink;*/
        margin: 0px auto;
        text-align: center;
    }


    .divWrapperWithMenuBar {
        width: 600px;
        height: 100%;
        text-align: center;
        margin: 0px auto;

        overflow: hidden;
        border: 0px;
        display: flex;
        flex-direction: row;
        /*background-color: brown;*/
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        border: none;
    }



    .thumbnail_menubar {
        /*display: block;*/
        float: left;
        width: 70px;
        height: 55px;
        margin-right: 10px;
        cursor: pointer;
        font-size: 7px;
        /*background-color: pink;*/
        line-height: 9px;
        /*background: green url('../images/Logos/tHSLogo_PP.png') 60% 60%/90% 90% no-repeat padding-box;*/
    }

    .thumbnailimgdiv_menubar {
        width: 100%;
        height: 35px;
    }

    /*2023-09-18*/
    .thumbnailimg_menubar {
        width: 30px;
        height: 30px;
        background-color: transparent;
    }



    .thumbnailhdr_menubar {
        /*margin: 5px auto;*/
        width: 90%;
        height: 15px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .thumbnailhdr {
        width: 95%;
        height: 25px;
        margin: 2px auto;

    }


    .iFrmWidget {
        /*background-color: orange;*/
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        border: 0px;
        /*visibility: hidden;*/    }


    .cal_card {
        width: 380px;
        height: auto;
        /*vertical-align: top;*/
        opacity: 1;
        /*background-color: grey;*/
        text-align: center;
        /*position: absolute;*/
        display: inline-block;
        
        /*visibility: hidden;*/
        margin: 0px auto;
    }

    .cal_card_block {
        position: relative;
        /*left: 0px;*/
        text-align: center;
        /*vertical-align: middle;*/
        width: 110px;
        height: 90px;
        /* UI Properties */
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        opacity: 1;
        /*margin: 8px;*/
        display: block;
        float: left;

    }


    .cal_card_block_emphasised {
        text-align: center;
        /*vertical-align: middle;*/
        width: 110px;
        height: 90px;
        background: maroon 0% 0% no-repeat padding-box;
        border-radius: 6px;
        opacity: 1;
        /*margin: 8px;*/
        display: inline-block;
        float: left;
        /*visibility: hidden;*/
        position: relative;
    }



    .cal_card_block_text_big {
     
        font: normal normal bold 23px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
        top: 28px;
    }

    .cal_card_block_text_small {
      
        top: 40px;
        font: normal normal normal 12px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
    }

    .cal_card_text_block {
        text-align: left;
        font: normal normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #6383A9;
        opacity: 1;
        width: 65%;
        height: 90px;
        float: left;
        margin-top: 5px;
        margin-left: 5px;
        /*line-height: 8px;*/
        /*background-color: pink;*/
        /*visibility: hidden;*/
        vertical-align: middle;
        display: block;
        /*position: relative;*/
    }



    .cal_text {
        /*width: 60%;
        top: 0px;*/
        line-height: 10px;
    }


    .cal_text_emphasised {
        /*width: 70%;*/
        color: maroon;
        /*margin-top: 10px;*/
        line-height: 10px;
    }


    .upcoming_appointments_icons {
        margin-top: 3px;
        margin-left: 2px;
        width: 11px;
        height: 10px;
        background: transparent 0% 0% no-repeat padding-box;
        opacity: 1;
    }


    .btn-as-text {
      
        text-align: center;
        font: normal normal normal 10px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        border: 0px;
        opacity: 1;
        background-color: transparent;
        cursor: pointer;
        line-height: 16px;
        margin-top: 5px;
    }

    .bookings_create_new_appointment_label {
        
        text-align: center;
        font: normal normal normal 9px/20px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }


    .AppointmentInput {
        width: 40%;
        height: 90%;
        margin: 0px auto;

    }


   .NewAppointmentInput {
        overflow-y: auto;
        width: 70%;
        height: 70%;
        margin: 0px auto;
    }



    .AppointmentMsg {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: maroon;
        text-align: center;
        margin: 0px auto;
        color: white;
        font-size: 10px;
        border-style: none;
        display: block;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

     .ExistingAppointments {
        width: 390px;
        margin: 0px auto;
        text-align: center;
        display: block;
        position: relative;
        height: 98%;
        overflow-y: auto;
       /* background-color: green;*/

    }

 .AppointmentInput {
        width: 40%;
        height: 90%;
        margin: 0px auto;

    }


   .NewAppointmentInput {
        overflow-y: auto;
        width: 70%;
        height: 70%;
        margin: 0px auto;
    }
    /*
    .AppointmentInput {
        width: 100%;
        height: 20%;
        overflow: auto;
      }
    
    
    .NewAppointmentInput {
        overflow-y: auto;
        width: 100%;
        height: 60%;
    }
    */


    .add-small {
        text-align: left;
        font: 900 12px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }

    .doc-card-text-block {
        top: 8px;
        width: 65%;
        height: 60px;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
        margin: 8px auto;
        line-height: 2px;
    }



    .doc-div-icon {
        top: 3px;
        /*width: 15%;*/
        float: left;
        height: 95%;
        left: 5px;
        text-align: center;

        background: transparent url('../images/pdf.svg') 15% 25% no-repeat padding-box;

        position: relative;
    }



    .doc-div-det {
        top: 6px;
        width: 45%;
        float: left;
        height: 95%;
        /*background-color: yellow;*/
        text-align: left;
        /*margin: 10px auto;*/
        position: relative;
    }

    .doc-div-download {
        top: 6px;
        width: 25%;
        float: right;
        height: 95%;
        /*background-color: red;*/
        text-align: center;
        vertical-align: middle;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
        margin-right: 4px;
    }
             
    .x-ray-card-text-block {
       
        width: 65%;
        height: 70px;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
     
        margin: 10px auto;
        line-height: 0.5px;
        
    }



    .x-ray-div-icon {
      
        height: 90%;
        /*width: 15%;*/
        float: left;
        left: 4px;
        top: 3px;
        /*width: 26px;
         height: 31px;*/
        text-align: center;
        /*margin: 10px auto;*/
        background: transparent 12% 12% no-repeat padding-box;
        /*background: transparent url('img/Icon open-plus.png') 0% 0% no-repeat padding-box;*/
        position: relative;
        background-size: 90% 90%;
    }


    .x-ray-div-spacer {
        float: left;
        top: 3px;
        text-align: center;
        background: transparent 1% 1% no-repeat padding-box;
        position: relative;
        width:25px;
        height: 100%;
    }


    .funder-card-text-block {
        
        width: 350px;
        height: auto;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
        /*
        width: 70%;
        height: 145px;*/
        margin: 10px auto;
        line-height: 2px;

    }


    .readonly {
        background-color: #FAFAFB; /*#f7f7ff;*/
        color: #333333;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        line-height: 14px;
        /*line-spacing: 14px;*/
        /*font: normal normal normal 12px/14px Albert Sans;*/
        opacity: 1;
    }
    
    .labels {
        /*2023-08-16 font: normal normal normal 12px/14px Albert Sans, Verdana, Arial, Microsoft Sans Serif;*/
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }
    
    

    .whitespace {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #CED4DA;
        opacity: 1;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        font-size: 10px;
        /*font-size: 12px;*/
    }
    
    
    
    
    .warning {
        font-family: Verdana, Arial, Microsoft Sans Serif;
        color: Yellow;
        font-size: 12px;
        background-color: black;
    }

    
    .btn {
        background-color: gainsboro;
        color: black;
        font-size: 10px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        cursor: pointer;
        border: outset 2px;
        border-radius: 3px 4px;
        font-weight: normal;
    }
    
        
    
    .divWrapperMediumWithScroll {
        width: 30%;
        /*height: auto;*/
        text-align: center;
        margin: 0px auto;
        /*background-color: pink;*/
        /*overflow: auto;*/
        overflow-y: auto;
        height: 100vh; /*2023-09-21 must set the height for the scroll bar to show*/
        border: 0px;
    }
    
    .Demographics {
        width: 50%;
        margin: 0px auto;
        height: 90%;
    }
/*
.DemographicsInput {
    height: 80%;
    border: 1px solid red;
}

*/


    .ContactInfo {
        width: 60%;
        margin: 0px auto;
    }
    
    .AddNewAddrWrapper {
        height: 100px;
        width: 70%;
        text-align: left;
        float: left;
        margin: 0px auto;
        overflow-y: hidden;
    }
    
    
    
    #divAddresses {
        height: 1000px;
        width: 80%;
        text-align: left;
        float: left;
        margin: 0px auto;
        overflow-y: auto;
    }
    
    
    
    .addr-add-card {
      
        height: 75px;
        width: 78px;
        top: 0px;
        left: 15px;
        position: absolute;
        border-radius: 6px;
        background-color: #234465;
    }
    
    
    .addr-add {
       
        height: 45px;
        width: 45px;
        top: 10px;
        left: 30px;
        position: absolute;
       
    }
    
    .addr-card-text {
        top: 62px;
        left: 5px;
        width: 100px;
        height: 7px;
        color: white;
        text-align: center;
        font: normal normal normal 7px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        position: absolute;
    }
    
    
    .addr-text {
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        margin-left: 10px;
    }
    
    
    .addr-type-div {
        top: 10px;
        left: 10px;
        width: 75%;
        float: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        line-height: 8px;
    }
    
    
    
    
    .addr-text-big {
        /*
        font: bold normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
            */
        margin-left: 10px;
        height: 10px;
        font: normal normal bold 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*letter-spacing: 6px;*/
        color: white;
        opacity: 1;
    }
    
    .addr-text-medium-highlight {
        /*
        font: bold normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
            */
        margin-left: 10px;
        height: 10px;
        font: normal normal bold 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*letter-spacing: 6px;*/
        color: yellow;
        opacity: 1;
    }
    
    
    
    .addr-card-text-block {
       
        width: 95%;
        height: auto;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 9px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
        /*
        width: 70%;
        height: 145px;*/
        margin-top: 10px;
        margin-left: 20px;
    
    }
    
    
    
    .thumbnail {
        background-color: #234465;
        float: left;
        width: 100px;
        height: 100px;
        margin: 5px;

        border: 1px lightblue outset;
        border-radius: 5%;
        cursor: pointer;
        
        opacity: 1;
        color: white;
        
        text-align: center;
        letter-spacing: 0px;
        font-weight: normal;
        font-size: 11px;
        padding: 5px;
    
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

    .FilterDateRange {
        width: 60%;
    }

    #divSickNotes {
        height: 90%;
        width: 90%;
        text-align: center;
        margin: 0px auto;
        display: inline-block;
    }

    .FilterPage {
        border: 0px;
        height: 90%;
        margin: 0px auto;
    }

    #frmLoginFooter {
        line-height: 13px;
        
    } 
/*
    .MainLogin {
        height: calc(100vh - 30px);
        border: 1px solid white;
    }

    .LoginFooter {
        border: 1px solid pink;
    }


    .Login {
        height: auto;
      
    }
/*

*/
/*
    .LoginOTPNotification {

      font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }
*/
   .divWrapperWithMenuBar {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
   }
*/


}


/*Tablet/laptop - smaller - Precious and Owen*/
@media (min-device-width: 400px) and  (max-device-height: 800px) and (orientation: landscape) {


    .ContactInput {
        height: 88%; 
        top: 2px;
    }

   .MaintenanceBlock{
      display: none;

    }

    .LoginFooter /*2025-05-23*/
    {bottom: 3px;
    }


    
    .LoginLogo {
        margin: auto 0px;
        margin-bottom: 2%;
        margin-top: 2%;

    }

    .Login {
       
        height: calc(100% - 63px); 
        width: 50%;
        vertical-align: middle;
    }


    .LoginLogin {
        margin-bottom: 10px; 
        margin-top: 0px;
    }

    .LoginBody {
        height: auto; /*2025-08-29 90%;*/
        width: 100%;
       
        display: block table-cell;
        
        margin: 0px auto;
        /*position: relative;*/
    }

    .LoginWelcome {
        margin-top: 12px;
    }

    .LoginOTPNotification {
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        height: 50px; /*2025-08-29 25px;*/
        position: relative; /*2025-08-29*/
    }

    .LoginInput {
        height: 110px; 
        top: 0px; /*2025-08-29*/
        position: relative; /*2025-08-29*/
    }

    .LoginLbl {
        height: 14px;
    }

    .LoginTxt {
        height: 14px;
    }


    .LoginLblRightAlgn {
        height: 14px; 
        margin-right: 19%;
    }

    .LoginTermsAndConditions {
  
        height: 14px; /*2025-08-29 16px*/
        margin-bottom: 3px;
    }

    .LoginCaptchaInstr {
        height: 14px;
        margin-left: 9%;
        display: block;
        margin-top: 5px;
        background-color: transparent;
    }

    .LoginCodes {
        height: 30%; /*2025-08-29 was 40%*/
        width: 81%; /*2025-08-29 90%;*/
        
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        
        bottom: 17px; /*2025-08-29 20px;*/

        background-color: transparent;       
    }

    

    .LoginCaptcha {
        text-align: left;
        width: 94%; /*2025-08-29 91%;*/
        margin-top: 5px;
        top: 0px;
        background-color: transparent;
    }

    .LoginBtns {
        height: auto;
        margin-top: 2px;
    }

    /*2025-08-29*/
    .LoginRegister {
        margin-top: 10px;
        height: 16px;
        line-height: 16px;
        bottom: 2px;
        /*border: 1px solid hotpink;*/
     }

    .LoginOTPBody {
        height: 90%;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        /*
        position: relative;
        display: block;
            */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .LoginOTPHdr {
        margin: 0px auto;
        height: 20%;
        text-align: center;
        vertical-align: middle;

        line-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
     
    }

    .LoginOTPInstr {
        margin: 0px auto;
        height: 15%;
        text-align: center;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

    .LoginEnterOTPMsg{
      
      height: auto;
      margin: 0px auto;
    }


    .LoginOTP{
      height: auto;
      
      margin: 0px auto;
    }

    .LoginOTPBtns {
        height: 30%;
        margin: 0px auto;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .LoginOTPMsg {
        height: 20%;
        margin: 0px auto;
        
        display: block;
        text-align: left;
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

    #divUserNameLbl {
      margin-left: 55px;
    }

    #divUserName {
      margin-left: 55px;
    }



    #divUserIdLbl {
      margin-left: 55px;
    }


    #divUserId {
      margin-left: 55px;
    }

    #divForgotUserName {
        height: 48%;
        /*margin-left: 20px; */
        width: 90%;
        text-align: left;
        margin-left: 4%;
        /*border: 1px solid red;*/
    }


    /*2024-06-13 start shares*/

    .CorrectInfoBody {
        height: 90%;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

  
    .CorrectInfoInstr {
        margin: 0px auto;
        height: 10%;
        text-align: center;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        text-align: center;
        line-height: 9px;
        opacity: 1;
    }


    .CorrectInfoOldNew {
        margin: 0px auto;
        height: 70%;
        vertical-align: middle;
        /*display: flex;
        flex-direction: column;*/
        /*justify-content: center;*/
        align-items: center;
        text-align: center;
        width: 100%;
        /*background-color: red;*/
    }



    .CorrectInfoType {
        margin: 0px auto;
        height: 20%;
        /*
        vertical-align: middle;*/
        position: relative;
        /*display: flex;
        flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        text-align: center;
        width: 100%;
        /*clear: both;*/
        /*background-color: yellow;*/
    }

    #CBxLstCorrectInfoType {
        margin: 0px auto;
        /*position: relative;
        background-color: pink;*/
    }

    .CorrectInfo {
        margin: 0px auto;
	      height: 20%;
	      /*text-align: center;*/
	      vertical-align: middle;
	      /*display: flex;*/
	      /*flex-direction: column;*/
	      /*justify-content: center;*/
	      /*align-items: center;*/
	      width: 100%;
	      clear: both;
	      /*background-color: green;*/
    }


    .divLbl {
        text-align: right;
        margin: auto;
        width: 30%;
        height: 100%;
        /*
        display: flex;
        flex-direction: column;
        */
        float: left;
        display: inline-block;
        /*position: absolute;*/
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 10px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        margin-bottom: 2px;
        margin-right: 10px;
        /*border: 1px solid red;*/
        vertical-align: middle;
    }

  .divInput {
	text-align: left;
	margin: 0px auto;
	width: 65%;
	height: 100%;
	vertical-align: middle;
	
	float: right;
	display: inline-block;
        /*border: 1px solid orange;*/
	background-color: #FAFAFB;
	
	font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
	letter-spacing: 0px;
	color: #333333;
	opacity: 1;
  }

/*2024-08-12*/

    .CorrectInfoCellNo 
    {
        margin: 0px auto;
	height: 20%;
	vertical-align: middle;
	width: 100%;
	clear: both;
    }

    .divCellNoLbl {
        text-align: right;
	margin: auto;
	width: 30%;
	height: 100%;
	
	float: left;
	display: inline-block;
	/*position: absolute;*/
	/*border: 1px solid black;*/
	background-color: #FAFAFB;
	color: #333333;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
	letter-spacing: 0px;
	opacity: 1;
	margin-bottom: 2px;

	vertical-align: middle;
  }

    .divCellNoInput {
        text-align: left;
	margin: 0px auto;
	width: 65%;
	height: 100%;
	vertical-align: middle;
	
	float: right;
	display: inline-block;
        /*border: 1px solid orange;*/
	background-color: #FAFAFB;
	
	font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
	letter-spacing: 0px;
	color: #333333;
	opacity: 1;
    }

    .CorrectInfoCellNoCountryInput {
        text-align: left;
        vertical-align: middle;
        margin: 0px auto;
        width: 92%;
        /*display: flex;
        flex-direction: column;*/
        float: left;
        /*border: 1px solid blue;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
        line-height: 16px;
        height: 48%;
        /*margin-bottom: 2px;*/
        position: relative;
        /*top: 2px;*/
        padding-bottom:4px;
    }



    .CorrectInfoCellNoInput {
        text-align: left;
        margin: 0px auto;
        width: 100%;
        /*position: absolute;*/
        /*display: flex;
        flex-direction: column;*/
        float: right;
        /*border: 1px solid aqua;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        /*line-height: 16px;*/
        opacity: 1;

        height: auto;/*had to set this to make the cell no text boxes the same height as the combo box*/
        position: relative;
   
    }



    .WhiteSpaceNoBorder {
        background: #FFFFFF 0% 0% no-repeat padding-box;
    
        border: none;
        opacity: 1;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        font-size: 10px;
    }


    .CorrectInfoIDPassport {
        margin: 0px auto;
        height: 70%;
        vertical-align: middle;
        /*display: flex;
        flex-direction: column;*/
        /*justify-content: center;*/
        align-items: center;
        text-align: center;
        width: 100%;
        /*background-color: red;*/
    }


    .CorrectInfoNarrower {
        margin: 0px auto;
        height: auto;
        padding: 10px 0px 0px 0px;
        /*text-align: center;*/
        vertical-align: middle;
        /*display: flex;*/
        /*flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        width: 60%;
        clear: both;
        /*background-color: green;*/
    }


    .divLbl50 {
        text-align: right;
        margin: auto;
        width: 50%;
        /*height: 100%;*/
        /*
        display: flex;
        flex-direction: column;
        */
        float: left;
        display: inline-block;
        /*position: absolute;*/
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 10px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        margin-bottom: 2px;
        margin-right: 10px;
        /*border: 1px solid red;*/
        vertical-align: middle;
    }


    .divInput50 {
        text-align: left;
        margin: 0px auto;
    
        /*margin-top: 20px;*/
        width: 40%;
        /*height: 100%;*/
        vertical-align: middle;
        /*

        display: flex;
        flex-direction: column;*/
        float: right;
        display: inline-block;
        /*border: 1px solid orange;*/
        background-color: #FAFAFB;
        /*    background-color: orange;*/
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }

    .divLbl100 {
        /*text-align: right;*/
        margin: 5px auto;
        padding: 10px 0px 0px 0px;
        width: 100%;
        /*height: 20px;*/
        /*
        display: flex;
        flex-direction: column;
        */
        float: left;
        display: inline-block;
        /*position: absolute;*/
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 10px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        /*margin-bottom: 2px;
        margin-right: 10px;*/
        /*border: 1px solid red;*/
    }


    .divInput100 {
        text-align: center;
        margin: 0px auto;
        width: 100%;
        /*height: 25px;*/
        /*
        display: flex;
        flex-direction: column;*/
        float: right;
        display: inline-block;
        /*border: 1px solid pink;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }


    .CorrectionFile {
        height: 90%;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .CorrectionFileLbl {
        height: 8%; /*2023-11-02*/
        margin: 0px auto;
        /*margin-bottom: 8px;*/ /*2023-11-02*/
    }

    /*2025-06 start RegUser*/

    .MainRegUser {
        top: 0px; /*2025-07-30*/
        height: calc(100% - 10px); /*2025-07-30*/
    }


    .RegUser {
        height: 90%; /*2025-07-30*/
        margin-top: 0px; /*2025-07-31-2*/
    }

    .RegUserBody {
        /*height: 99%; 2025-08-01*/ /*2025-07-31-2*/
        margin: 1px auto;
        /*position: relative;*/
        /*border: 10px solid blue;*/
    }


    .RegUserHdr {
        height: 30px; /*2025-07-31-3 35px*/
    }


    .RegUserInputBlock {
        height: calc(100% - 60px); /*88% 2025-07-29*/
    }



    .RegUserInput {
        height: 88%; /*2025-07-31*-3 82%*//*2024-11-20 was 39*/
    }

    .RegUserLblSmall {
        height: 36px; /*2025-07-31 2*/
        line-height: 12px; /*2025-07-31 2*/
    }

    .RegUserBtns {
        height: 6%; /*2025-07-31-3 8%*/
    }

    /*2025-06 end RegUser*/

    .Contact {
       width: 90%;
       height: 98%;
     }

    .ContactImg {
        
        display: inline-block;
    }

    .ContactLbl {
    
        margin-left:  7%;
    
    }

    .HomeHeader {
        text-align: center;
        height: 80px;
        width: 100%;
        margin: 0px auto;
    }


    .HomeLogo {
        margin-top: 6px;
        height: 65px;
        width: 188px;
        right: 5px;


       /*background-color: blue;*/
    }


    .HomeUser {
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        text-align: left;
        height: 90%;
        width: 10%;
        display: inline-block;
        float: right;
        background-color: transparent;
        
        /*right: 0px;*/
 
    }
    .HomeRounded {
        
        /*height: 90%;*/
        height: calc(100% - 140px);
        display: flex;
        justify-content: center;
        align-content: center;
        overflow-y: hidden;
        width: 90%;
        margin: 0px auto;
        border-radius: 12px 12px 6px 6px;
        /*background-color: wheat;*/
    }

    
    .divDet {
        height: 95%;
        width: 95%;
        text-align: center;
        margin: 0px auto;
        border-radius: 12px 12px 6px 6px;
        position: relative;
        /*background-color: black;*/
        overflow: hidden;
    }

    .HomeDetBody {
        /*height: 10%; set in code so does not change here*/
        height: 68%;
        width: 100%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        overflow: hidden;
        
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: transparent;
    }

    /*.HomeDetBodyWithMenuBarOnly {

        width: 100%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        position: absolute;
        overflow-y: visible;
    
        display: flex;
    }*/


    .HomeDetBodyWithMenuBarOnly {
        height: 90%;
        width: 100%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        /*position: relative;*/
        overflow-y: hidden;
        
        /*display: flex;*/
        display: block; /*inline-block;*/
        position: relative;
        /*height: 20%;*/
        /*width: 100%;
            margin: 0px auto;*/
        /*border-radius: 12px 12px 0px 0px;*/
        /*position: relative;*/
        /*overflow: hidden;
            background-color: pink;*/
        /*scrollbar-color: transparent transparent;*/
        /*display: block;*/
        /*display: flex;*/
        /*float: right;*/
        /*display: none*/; /*inline-block;*/
        /*position: absolute;*/
        /*visibility: hidden;*/
    }


    #divBody {
        text-align: center;
        height: 100%;
        width: 100%;
        top: 13px;
        position: absolute;
        overflow-y: hidden; /*2023-10-17*/
        background-color: transparent;
        
        /*display: none;*/
        /*visibility: hidden;*/
    }


    .thumbnail-btn {
        width: 98%;
        height: 80px; /*2023-08-04? test this was 100px*/
        margin: auto;
        background: #fafafb 0% 0% no-repeat padding-box;
        /*background-color: saddlebrown;*/
        opacity: 1;
        color: white;
        font: normal normal bold 12px/30px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        text-align: center;
        letter-spacing: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .widget-btn {
        height: 70px; /*2023-08-04? test this was 85px*/
        width: 95%;
        font-weight: normal;
        font-style: normal;
        font-size: 12px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*font-size: 10px;
        font-family: */
        cursor: pointer;
        border-radius: 8px;
        opacity: 1;
        text-align: center;
        margin: 0px auto;
        vertical-align: middle;
        opacity: 1;
        /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-19) var(--unnamed-font-family-product-sans);*/
        letter-spacing: 0px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .HomeBottom {
        /*text-align: center;*/
        height: 32%;
        width: 100%;
        /*overflow: hidden;*/
        display: block;
        /*bottom: 220px;*/
        bottom: 8px; /*2023-10-06*/
        /*position: absolute;*/
        /*background-color: red;*/
        /*background-color: #FAFAFB;*/
        /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
        /*box-shadow: 0px 12px 24px #0000000F;*/
        opacity: 1;
        margin: 0px auto;
        border-radius: 0px 0px 6px 6px;
    }



    .HomeMenuBar {
        display: none;
        /*visibility: hidden;*/
    }

    .divScroll {
        /*text-align: center;*/
        height: 98%;
        width: 98%;
        top: 0px;
        /*right: 0px;*/
        /*background-color: navy;*/
        margin: 0px auto;
        /*display: flex;*/
        /*position: absolute;*/
        display: inline-block;
        position: relative;
        float: right;
        /*flex-wrap: wrap;*/
        /*justify-content: center;
        align-content: center;*/
        /*overflow-x: visible;
        overflow-y: hidden;*/
    }

    #IFrmScrollMenu {
        /*display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;*/
        height: 100%;
    }


    .divScrollWrapper {
        height: 90%;
        width: 100%;
        /*overflow-x: visible;*/
        overflow-y: auto;
        /*float: right;*/
        /*position: absolute;*/
        /*margin: 0px auto;*/
        text-align: center;
        white-space: wrap;
        /*background-color: greenyellow;*/
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 7px;
        align-items: center;
    }



    /*2023-11-08*/
    .thumbnail_scrollmenu {     /*2023-11-08*/
        margin-bottom: 3px;
        float: left;
        width: 70px;
        height: 70px;
        margin-right: 5px;
        cursor: pointer;
        font-size: 9px; /*2023-11-08*/
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        color: white;
        opacity: 1;
        line-height: 9px;
        font-weight: normal;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*white-space: pre-wrap;*/
        text-align: center;
    }


    .thumbnailspacer_scrollmenu {
        width: 100%;
        height: 0px;
    }



    /*2023-09-18*/
    .thumbnailimgdiv_scrollmenu {
        width: 100%;
        height: 30px;
        text-align: center;
        margin-bottom: 1px; /*2023-11-08*/
        margin-top: 5px; /*2023-11-08*/

    }

    /*2023-09-18*/
    .thumbnailimg_scrollmenu {
        width: 28px;
        height: 28px;
        /*height: 20px;*/
        
    }

   
    .thumbnailhdr_scrollmenu {
        margin: 5px auto;
        width: 96%;
        height: 28px;
        bottom: 2px;
        text-align: center;
        display: grid;
        align-items: center;

        /*
        align-items: center;
        justify-content: center;

        display: flex;
        flex-wrap: nowrap;
        */
    }


    .thumbnailhdr_small {
        
        /*margin: 5px auto;*/
        width: 90%;
        height: 30px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .thumbnailhdr_menubar {
        margin: 0px auto;
        width: 100%;
        height: 30px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        /*border: 1px solid red;*/

    }




    #divAppointments {
        text-align: center;
        height: 98%;
        width: 48%;
        overflow: hidden;
        position: absolute;
        left: 0px;
        top: 0px;
        margin: 0px auto;
        display: block;
        /*background-color: darkolivegreen;*/
        
    }

    #divCreateAppointment {
        height: 100%;
        width: 25%;
        text-align: left;
        float: left;
        
    }

    #divCreateAppointmentPlus {
        top: 0px;
        height: 98%;
        width: 100%; 
        text-align: left; 
        
        margin: 0px auto;
        float: left; 
        
        
    }

    .card {
        height: 110px;
        width: 110px;
        top: 20%;
        left: 0px; /*2023-10-05*/
        position: absolute;
        border-radius: 6px;
        
    }

    .add {
        height: 80px;
        width: 80px;
        top: calc(20% + 12px);
         /*2023-10-05*/
        left: 14px; /*2023-10-05*/
        position: absolute;
        opacity: 1;
    }


    .card-text {
        top: calc(20% + 95px);
        left: 14px; /*2023-10-09*/
        color: #333333;
        text-align: center;
        font: normal normal normal 8px/13px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        position: absolute;
    }

    #divUpcomingAppointments {
        height: 99%;
        width: 70%;
        text-align: left;
        
        float: right;
                
    }

    #attUpcomingAppointments {
        height: auto;
        top: 0px;
        /*line-height: 0.8px;*/
        font: normal normal normal 13px/18px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*background-color: red;*/
    }

    #divUpcomingAppointmentsDet {
        /*height: 45%;*/
        height: 58%;
        width: 100%;
        display: inline-block;
        text-align: left;
        position: relative;
        overflow-y: scroll;
        line-height: 10px; /*2023-09-20*/
        /*background-color: red;*/
    }



    .view_all_appointments {
        text-align: left;
        font: normal normal normal 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
        height: auto;
        line-height: 5;
        bottom: 28px;
        /*background-color: blue;*/
    }

    .divTypes {
        /*background-color: darkblue;*/
        overflow-y: hidden;
        text-align: center;
    }



    .divWrapperFewWidgetsWithScroll {
        /*float: left;*/
        width: 60%;
        
        text-align: center;
        margin: 0px auto;
        /*background-color: red;*/
        /*overflow: auto;*/
        overflow-y: hidden;
        /*height: 80%;*/ /*2023-09-21 must set the height for the scroll bar to show*/
        height: calc(100% - 100px);
        border: 0px;
        /*position: absolute;*/
        display: flex;
        justify-content: center;
    }

    .divWrapperMaxWidgetsWithScroll {
        /*max width of widgets e.g. limited to 2 or 5 widgets per line*/
        width: 50%;
        height: 100%;
        text-align: center;
        margin: 0px auto;
        /*background-color: saddlebrown;*/
        /*overflow: auto;*/
        overflow-y: auto;
        /*height: 70vh;*/ /*2023-09-21 must set the height for the scroll bar to show*/ 
        border: 0px;
    }

    .HomeBottomWithMenuBarOnly {
        text-align: center;
        height: 100px;
        width: 100%;
        overflow: hidden;
        display: flex;
         
        /*bottom: 220px;*/
        /*bottom: 10px;*/ /*2023-10-09*/
        /*position: absolute;*/
        /*background-color: navy;*/
        /*background-color: #FAFAFB;*/
        /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
        /*box-shadow: 0px 12px 24px #0000000F;*/
        opacity: 1;
        margin: 0px auto;
        border-radius: 0px 0px 6px 6px;
        /*background-color: green;*/
       
    }



    .HomeMenuBarOnly {
        /*Only the menu bar is visible*/
        text-align: center;
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0px 0px 6px 6px;
        
        /*bottom: 0px;*/
        margin: 0px auto;
        /*position: absolute;*/
        
        /*background-color: deeppink;*/
        /*display: none;
        visibility: hidden;*/
        /*
         border: 1px solid deeppink;
         background-color: deeppink;
        */
        
        
    }

    #IFrmWidgetMenu {
        border-radius: 0px 0px 6px 6px;
        display: block; /*2023-10-31*/
        height: 100%;
        width: 800px;
        border: 0;
        text-align: center;
        overflow: hidden;
        float: right;
        top: 0px;
        position: absolute;
        /*background-color: deeppink;*/
        margin: 0px auto;
        text-align: center;
    }


    .divWrapperWithMenuBar {
        width: 600px;
        height: 100%;
        text-align: center;
        margin: 0px auto;

        overflow: hidden;
        border: 0px;
        display: flex;
        flex-direction: row;
        /*background-color: brown;*/
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        border: none;
    }



    .thumbnail_menubar {
        /*display: block;*/
        float: left;
        width: 70px;
        height: 55px;
        margin-right: 10px;
        cursor: pointer;
        font-size: 7px;
        /*background-color: pink;*/
        line-height: 9px;
        /*background: green url('../images/Logos/tHSLogo_PP.png') 60% 60%/90% 90% no-repeat padding-box;*/
    }

    .thumbnailimgdiv_menubar {
        width: 100%;
        height: 35px;
    }

    /*2023-09-18*/
    .thumbnailimg_menubar {
        width: 30px;
        height: 30px;
        background-color: transparent;
    }



    .thumbnailhdr_menubar {
        /*margin: 5px auto;*/
        width: 90%;
        height: 15px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .thumbnailhdr {
        width: 95%;
        height: 25px;
        margin: 2px auto;

    }


    .iFrmWidget {
        /*background-color: orange;*/
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        border: 0px;
        /*visibility: hidden;*/    }


    .cal_card {
        width: 380px;
        height: auto;
        /*vertical-align: top;*/
        opacity: 1;
        /*background-color: grey;*/
        text-align: center;
        /*position: absolute;*/
        display: inline-block;
        
        /*visibility: hidden;*/
        margin: 0px auto;
    }

    .cal_card_block {
        position: relative;
        /*left: 0px;*/
        text-align: center;
        /*vertical-align: middle;*/
        width: 110px;
        height: 90px;
        /* UI Properties */
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        opacity: 1;
        /*margin: 8px;*/
        display: block;
        float: left;

    }


    .cal_card_block_emphasised {
        text-align: center;
        /*vertical-align: middle;*/
        width: 110px;
        height: 90px;
        background: maroon 0% 0% no-repeat padding-box;
        border-radius: 6px;
        opacity: 1;
        /*margin: 8px;*/
        display: inline-block;
        float: left;
        /*visibility: hidden;*/
        position: relative;
    }



    .cal_card_block_text_big {
     
        font: normal normal bold 23px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
        top: 28px;
    }

    .cal_card_block_text_small {
      
        top: 40px;
        font: normal normal normal 12px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
    }

    .cal_card_text_block {
        text-align: left;
        font: normal normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #6383A9;
        opacity: 1;
        width: 65%;
        height: 90px;
        float: left;
        margin-top: 5px;
        margin-left: 5px;
        /*line-height: 8px;*/
        /*background-color: pink;*/
        /*visibility: hidden;*/
        vertical-align: middle;
        display: block;
        /*position: relative;*/
    }



    .cal_text {
        /*width: 60%;
        top: 0px;*/
        line-height: 10px;
    }


    .cal_text_emphasised {
        /*width: 70%;*/
        color: maroon;
        /*margin-top: 10px;*/
        line-height: 10px;
    }


    .upcoming_appointments_icons {
        margin-top: 3px;
        margin-left: 2px;
        width: 11px;
        height: 10px;
        background: transparent 0% 0% no-repeat padding-box;
        opacity: 1;
    }


    .btn-as-text {
      
        text-align: center;
        font: normal normal normal 10px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        border: 0px;
        opacity: 1;
        background-color: transparent;
        cursor: pointer;
        line-height: 16px;
        margin-top: 5px;
    }

    .bookings_create_new_appointment_label {
        
        text-align: center;
        font: normal normal normal 9px/20px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }


    .AppointmentInput {
        width: 40%;
        height: 90%;
        margin: 0px auto;

    }


   .NewAppointmentInput {
        overflow-y: auto;
        width: 70%;
        height: 70%;
        margin: 0px auto;
    }



    .AppointmentMsg {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: maroon;
        text-align: center;
        margin: 0px auto;
        color: white;
        font-size: 10px;
        border-style: none;
        display: block;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

     .ExistingAppointments {
        width: 390px;
        margin: 0px auto;
        text-align: center;
        display: block;
        position: relative;
        height: 98%;
        overflow-y: auto;
       /* background-color: green;*/

    }

 .AppointmentInput {
        width: 40%;
        height: 90%;
        margin: 0px auto;

    }


   .NewAppointmentInput {
        overflow-y: auto;
        width: 70%;
        height: 70%;
        margin: 0px auto;
    }
    /*
    .AppointmentInput {
        width: 100%;
        height: 20%;
        overflow: auto;
      }
    
    
    .NewAppointmentInput {
        overflow-y: auto;
        width: 100%;
        height: 60%;
    }
    */


    .add-small {
        text-align: left;
        font: 900 12px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }

    .doc-card-text-block {
        top: 8px;
        width: 65%;
        height: 60px;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
        margin: 8px auto;
        line-height: 2px;
    }



    .doc-div-icon {
        top: 3px;
        /*width: 15%;*/
        float: left;
        height: 95%;
        left: 5px;
        text-align: center;

        background: transparent url('../images/pdf.svg') 15% 25% no-repeat padding-box;

        position: relative;
    }



    .doc-div-det {
        top: 6px;
        width: 45%;
        float: left;
        height: 95%;
        /*background-color: yellow;*/
        text-align: left;
        /*margin: 10px auto;*/
        position: relative;
    }

    .doc-div-download {
        top: 6px;
        width: 25%;
        float: right;
        height: 95%;
        /*background-color: red;*/
        text-align: center;
        vertical-align: middle;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
        margin-right: 4px;
    }
             
    .x-ray-card-text-block {
       
        width: 65%;
        height: 70px;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
     
        margin: 10px auto;
        line-height: 0.5px;
        
    }



    .x-ray-div-icon {
      
        height: 90%;
        /*width: 15%;*/
        float: left;
        left: 4px;
        top: 3px;
        /*width: 26px;
         height: 31px;*/
        text-align: center;
        /*margin: 10px auto;*/
        background: transparent 12% 12% no-repeat padding-box;
        /*background: transparent url('img/Icon open-plus.png') 0% 0% no-repeat padding-box;*/
        position: relative;
        background-size: 90% 90%;
    }


    .x-ray-div-spacer {
        float: left;
        top: 3px;
        text-align: center;
        background: transparent 1% 1% no-repeat padding-box;
        position: relative;
        width:25px;
        height: 100%;
    }


    .funder-card-text-block {
        
        width: 350px;
        height: auto;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
        /*
        width: 70%;
        height: 145px;*/
        margin: 10px auto;
        line-height: 2px;

    }


    .readonly {
        background-color: #FAFAFB; /*#f7f7ff;*/
        color: #333333;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        line-height: 14px;
        /*line-spacing: 14px;*/
        /*font: normal normal normal 12px/14px Albert Sans;*/
        opacity: 1;
    }
    
    .labels {
        /*2023-08-16 font: normal normal normal 12px/14px Albert Sans, Verdana, Arial, Microsoft Sans Serif;*/
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }
    
    

    .whitespace {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #CED4DA;
        opacity: 1;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        font-size: 10px;
        /*font-size: 12px;*/
    }
    
    
    
    
    .warning {
        font-family: Verdana, Arial, Microsoft Sans Serif;
        color: Yellow;
        font-size: 12px;
        background-color: black;
    }
    
    
    
    
    .btn {
        background-color: gainsboro;
        color: black;
        font-size: 10px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        cursor: pointer;
        border: outset 2px;
        border-radius: 3px 4px;
        font-weight: normal;
    }
    
        
    
    .divWrapperMediumWithScroll {
        width: 30%;
        /*height: auto;*/
        text-align: center;
        margin: 0px auto;
        /*background-color: pink;*/
        /*overflow: auto;*/
        overflow-y: auto;
        height: 100vh; /*2023-09-21 must set the height for the scroll bar to show*/
        border: 0px;
    }
    
    .Demographics {
        width: 50%;
        margin: 0px auto;
        height: 90%;
    }
/*
.DemographicsInput {
    height: 80%;
    border: 1px solid red;
}

*/


    .ContactInfo {
        width: 60%;
        margin: 0px auto;
    }
    
    .AddNewAddrWrapper {
        height: 100px;
        width: 70%;
        text-align: left;
        float: left;
        margin: 0px auto;
        overflow-y: hidden;
    }
    
    
    
    #divAddresses {
        height: 1000px;
        width: 80%;
        text-align: left;
        float: left;
        margin: 0px auto;
        overflow-y: auto;
    }
    
    
    
    .addr-add-card {
      
        height: 75px;
        width: 78px;
        top: 0px;
        left: 15px;
        position: absolute;
        border-radius: 6px;
        background-color: #234465;
    }
    
    
    .addr-add {
       
        height: 45px;
        width: 45px;
        top: 10px;
        left: 30px;
        position: absolute;
       
    }
    
    .addr-card-text {
        top: 62px;
        left: 5px;
        width: 100px;
        height: 7px;
        color: white;
        text-align: center;
        font: normal normal normal 7px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        position: absolute;
    }
    
    
    .addr-text {
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        margin-left: 10px;
    }
    
    
    .addr-type-div {
        top: 10px;
        left: 10px;
        width: 75%;
        float: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        line-height: 8px;
    }
    
    
    
    
    .addr-text-big {
        /*
        font: bold normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
            */
        margin-left: 10px;
        height: 10px;
        font: normal normal bold 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*letter-spacing: 6px;*/
        color: white;
        opacity: 1;
    }
    
    .addr-text-medium-highlight {
        /*
        font: bold normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
            */
        margin-left: 10px;
        height: 10px;
        font: normal normal bold 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*letter-spacing: 6px;*/
        color: yellow;
        opacity: 1;
    }
    
    
    
    .addr-card-text-block {
       
        width: 95%;
        height: auto;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 9px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
        /*
        width: 70%;
        height: 145px;*/
        margin-top: 10px;
        margin-left: 20px;
    
    }
    
    
    
    .thumbnail {
        background-color: #234465;
        float: left;
        width: 100px;
        height: 100px;
        margin: 5px;

        border: 1px lightblue outset;
        border-radius: 5%;
        cursor: pointer;
        
        opacity: 1;
        color: white;
        
        text-align: center;
        letter-spacing: 0px;
        font-weight: normal;
        font-size: 11px;
        padding: 5px;
    
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

    .FilterDateRange {
        width: 60%;
    }

    #divSickNotes {
        height: 90%;
        width: 90%;
        text-align: center;
        margin: 0px auto;
        display: inline-block;
    }

    .FilterPage {
        border: 0px;
        height: 90%;
        margin: 0px auto;
    }

    #frmLoginFooter {
        line-height: 13px;
        
    } 
/*
    .MainLogin {
        height: calc(100vh - 30px);
        border: 1px solid white;
    }

    .LoginFooter {
        border: 1px solid pink;
    }


    .Login {
        height: auto;
      
    }
/*

*/
/*
    .LoginOTPNotification {

      font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }
*/
   .divWrapperWithMenuBar {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
   }
*/


}


@media (min-device-width: 400px) and  (max-device-height: 1000px) and (orientation: portrait) {

    
    .Login {
        height: 80%;
        width: 60%;
    }

    .LoginOTPNotification {
      /*font-size: 10px;*/
      font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }


   .divWrapperWithMenuBar {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
   }

    .thumbnail-btn {
        float: left;
        width: 98%;
        /*2023-09-19 height: 55px;*/ /*2023-08-04? test this was 100px*/
        height: 75px;
        margin: auto;
        background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;
        opacity: 1;
        color: white;
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-12)/var(--unnamed-line-spacing-30) var(--unnamed-font-family-product-sans);
        text-align: center;
        letter-spacing: 0px;
    }

    .widget-btn {
        /*2023-09-19 height: 45px;*/ /*2023-08-04? test this was 85px*/
        height: 65px;
        width: 98%;
        font-weight: normal;
        font-style: normal;
        font-size: 16px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*font-size: 10px;
        font-family: */
        cursor: pointer;
        border-radius: 8px;
        opacity: 1;
        text-align: center;
        margin: 0px auto;
        vertical-align: middle;
        line-height: 65px; /*Needed to center the text vertically*/
        opacity: 1;
        letter-spacing: 0px;
    }


    .HomeBottom {
        text-align: center;
        height: 280px;
        width: 100%;
        overflow: hidden;
        display: flex;

        bottom: 8px; /*2023-10-06*/
        position: absolute;
        /*background-color: red;*/
        /*background-color: #FAFAFB;*/
        /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
        /*box-shadow: 0px 12px 24px #0000000F;*/
        opacity: 1;
        margin: 0px auto;
        border-radius: 0px 0px 6px 6px;
    }



    .HomeMenuBar {
        /*The appointments, scroll menu and the menu bar are visible*/
        text-align: center;
        height: 80px;
        width: 100%;
        overflow: hidden;
        display: flex;
        border-radius: 0px 0px 6px 6px;
        left: 0px;
        bottom: 0px;
        margin: 0px auto;
        position: absolute;
        float: left;
        background-color: transparent;
    }

    .HomeMenuBarOnly {
        /*Only the menu bar is visible*/
        text-align: center;
        height: 80px;
        width: 100%;
        overflow: hidden;
        display: flex;
        border-radius: 0px 0px 6px 6px;
        left: 0px;
        top: 0px;
        margin: 0px auto;
        position: absolute;
        float: left;
        /*
        border: 1px solid orange;
        background-color: orange;
        */
    }


    .thumbnail_menubar {
        display: block;
        float: left;
        width: 75px;
        height: auto;
        margin-right: 5px;
        cursor: pointer;
        font-size: 7px;
        /*background-color: green;*/
        line-height: 9px;
        /*background: green url('../images/Logos/tHSLogo_PP.png') 60% 60%/90% 90% no-repeat padding-box;*/
        /*border: 1px solid green;*/
    }
  
    /*2023-09-18*/
    .thumbnailimgdiv_menubar {
        width: 100%;
        height: 48px;
    }

    /*2023-09-18*/
    .thumbnailimg_menubar {
        width: 47px;
        height: 47px;
    }

    .divScroll {
        text-align: center;
        height: 90px;
        width: 100%;
        display: block;
        top: 100px;
        left: 0px;
        float: left;
        margin: 0px auto;
        position: absolute;
        /*border: 1px solid green;*/
        overflow-x: auto;
        overflow-y: hidden;
    }

    .divScrollWrapper {
        height: 100%;
        width: 100%;
   
        overflow-x: auto;
        overflow-y: hidden;
        position: absolute;
        margin: 0px auto;
        text-align: center;
        flex-wrap: nowrap;
        display: flex;
        flex-shrink: 0;
        border: 1px dashed red;
    }




    .thumbnail_scrollmenu {
        float: left;
        width: 85px;
        height: 84px;
        margin-right: 10px;
        cursor: pointer;
        font-size: 7px;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        color: white;
        opacity: 1;
        line-height: 9px;
        font-weight: normal;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        flex-shrink: 0;
    }


    .thumbnailimgdiv_scrollmenu {
        width: 100%;
        height: 34px;
    }

    .thumbnailimg_scrollmenu {
        width: 30px;
        height: 30px;
        margin-top: 2px;
    }


    .thumbnailspacer_scrollmenu {
        width: 100%;
        height: 3px;
    }


    .thumbnailhdr_scrollmenu {
        width: 100%;
        height: 25px;
    }


}

/*2023-10-14 Added setting for Desktop below*/
/*Desktop*/

@media (min-device-width: 900px) and  (min-device-height: 1000px) {

    
    .LoginLogo {
        width: 100%;
        height: 100%;
        /*float: left;*/
        display: table-cell;
        /*background-color: forestgreen;*/
        margin: auto 0px;
        margin-bottom: 2%;
        margin-top: 2%;
    }

    .Login {
        overflow: auto;
        /*display: table;*/
        height: calc(100% - 250px); /*2024-08-09*/
        width: 40%;
        margin: 0px auto;
        text-align: center;
        vertical-align: middle;

        /*position: absolute;*/
        /*left: calc(100% / 2);*/
        
/*        background-color: blueviolet;*/
    }

    .LoginBody {
        height: 70%; /*2025-08-20*/
        width: 100%;
        text-align: center;
        display: block table-cell;
        vertical-align: middle;
        margin: 0px auto;
        position: relative;
   /*   background-color: pink;*/
    }

    .LoginWelcome {
        margin-top: 5%;
    }


    .LoginOTPNotification {
      /*font-size: 10px;*/
      font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }


    .LoginLogin {
        margin-top: 0%;
        height: 10%;
    }


   /*2025-08-20 start*/
  .LoginInput {
        height: 52%;
    }


    .LoginCaptchaInstr {
        text-align: left;
        height: 10%;
        margin: 0px auto;
        width: 90%;
        /*position: relative;*/
        color: black;
        margin-left: 9%;

    }

    .LoginCodes {
        height: 30%;
        width: 90%;
        /*border: 1px solid red;*/
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        /*
        justify-content: center;
        align-items: flex-start;*/
        bottom: 10px;


    }
  
    /*2025-08-20 end*/
    

    .LoginCaptcha {
        text-align: left;
        height: auto;
        margin: 0px auto;
        width: 91%;
        /*position: relative;*/
        margin-top: 10px;
        top: 0px;
    }

    .LoginBtns {
        height: auto;
        margin: 30px auto;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        

    }

    .LoginOTPBody {
        height: 90%;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        /*
        position: relative;
        display: block;
            */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .LoginOTPHdr {
        margin: 0px auto;
        height: 20%;
        text-align: center;
        vertical-align: middle;

        line-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
     
    }

    .LoginOTPInstr {
        margin: 0px auto;
        height: 15%;
        text-align: center;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

    .LoginEnterOTPMsg{
      
      height: auto;
      margin: 0px auto;
    }


    .LoginOTP{
      height: auto;
      
      margin: 0px auto;
    }

    .LoginOTPBtns {
        height: 30%;
        margin: 0px auto;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .LoginOTPMsg {
        height: 20%;
        margin: 0px auto;
        
        display: block;
        text-align: left;
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }
    /*2025-08-30 start*/
    .ChgPWInput {
        height: 52%;
     }
    /*2025-08-30 end*/




    /*2024-06-13 start shares*/

    .CorrectInfoBody {
        height: 90%;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

  
    .CorrectInfoInstr {
        margin: 0px auto;
        height: 10%;
        text-align: center;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        text-align: center;
        line-height: 9px;
        opacity: 1;
    }


    .CorrectInfoOldNew {
        margin: 0px auto;
        height: 70%;
        vertical-align: middle;
        /*display: flex;
        flex-direction: column;*/
        /*justify-content: center;*/
        align-items: center;
        text-align: center;
        width: 100%;
        /*background-color: red;*/
    }



    .CorrectInfoType {
        margin: 0px auto;
        height: 20%;
        /*
        vertical-align: middle;*/
        position: relative;
        /*display: flex;
        flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        text-align: center;
        width: 100%;
        /*clear: both;*/
        /*background-color: yellow;*/
    }

    #CBxLstCorrectInfoType {
        margin: 0px auto;
        /*position: relative;
        background-color: pink;*/
    }

    .CorrectInfo {
        margin: 0px auto;
	height: 20%;
	/*text-align: center;*/
	vertical-align: middle;
	/*display: flex;*/
	/*flex-direction: column;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	width: 100%;
	clear: both;
	/*background-color: green;*/
    }


    .divLbl {
        text-align: right;
        margin: auto;
        width: 30%;
        height: 100%;
        /*
        display: flex;
        flex-direction: column;
        */
        float: left;
        display: inline-block;
        /*position: absolute;*/
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 10px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        margin-bottom: 2px;
        margin-right: 10px;
        /*border: 1px solid red;*/
        vertical-align: middle;
    }

  .divInput {
	text-align: left;
	margin: 0px auto;
	width: 65%;
	height: 100%;
	vertical-align: middle;
	
	float: right;
	display: inline-block;
        /*border: 1px solid orange;*/
	background-color: #FAFAFB;
	
	font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
	letter-spacing: 0px;
	color: #333333;
	opacity: 1;
  }

/*2024-08-12*/

    .CorrectInfoCellNo 
    {
        margin: 0px auto;
	height: 20%;
	vertical-align: middle;
	width: 100%;
	clear: both;
    }

    .divCellNoLbl {
        text-align: right;
	margin: auto;
	width: 30%;
	height: 100%;
	
	float: left;
	display: inline-block;
	/*position: absolute;*/
	/*border: 1px solid black;*/
	background-color: #FAFAFB;
	color: #333333;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
	letter-spacing: 0px;
	opacity: 1;
	margin-bottom: 2px;

	vertical-align: middle;
  }

    .divCellNoInput {
        text-align: left;
	margin: 0px auto;
	width: 65%;
	height: 100%;
	vertical-align: middle;
	
	float: right;
	display: inline-block;
        /*border: 1px solid orange;*/
	background-color: #FAFAFB;
	
	font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
	letter-spacing: 0px;
	color: #333333;
	opacity: 1;
    }

    .CorrectInfoCellNoCountryInput {
        text-align: left;
        vertical-align: middle;
        margin: 0px auto;
        width: 92%;
        /*display: flex;
        flex-direction: column;*/
        float: left;
        /*border: 1px solid blue;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
        line-height: 16px;
        height: 48%;
        /*margin-bottom: 2px;*/
        position: relative;
        /*top: 2px;*/
        padding-bottom:4px;
    }



    .CorrectInfoCellNoInput {
        text-align: left;
        margin: 0px auto;
        width: 100%;
        /*position: absolute;*/
        /*display: flex;
        flex-direction: column;*/
        float: right;
        /*border: 1px solid aqua;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        /*line-height: 16px;*/
        opacity: 1;

        height: auto;/*had to set this to make the cell no text boxes the same height as the combo box*/
        position: relative;
   
    }



    .WhiteSpaceNoBorder {
        background: #FFFFFF 0% 0% no-repeat padding-box;
    
        border: none;
        opacity: 1;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        font-size: 10px;
    }


    .CorrectInfoIDPassport {
        margin: 0px auto;
        height: 70%;
        vertical-align: middle;
        /*display: flex;
        flex-direction: column;*/
        /*justify-content: center;*/
        align-items: center;
        text-align: center;
        width: 100%;
        /*background-color: red;*/
    }


    .CorrectInfoNarrower {
        margin: 0px auto;
        height: auto;
        padding: 10px 0px 0px 0px;
        /*text-align: center;*/
        vertical-align: middle;
        /*display: flex;*/
        /*flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        width: 60%;
        clear: both;
        /*background-color: green;*/
    }


    .divLbl50 {
        text-align: right;
        margin: auto;
        width: 50%;
        /*height: 100%;*/
        /*
        display: flex;
        flex-direction: column;
        */
        float: left;
        display: inline-block;
        /*position: absolute;*/
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 10px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        margin-bottom: 2px;
        margin-right: 10px;
        /*border: 1px solid red;*/
        vertical-align: middle;
    }


    .divInput50 {
        text-align: left;
        margin: 0px auto;
    
        /*margin-top: 20px;*/
        width: 40%;
        /*height: 100%;*/
        vertical-align: middle;
        /*

        display: flex;
        flex-direction: column;*/
        float: right;
        display: inline-block;
        /*border: 1px solid orange;*/
        background-color: #FAFAFB;
        /*    background-color: orange;*/
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }

    .divLbl100 {
        /*text-align: right;*/
        margin: 5px auto;
        padding: 10px 0px 0px 0px;
        width: 100%;
        /*height: 20px;*/
        /*
        display: flex;
        flex-direction: column;
        */
        float: left;
        display: inline-block;
        /*position: absolute;*/
        /*border: 1px solid black;*/
        background-color: #FAFAFB;
        color: #333333;
        font-size: 10px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        opacity: 1;
        /*margin-bottom: 2px;
        margin-right: 10px;*/
        /*border: 1px solid red;*/
    }


    .divInput100 {
        text-align: center;
        margin: 0px auto;
        width: 100%;
        /*height: 25px;*/
        /*
        display: flex;
        flex-direction: column;*/
        float: right;
        display: inline-block;
        /*border: 1px solid pink;*/
        background-color: #FAFAFB;
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }


    .CorrectionFile {
        height: 90%;
        width: 90%;
        text-align: center;
        vertical-align: middle;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .CorrectionFileLbl {
        height: 8%; /*2023-11-02*/
        margin: 0px auto;
        /*margin-bottom: 8px;*/ /*2023-11-02*/
    }


    .ContactImg {
        
        display: inline-block;
    }

 
    .HomeHeader {
        text-align: center;
        height: 80px;
        width: 100%;
        margin: 0px auto;
    }

       

    .HomeLogo {
        margin-top: 6px;
        height: 65px;
        width: 188px;
        right: 5px;


       /*background-color: blue;*/
    }


    .HomeUser {
        font: normal normal normal 10px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        text-align: left;
        height: 90%;
        width: 10%;
        display: inline-block;
        float: right;
        background-color: transparent;
        
        /*right: 0px;*/
 
    }
    .HomeRounded {
        background-color: olive;
        /*height: 90%;*/
        height: calc(100% - 140px);
        display: flex;
        justify-content: center;
        align-content: center;
        overflow-y: hidden;
        width: 90%;
        margin: 0px auto;
        border-radius: 12px 12px 6px 6px;
        /*background-color: wheat;*/
    }

    
    .divDet {
        height: 95%;
        width: 95%;
        text-align: center;
        margin: 0px auto;
        border-radius: 12px 12px 6px 6px;
        position: relative;
        /*background-color: black;*/
        overflow: hidden;
    }

    .HomeDetBody {
        /*height: 10%; set in code so does not change here*/
        height: 68%;
        width: 100%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        overflow: hidden;
        
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: transparent;
    }

    /*.HomeDetBodyWithMenuBarOnly {

        width: 100%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        position: absolute;
        overflow-y: visible;
    
        display: flex;
    }*/


    .HomeDetBodyWithMenuBarOnly {
        height: 90%;
        width: 100%;
        margin: 0px auto;
        border-radius: 12px 12px 0px 0px;
        /*position: relative;*/
        overflow-y: hidden;
        background-color: pink;
        /*display: flex;*/
        display: block; /*inline-block;*/
        position: relative;
        /*height: 20%;*/
        /*width: 100%;
            margin: 0px auto;*/
        /*border-radius: 12px 12px 0px 0px;*/
        /*position: relative;*/
        /*overflow: hidden;
            background-color: pink;*/
        /*scrollbar-color: transparent transparent;*/
        /*display: block;*/
        /*display: flex;*/
        /*float: right;*/
        /*display: none*/; /*inline-block;*/
        /*position: absolute;*/
        /*visibility: hidden;*/
    }


    #divBody {
        text-align: center;
        height: 100%;
        width: 100%;
        top: 13px;
        position: absolute;
        overflow-y: hidden; /*2023-10-17*/
        background-color: transparent;
        
        /*display: none;*/
        /*visibility: hidden;*/
    }


    .thumbnail-btn {
        width: 98%;
        height: 80px; /*2023-08-04? test this was 100px*/
        margin: auto;
        background: #fafafb 0% 0% no-repeat padding-box;
        /*background-color: saddlebrown;*/
        opacity: 1;
        color: white;
        font: normal normal bold 12px/30px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        text-align: center;
        letter-spacing: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .widget-btn {
        height: 70px; /*2023-08-04? test this was 85px*/
        width: 95%;
        font-weight: normal;
        font-style: normal;
        font-size: 12px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*font-size: 10px;
        font-family: */
        cursor: pointer;
        border-radius: 8px;
        opacity: 1;
        text-align: center;
        margin: 0px auto;
        vertical-align: middle;
        opacity: 1;
        /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-19) var(--unnamed-font-family-product-sans);*/
        letter-spacing: 0px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .HomeBottom {
        /*text-align: center;*/
        height: 32%;
        width: 100%;
        /*overflow: hidden;*/
        display: block;
        /*bottom: 220px;*/
        bottom: 8px; /*2023-10-06*/
        /*position: absolute;*/
        /*background-color: red;*/
        /*background-color: #FAFAFB;*/
        /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
        /*box-shadow: 0px 12px 24px #0000000F;*/
        opacity: 1;
        margin: 0px auto;
        border-radius: 0px 0px 6px 6px;
    }



    .HomeMenuBar {
        display: none;
        /*visibility: hidden;*/
    }

    .divScroll {
        /*text-align: center;*/
        height: 98%;
        width: 98%;
        top: 0px;
        /*right: 0px;*/
        /*background-color: navy;*/
        margin: 0px auto;
        /*display: flex;*/
        /*position: absolute;*/
        display: inline-block;
        position: relative;
        float: right;
        /*flex-wrap: wrap;*/
        /*justify-content: center;
        align-content: center;*/
        /*overflow-x: visible;
        overflow-y: hidden;*/
    }

    #IFrmScrollMenu {
        /*display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;*/
        height: 100%;
    }


    .divScrollWrapper {
        height: 90%;
        width: 100%;
        /*overflow-x: visible;*/
        overflow-y: auto;
        /*float: right;*/
        /*position: absolute;*/
        /*margin: 0px auto;*/
        text-align: center;
        white-space: wrap;
        /*background-color: greenyellow;*/
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 7px;
        align-items: center;
    }



    /*2023-11-08*/
    .thumbnail_scrollmenu {     /*2023-11-08*/
        margin-bottom: 3px;
        float: left;
        width: 70px;
        height: 70px;
        margin-right: 5px;
        cursor: pointer;
        font-size: 9px; /*2023-11-08*/
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        color: white;
        opacity: 1;
        line-height: 9px;
        font-weight: normal;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*white-space: pre-wrap;*/
        text-align: center;
    }


    .thumbnailspacer_scrollmenu {
        width: 100%;
        height: 0px;
    }



    /*2023-09-18*/
    .thumbnailimgdiv_scrollmenu {
        width: 100%;
        height: 30px;
        text-align: center;
        margin-bottom: 1px; /*2023-11-08*/
        margin-top: 5px; /*2023-11-08*/

    }

    /*2023-09-18*/
    .thumbnailimg_scrollmenu {
        width: 28px;
        height: 28px;
        /*height: 20px;*/
        
    }

   
    .thumbnailhdr_scrollmenu {
        margin: 5px auto;
        width: 96%;
        height: 28px;
        bottom: 2px;
        text-align: center;
        display: grid;
        align-items: center;

        /*
        align-items: center;
        justify-content: center;

        display: flex;
        flex-wrap: nowrap;
        */
    }


    .thumbnailhdr_small {
        
        /*margin: 5px auto;*/
        width: 90%;
        height: 30px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .thumbnailhdr_menubar {
        margin: 0px auto;
        width: 100%;
        height: 30px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        /*border: 1px solid red;*/

    }




    #divAppointments {
        text-align: center;
        height: 98%;
        width: 48%;
        overflow: hidden;
        position: absolute;
        left: 0px;
        top: 0px;
        margin: 0px auto;
        display: block;
        /*background-color: darkolivegreen;*/
        
    }

    #divCreateAppointment {
        height: 100%;
        width: 25%;
        text-align: left;
        float: left;
        
    }

    #divCreateAppointmentPlus {
        top: 0px;
        height: 98%;
        width: 100%; 
        text-align: left; 
        
        margin: 0px auto;
        float: left; 
        
        
    }

    .card {
        height: 110px;
        width: 110px;
        top: 20%;
        left: 0px; /*2023-10-05*/
        position: absolute;
        border-radius: 6px;
        
    }

    .add {
        height: 80px;
        width: 80px;
        top: calc(20% + 12px);
         /*2023-10-05*/
        left: 14px; /*2023-10-05*/
        position: absolute;
        opacity: 1;
    }


    .card-text {
        top: calc(20% + 95px);
        left: 14px; /*2023-10-09*/
        color: #333333;
        text-align: center;
        font: normal normal normal 8px/13px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        position: absolute;
    }

    #divUpcomingAppointments {
        height: 99%;
        width: 70%;
        text-align: left;
        
        float: right;
                
    }

    #attUpcomingAppointments {
        height: auto;
        top: 0px;
        /*line-height: 0.8px;*/
        font: normal normal normal 13px/18px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*background-color: red;*/
    }

    #divUpcomingAppointmentsDet {
        /*height: 45%;*/
        height: 58%;
        width: 100%;
        display: inline-block;
        text-align: left;
        position: relative;
        overflow-y: scroll;
        line-height: 10px; /*2023-09-20*/
        /*background-color: red;*/
    }



    .view_all_appointments {
        text-align: left;
        font: normal normal normal 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
        height: auto;
        line-height: 5;
        bottom: 28px;
        /*background-color: blue;*/
    }

    .divTypes {
        /*background-color: darkblue;*/
        overflow-y: hidden;
        text-align: center;
    }



    .divWrapperFewWidgetsWithScroll {
        /*float: left;*/
        width: 60%;
        
        text-align: center;
        margin: 0px auto;
        /*background-color: red;*/
        /*overflow: auto;*/
        overflow-y: hidden;
        /*height: 80%;*/ /*2023-09-21 must set the height for the scroll bar to show*/
        height: calc(100% - 100px);
        border: 0px;
        /*position: absolute;*/
        display: flex;
        justify-content: center;
    }

    .divWrapperMaxWidgetsWithScroll {
        /*max width of widgets e.g. limited to 2 or 5 widgets per line*/
        width: 50%;
        height: 100%;
        text-align: center;
        margin: 0px auto;
        /*background-color: saddlebrown;*/
        /*overflow: auto;*/
        overflow-y: auto;
        /*height: 70vh;*/ /*2023-09-21 must set the height for the scroll bar to show*/ 
        border: 0px;
    }

    .HomeBottomWithMenuBarOnly {
        text-align: center;
        height: 100px;
        width: 100%;
        overflow: hidden;
        display: flex;
         
        /*bottom: 220px;*/
        /*bottom: 10px;*/ /*2023-10-09*/
        /*position: absolute;*/
        /*background-color: navy;*/
        /*background-color: #FAFAFB;*/
        /*background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;*/
        /*box-shadow: 0px 12px 24px #0000000F;*/
        opacity: 1;
        margin: 0px auto;
        border-radius: 0px 0px 6px 6px;
        /*background-color: green;*/
       
    }



    .HomeMenuBarOnly {
        /*Only the menu bar is visible*/
        text-align: center;
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0px 0px 6px 6px;
        
        /*bottom: 0px;*/
        margin: 0px auto;
        /*position: absolute;*/
        
        /*background-color: deeppink;*/
        /*display: none;
        visibility: hidden;*/
        /*
         border: 1px solid deeppink;
         background-color: deeppink;
        */
        
        
    }

    #IFrmWidgetMenu {
        border-radius: 0px 0px 6px 6px;
        display: block; /*2023-10-31*/
        height: 100%;
        width: 800px;
        border: 0;
        text-align: center;
        overflow: hidden;
        float: right;
        top: 0px;
        position: absolute;
        /*background-color: deeppink;*/
        margin: 0px auto;
        text-align: center;
    }


    .divWrapperWithMenuBar {
        width: 600px;
        height: 100%;
        text-align: center;
        margin: 0px auto;

        overflow: hidden;
        border: 0px;
        display: flex;
        flex-direction: row;
        /*background-color: brown;*/
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        border: none;
    }



    .thumbnail_menubar {
        /*display: block;*/
        float: left;
        width: 70px;
        height: 55px;
        margin-right: 10px;
        cursor: pointer;
        font-size: 7px;
        /*background-color: pink;*/
        line-height: 9px;
        /*background: green url('../images/Logos/tHSLogo_PP.png') 60% 60%/90% 90% no-repeat padding-box;*/
    }

    .thumbnailimgdiv_menubar {
        width: 100%;
        height: 35px;
    }

    /*2023-09-18*/
    .thumbnailimg_menubar {
        width: 30px;
        height: 30px;
        background-color: transparent;
    }



    .thumbnailhdr_menubar {
        /*margin: 5px auto;*/
        width: 90%;
        height: 15px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .thumbnailhdr {
        width: 95%;
        height: 25px;
        margin: 2px auto;

    }


    .iFrmWidget {
        /*background-color: orange;*/
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        border: 0px;
        /*visibility: hidden;*/    }


    .cal_card {
        width: 380px;
        height: auto;
        /*vertical-align: top;*/
        opacity: 1;
        /*background-color: grey;*/
        text-align: center;
        /*position: absolute;*/
        display: inline-block;
        
        /*visibility: hidden;*/
        margin: 0px auto;
    }

    .cal_card_block {
        position: relative;
        /*left: 0px;*/
        text-align: center;
        /*vertical-align: middle;*/
        width: 110px;
        height: 90px;
        /* UI Properties */
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        opacity: 1;
        /*margin: 8px;*/
        display: block;
        float: left;

    }


    .cal_card_block_emphasised {
        text-align: center;
        /*vertical-align: middle;*/
        width: 110px;
        height: 90px;
        background: maroon 0% 0% no-repeat padding-box;
        border-radius: 6px;
        opacity: 1;
        /*margin: 8px;*/
        display: inline-block;
        float: left;
        /*visibility: hidden;*/
        position: relative;
    }



    .cal_card_block_text_big {
     
        font: normal normal bold 23px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
        top: 28px;
    }

    .cal_card_block_text_small {
      
        top: 40px;
        font: normal normal normal 12px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
    }

    .cal_card_text_block {
        text-align: left;
        font: normal normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #6383A9;
        opacity: 1;
        width: 65%;
        height: 90px;
        float: left;
        margin-top: 5px;
        margin-left: 5px;
        /*line-height: 8px;*/
        /*background-color: pink;*/
        /*visibility: hidden;*/
        vertical-align: middle;
        display: block;
        /*position: relative;*/
    }



    .cal_text {
        /*width: 60%;
        top: 0px;*/
        line-height: 10px;
    }


    .cal_text_emphasised {
        /*width: 70%;*/
        color: maroon;
        /*margin-top: 10px;*/
        line-height: 10px;
    }


    .upcoming_appointments_icons {
        margin-top: 3px;
        margin-left: 2px;
        width: 11px;
        height: 10px;
        background: transparent 0% 0% no-repeat padding-box;
        opacity: 1;
    }


    .btn-as-text {
      
        text-align: center;
        font: normal normal normal 10px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        border: 0px;
        opacity: 1;
        background-color: transparent;
        cursor: pointer;
        line-height: 16px;
        margin-top: 5px;
    }

    .bookings_create_new_appointment_label {
        
        text-align: center;
        font: normal normal normal 9px/20px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }


    .AppointmentInput {
        width: 40%;
        height: 90%;
        margin: 0px auto;

    }


   .NewAppointmentInput {
        overflow-y: auto;
        width: 70%;
        height: 70%;
        margin: 0px auto;
    }



    .AppointmentMsg {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: maroon;
        text-align: center;
        margin: 0px auto;
        color: white;
        font-size: 10px;
        border-style: none;
        display: block;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

     .ExistingAppointments {
        width: 390px;
        margin: 0px auto;
        text-align: center;
        display: block;
        position: relative;
        height: 98%;
        overflow-y: auto;
       /* background-color: green;*/

    }

 .AppointmentInput {
        width: 40%;
        height: 90%;
        margin: 0px auto;

    }


   .NewAppointmentInput {
        overflow-y: auto;
        width: 70%;
        height: 70%;
        margin: 0px auto;
    }
    /*
    .AppointmentInput {
        width: 100%;
        height: 20%;
        overflow: auto;
      }
    
    
    .NewAppointmentInput {
        overflow-y: auto;
        width: 100%;
        height: 60%;
    }
    */


    .add-small {
        text-align: left;
        font: 900 12px/9px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }

    .doc-card-text-block {
        top: 8px;
        width: 65%;
        height: 60px;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
        margin: 8px auto;
        line-height: 2px;
    }



    .doc-div-icon {
        top: 3px;
        /*width: 15%;*/
        float: left;
        height: 95%;
        left: 5px;
        text-align: center;

        background: transparent url('../images/pdf.svg') 15% 25% no-repeat padding-box;

        position: relative;
    }



    .doc-div-det {
        top: 6px;
        width: 45%;
        float: left;
        height: 95%;
        /*background-color: yellow;*/
        text-align: left;
        /*margin: 10px auto;*/
        position: relative;
    }

    .doc-div-download {
        top: 6px;
        width: 25%;
        float: right;
        height: 95%;
        /*background-color: red;*/
        text-align: center;
        vertical-align: middle;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
        margin-right: 4px;
    }
             
    .x-ray-card-text-block {
       
        width: 65%;
        height: 70px;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
     
        margin: 10px auto;
        line-height: 0.5px;
        
    }



    .x-ray-div-icon {
      
        height: 90%;
        /*width: 15%;*/
        float: left;
        left: 4px;
        top: 3px;
        /*width: 26px;
         height: 31px;*/
        text-align: center;
        /*margin: 10px auto;*/
        background: transparent 12% 12% no-repeat padding-box;
        /*background: transparent url('img/Icon open-plus.png') 0% 0% no-repeat padding-box;*/
        position: relative;
        background-size: 90% 90%;
    }


    .x-ray-div-spacer {
        float: left;
        top: 3px;
        text-align: center;
        background: transparent 1% 1% no-repeat padding-box;
        position: relative;
        width:25px;
        height: 100%;
    }


    .funder-card-text-block {
        
        width: 350px;
        height: auto;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
        /*
        width: 70%;
        height: 145px;*/
        margin: 10px auto;
        line-height: 2px;

    }


    .readonly {
        background-color: #FAFAFB; /*#f7f7ff;*/
        color: #333333;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        line-height: 14px;
        /*line-spacing: 14px;*/
        /*font: normal normal normal 12px/14px Albert Sans;*/
        opacity: 1;
    }
    
    .labels {
        /*2023-08-16 font: normal normal normal 12px/14px Albert Sans, Verdana, Arial, Microsoft Sans Serif;*/
        font: normal normal normal 10px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }
    
    

    .whitespace {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #CED4DA;
        opacity: 1;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        font-size: 10px;
        /*font-size: 12px;*/
    }
    
    
    
    
    .warning {
        font-family: Verdana, Arial, Microsoft Sans Serif;
        color: Yellow;
        font-size: 12px;
        background-color: black;
    }

    
    .btn {
        background-color: gainsboro;
        color: black;
        font-size: 10px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        cursor: pointer;
        border: outset 2px;
        border-radius: 3px 4px;
        font-weight: normal;
    }
    
        
    
    .divWrapperMediumWithScroll {
        width: 30%;
        /*height: auto;*/
        text-align: center;
        margin: 0px auto;
        /*background-color: pink;*/
        /*overflow: auto;*/
        overflow-y: auto;
        height: 100vh; /*2023-09-21 must set the height for the scroll bar to show*/
        border: 0px;
    }
    
    .Demographics {
        width: 50%;
        margin: 0px auto;
    }


    .ContactInfo {
        width: 60%;
        margin: 0px auto;
    }
    
    .AddNewAddrWrapper {
        height: 100px;
        width: 70%;
        text-align: left;
        float: left;
        margin: 0px auto;
        overflow-y: hidden;
    }
    
    
    
    #divAddresses {
        height: 1000px;
        width: 80%;
        text-align: left;
        float: left;
        margin: 0px auto;
        overflow-y: auto;
    }
    
    
    
    .addr-add-card {
      
        height: 75px;
        width: 78px;
        top: 0px;
        left: 15px;
        position: absolute;
        border-radius: 6px;
        background-color: #234465;
    }
    
    
    .addr-add {
       
        height: 45px;
        width: 45px;
        top: 10px;
        left: 30px;
        position: absolute;
       
    }
    
    .addr-card-text {
        top: 62px;
        left: 5px;
        width: 100px;
        height: 7px;
        color: white;
        text-align: center;
        font: normal normal normal 7px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        position: absolute;
    }
    
    
    .addr-text {
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        margin-left: 10px;
    }
    
    
    .addr-type-div {
        top: 10px;
        left: 10px;
        width: 75%;
        float: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        line-height: 8px;
    }
    
    
    
    
    .addr-text-big {
        /*
        font: bold normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
            */
        margin-left: 10px;
        height: 10px;
        font: normal normal bold 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*letter-spacing: 6px;*/
        color: white;
        opacity: 1;
    }
    
    .addr-text-medium-highlight {
        /*
        font: bold normal normal 10px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
            */
        margin-left: 10px;
        height: 10px;
        font: normal normal bold 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*letter-spacing: 6px;*/
        color: yellow;
        opacity: 1;
    }
    
    
    
    .addr-card-text-block {
       
        width: 95%;
        height: auto;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 9px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
        /*
        width: 70%;
        height: 145px;*/
        margin-top: 10px;
        margin-left: 20px;
    
    }
    
    
    
    .thumbnail {
        background-color: #234465;
        float: left;
        width: 100px;
        height: 100px;
        margin: 5px;

        border: 1px lightblue outset;
        border-radius: 5%;
        cursor: pointer;
        
        opacity: 1;
        color: white;
        
        text-align: center;
        letter-spacing: 0px;
        font-weight: normal;
        font-size: 11px;
        padding: 5px;
    
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
    }

    .FilterDateRange {
        width: 60%;
    }

    #divSickNotes {
        height: 90%;
        width: 90%;
        text-align: center;
        margin: 0px auto;
        display: inline-block;
    }

    .FilterPage {
        border: 0px;
        height: 90%;
        margin: 0px auto;
    }


}


/*@media (min-device-width: 8000px) {*/

@media screen and (max-device-width: 400px) and (max-device-height: 600px) and (orientation: portrait) {

    /*
    .MainLogin {
        background-color: yellow;
    }
    */
    .HomeUser {
        text-align: center;
        height: 90%;
        width: 30%;
        display: inline-block;
        float: right;
        margin-right: 5px auto;
        background-color: transparent;
    }

    .HomeRounded {
        width: 96%;
        height: 85%;
        margin: 0px auto;
        border-radius: 12px 12px 6px 6px;
        /*background-color: wheat;*/
        overflow-y: hidden;
    }

    .HomeBottom {
        height: 230px;
        /*background-color: wheat;*/
    }



    .thumbnail-btn {
        float: left;
        width: 98%;
        /*2023-09-19 height: 55px;*/ /*2023-08-04? test this was 100px*/
        height: 44px;
        margin: auto;
        background: var(--unnamed-color-fafafb) 0% 0% no-repeat padding-box;
        opacity: 1;
        color: white;
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-12)/var(--unnamed-line-spacing-30) var(--unnamed-font-family-product-sans);
        text-align: center;
        letter-spacing: 0px;
    }

    .widget-btn {
        /*2023-09-19 height: 45px;*/ /*2023-08-04? test this was 85px*/
        height: 34px;
        width: 98%;
        font-weight: normal;
        font-style: normal;
        font-size: 13px;
        font-family: Product Sans, Verdana, Arial, Microsoft Sans Serif;
        /*font-size: 10px;
        font-family: */
        cursor: pointer;
        border-radius: 8px;
        opacity: 1;
        text-align: center;
        margin: 0px auto;
        vertical-align: middle;
        line-height: 34px; /*Needed to center the text vertically*/
        opacity: 1;
        /*font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-19) var(--unnamed-font-family-product-sans);*/
        letter-spacing: 0px;
    }


    #divCreateAppointment {
        height: 100%;
        width: 27%;
        text-align: left;
        float: left;
    }

    /*
     
    #divCreateAppointmentPlus {
        top: 0px;
        height: 98%;
        width: 98%; 
        text-align: left;
        position: relative;
        margin: 0px auto;
        float: left; 
    }
        */

    .cal_card_text_block {
        text-align: left;
        font: normal normal normal 8px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #6383A9;
        opacity: 1;
        width: 100%;
        height: 70%;
        float: right;
    }

    .card-text {
        top: 66px;
        left: 5px;
        color: #333333;
        text-align: center;
        font: normal normal normal 6px/8px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        position: absolute;
    }

    #divUpcomingAppointments {
        height: 99%;
        width: 70%;
        text-align: left;
        position: relative;
        float: right;
    }
    /*
    #attUpcomingAppointments {
        height: auto;
        top: 0px;
        line-height: 0.8px;
    }

    #divUpcomingAppointmentsDet {
        
        height: 58%;
        width: 100%;
        display: inline-block;
        text-align: left;
        position: relative;
        overflow-y: scroll;
        line-height: 10px;
        
    }



    .view_all_appointments {
       
        text-align: left;
        font: normal normal normal 9px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
        height: auto;
        line-height: 0.8;
        bottom: 30px;
        
    } */

    .divScroll {
        text-align: center;
        height: 60px;
        width: 100%;
        display: block;
        top: 100px;
        left: 0px;
        float: left;
        margin: 0px auto;
        position: absolute;
        overflow-x: auto;
        overflow-y: hidden;
        /*background-color: navy;*/
    }


    .divScrollWrapper {
        height: 100%;
        width: 100%;
        /*width: calc(100vw + 500px);*/
        overflow-x: auto;
        overflow-y: hidden;
        position: absolute;
        margin: 0px auto;
        text-align: center;
        flex-wrap: nowrap;
        display: flex;
        flex-shrink: 0;
    }




    .HomeMenuBar {
        /*The appointments, scroll menu and the menu bar are visible*/
        text-align: center;
        height: 60px;
        width: 100%;
        overflow: hidden;
        display: flex;
        border-radius: 0px 0px 6px 6px;
        left: 0px;
        bottom: 10px;
        margin: 0px auto;
        position: absolute;
        float: left;
        background-color: yellow;
    }


    .HomeMenuBarOnly {
        /*Only the menu bar is visible*/
        text-align: center;
        height: 60px;
        width: 100%;
        overflow: hidden;
        display: flex;
        border-radius: 0px 0px 6px 6px;
        left: 0px;
        top: 0px;
        margin: 0px auto;
        position: absolute;
        float: left;
        border: 0px;
        background-color: yellow;
        border: 1px solid yellow;
    }




    .doc-card-text-block {
        width: 99%;
        height: 50px;
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        text-align: left;
        font: normal normal normal 8px/12px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: white;
        opacity: 1;
    
        margin-top: 10px;
        
        line-height: 2px;
    }


    .ExistingAppointments {
        width: 100%;
        margin: 0px auto;
        text-align: center;
        display: block;
        position: relative;
        height: 75%;
        overflow-y: auto;
    }

    
    .cal_card {
      
        width: 100%; 
        height: 89px;
        opacity: 1;
    }


    .cal_card_block {
        position: absolute;
        left: 0px;
        text-align: center;
        vertical-align: middle;
        width: 68px;
        height: 60px;
        /* UI Properties */
        background: #234465 0% 0% no-repeat padding-box;
        border-radius: 6px;
        opacity: 1;
        float: left;
        
        margin-right: 8px;
        margin-left: 0px;
    }


    .cal_card_block_emphasised {
        position: absolute;
        left: 0px;
        text-align: center;
        vertical-align: middle;
        width: 68px;
        height: 60px;
        /* UI Properties */
        background: maroon 0% 0% no-repeat padding-box;
        border-radius: 6px;
        opacity: 1;
        float: left;
        margin-right: 8px;
        margin-left: 0px;
    }

    .cal_card_block_text_big {
      
        font: normal normal bold 19px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
        top: 14px;
    }

    .cal_card_block_text_small {
      
        top: 20px;
        font: normal normal normal 10px/11px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        position: relative;
    }

    .cal_card_text_block {
      
        text-align: left;
        font: normal normal normal 8px/15px Product Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #6383A9;
        opacity: 1;
        width: 70%;
        height: 70%;
        float: right;
    }

    .NewAppointmentInput {
        overflow-y: auto;
        width: 100%;
        height: 65%;
    }


    .labels {
        /*2023-08-16 font: normal normal normal 12px/14px Albert Sans, Verdana, Arial, Microsoft Sans Serif;*/
        font: normal normal normal 9px/12px Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
    }


    .whitespace {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #CED4DA;
        opacity: 1;
        font-family: Albert Sans, Verdana, Arial, Microsoft Sans Serif;
        font-size: 9px;
        /*font-size: 12px;*/
    }

}




/*small device*/
/*
.section1, .section2, .section3 {
    width: 100%;
    height: 215px
}
    */
/*medium device*/
/*
@media only screen and (min-width: 481px) and (max-width: 768px) {
    
    .section1, .section2, .section3 {
        width: 50%;;
        height: 320px
    }
}

*/

/*large device*/
/*
@media only screen and (min-width: 769px) {
    .section1, .section2, .section3 {
        width: 33.3%;
        height: 350px
    }
}

    */
/*
@media (min-device-width: 400px) and  (max-device-height: 500px) and (orientation: landscape) {
{


.Login {
    text-align: center;
    background-color: yellow;
    overflow: auto;
    display: block;
    height: 80vh; *//*2024-11-12:  was 70%*//*
    width: 90%;
    margin: 0px auto;
    border-radius: 12px 12px 6px 6px;
    position: relative;
}

}

*/




/*Liesel's Laptop*/
@media (min-device-width: 1500px) and  (max-device-height: 1100px) {

}