/* main color #23bebc */
:root {
    --primaryColor: #037ec6;
    --primaryColorLight: #7ed0ff;
    --primaryColorDark: #005b90;
    --lightRed: #f96d6d;
    --darkGray: #808080;
    --lightBlue: #64a9dc;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
}

.lblPage {
    font-family: Tahoma,Calibri;
    font-size: 18px;
    color: var(--lightRed);
}

.imgLoginLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 300px; /* cannot be larger than 300px wide */
    height: auto;
    max-height: 100px; /* cannot be larger than 100px tall */
}

.lblStyle {
    font-family: Tahoma,Calibri;
    font-size: 16px;
    color: var(--darkGray);
    text-decoration: none;
}

.lblStyleHeader {
    font-family: Tahoma,Calibri;
    font-size: 18px;
    color: var(--primaryColor);
    text-decoration: none;
}

.lblStyleHeaderLogin {
    text-align: center;
    font-family: Tahoma,Calibri;
    font-size: 18px;
    color: #ffd802;
    text-decoration: none;
}

.txtStyle {
    text-align: left;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 60%;
    height: 30px;
    font-family: Tahoma,Calibri;
    font-size: 15px;
    color: var(--darkGray);
    border-radius: 10px;
}

.txtStyleDesc {
    text-align: left;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 90%;
    height: 30px;
    font-family: Tahoma,Calibri;
    font-size: 15px;
    color: var(--darkGray);
    border-radius: 10px;
}

.txtStyleTable {
    text-align: left;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 60%;
    height: 30px;
    font-family: Tahoma,Calibri;
    font-size: 15px;
    color: var(--darkGray);
    border-radius: 10px;
}

.txtStyleLogin {
    text-align: center;
    width: 100%;
    height: 40px;
    font-family: Tahoma,Calibri;
    font-size: 15px;
    color: var(--darkGray);
    padding: 1px 10px 1px 10px;
    border-radius: 10px;
    border-radius: 10px;
}

/* NOTE: previous duplicate .imgLoginLogo rules removed to avoid conflicts. */

.imgProfile {
    width: 150px;
    height: 150px;
    margin: 3% 3% 3% 3%;
}

.txtStyleDate {
    text-align: center;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 50%;
    height: 30px;
    font-family: Tahoma,Calibri;
    font-size: 12px;
    color: var(--darkGray);
    border-radius: 10px;
}

.ddlStyleTime {
    text-align: center;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 25%;
    height: 30px;
    font-family: Tahoma,Calibri;
    font-size: 12px;
    color: var(--darkGray);
    border-radius: 10px;
}

.ddlStyle {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 70%;
    height: 30px;
    font-family: Tahoma,Calibri;
    font-size: 12px;
    color: var(--darkGray);
    border-radius: 10px;
}

.tblTitle {
    background-color: var(--primaryColor);
    font-family: Tahoma,Calibri;
    font-size: 15px;
    color: white;
    height: 50px;
    text-decoration: none;
}

.tblHeader {
    text-align: center;
    background-color: var(--primaryColor);
    font-family: Tahoma,Calibri;
    font-size: 13px;
    color: white;
    height: 50px;
    text-decoration: none;
    
}

.tdVacStyle {
    height: auto;
    text-align: left;
    font-family: Tahoma,Calibri;
    font-size: 12px;
    color: var(--darkGray);
    text-decoration: none;
}

.tdStyle {
    height: auto;
    padding-bottom: 10px;
    text-align: center;
    font-family: Tahoma,Calibri;
    font-size: 12px;
    color: var(--darkGray);
    text-decoration: none;
}

.txtMenu {
    margin-left: 20%;
    text-align: left;
    font-family: Tahoma,Calibri;
    font-size: 12px;
    color: white;
    text-decoration: none;
}

.tdMenu {
    font-family: Tahoma,Calibri;
    height: 50px;
}

    .tdMenu:hover {
        background-color: lightblue;
    }

.tdMenuSelected {
    height: 50px;
    background-color: lightblue;
}

.divStyle {
    height: auto;
    margin-left: 3%;
    margin-top: 1%;
    padding: 3% 3% 3% 2%;
    border-left-color: var(--lightBlue);
    border-left-style: groove;
    border-left-width: thick;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.divMenu {
    height: 70px;
    width: 90%;
    margin-left: 6%;
    margin-right: 7%;
    background-color: var(--lightBlue);
    border-radius: 10px;
}

.tdPageHeader {
    height: 30px;
    text-align: center;
    background-color: var(--primaryColorDark);
}