* {
    box-sizing: border-box;
}

html, form {
    height: 100%;
    font-family: var(--font-family);
}

html {
    font-size: 14px;
}

body {
    font-size: 1.0rem;
    line-height: 1.50rem;
    min-width: 350px;
    margin: 0;
    padding: 0;
    padding-bottom: 100px !important;
    color: black;
}

.st_bgLight {
    background-color: var(--bg-light);
}

.st_bgNone {
    background-color: white;
}

.st_hrQuestion {
    margin: 15px 0;
    max-width: 600px;
    width: 100%;
    border: dashed 1px silver;
    height: unset;
    box-shadow: unset;
}

.li-pad li {
    padding-bottom: 5px;
}

/* ============================== */
/* HEADERS */

.st_h1, h1, .st_h2, h2 {
    font-size: 1.55rem;
    font-weight: bold;
    margin: 0.75rem 0;
}

.st_h3, h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0.5rem 0;
}

.st_h4, h4 {
    font-size: 1.0rem;
    margin: 0.25rem 0;
    font-weight: bold;
}

p {
    margin: 0.75rem 0;
}

.divInnerBox {
    display: inline-block;
    border: solid 1px silver;
    margin: 1px;
    width: 100px;
    padding: 5px;
}

/* ============================== */
/* LINKS */

a, a:visited, a:link {
    color: blue;
}

/* ============================== */
/* MAIN LAYOUT */

.st_mainContainer {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

.st_RoundedCorner {
    border: solid 1px silver;
    border-radius: 15px;
    padding: 15px;
}

.st_boxShadow {
    /*box-shadow: 5px 5px 5px #888888;*/
    box-shadow: 0px 5px 10px 0px #888888;
}

.st_iframeFull {
    width: 100%;
    height: 900px;
    border: none;
}

.st_clearAfter::after {
    content: "\a";
    white-space: pre;
}

b, .st_bold, .st_Bold {
    font-weight: bold;
}

i, .st_italic {
    font-style: italic;
}

.st_txtCap {
    text-transform: uppercase;
}

.st_block, .stBlock {
    display: block;
}

.st_mainCenter {
    margin: 0 auto;
}

.st_txtCenter {
    text-align: center;
}

.st_txtRight {
    text-align: right;
}

.st_txtsml {
    font-size: 0.9rem !important;
    line-height: 1.2rem !important;
}

.st_txtxsml {
    font-size: 0.8rem !important;
    line-height: 1.2rem !important;
}

.st_txtnotes, .msgNote {
    font-weight: bold;
    color: var(--color-med);
    font-size: 0.85rem;
}

hr {
    height: 5px;
    border: 0;
    box-shadow: 0 5px 5px -5px #8c8c8c inset;
}

.st_imgLogo {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.st_MR10px {
    margin-right: 10px;
}

/* ============================== */
/* ALERT MESSAGES */
.st_txtError {
    color: var(--error-txt) !important;
    font-weight: bold !important;
    font-size: 0.90rem !important;
}

.st_txtRed {
    color: var(--error-txt) !important;
}

.st_divError {
    border: solid 1px var(--error-border);
    background-color: var(--error-bg);
    color: var(--error-txt);
    font-weight: bold;
    font-size: 0.90rem;
    padding: 8px 5px;
    display: block;
    width: 100%;
    margin: 0.25rem 0;
}

.st_txtSuccess {
    color: var(--success-txt);
    font-weight: bold;
    font-size: 0.90rem;
}

.st_divSuccess {
    border: solid 1px var(--success-border);
    background-color: var(--success-bg);
    color: var(--success-txt);
    font-weight: bold;
    font-size: 0.90rem;
    padding: 8px 5px;
    display: block;
    width: 100%;
    margin: 0.25rem 0;
}

.st_divTest {
    border: solid 1px maroon;
    background-color: yellow;
    color: maroon;
    font-weight: bold;
    font-size: 1.0rem;
    padding: 8px 5px;
    text-align: center;
    display: block;
    width: 100%;
}

/* ============================== */
/* Width */

.st_w50pxfix {
    max-width: 50px;
}

.st_w150px {
    width: 100%;
    max-width: 150px;
}

.st_w250px {
    width: 100%;
    max-width: 250px;
}

.st_w350px {
    width: 100%;
    max-width: 350px;
}

.st_w400px {
    width: 100%;
    max-width: 400px;
}

.st_w450px {
    width: 100%;
    max-width: 450px;
}

.st_w600px {
    width: 100%;
    max-width: 600px;
}

.st_w100perc {
    width: 100%;
}

.st_w1pxfix {
    width: 1px;
}

.st_w350pxfix {
    width: 340px;
}

/* ============================== */
/* TABLES */

.st_tblMin {
    border-collapse: collapse;
}

    .st_tblMin td {
        padding: 1px !important;
    }

.st_tblMain {
    border-collapse: collapse;
}

    .st_tblMain tr {
        /*height: 35px;*/
    }

    .st_tblMain td {
        padding: 5px;
    }

.st_tblBorder {
    border: solid 1px var(--color-med);
}

.st_tblBorderBig {
    border: solid 5px var(--color-light);
}


.st_tdBorder td {
    border: solid 1px var(--color-med);
}

.st_trHeader, .bgSilver {
    font-size: 0.90rem;
    font-weight: bold;
    background-color: rgb(175,175,175);
}

.st_trHover:hover {
    background-color: var(--bg-light) !important;
}

.bgGreen {
    background-color: rgb(181, 230, 162);
}

.bgBisque {
    background-color: bisque;
    color: darkred;
}

/* ============================== */
/* BUTTONS */
.st_btnMain, button, input[type="submit"] {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    border: none;
    min-width: 150px;
}

.st_btnPrimary, button, input[type="submit"] {
    outline: solid 1px var(--bg-dark);
    background-color: var(--bg-light);
    color: var(--bg-dark);
}

    .st_btnPrimary:hover, .st_btnPrimary:active, .st_btnPrimary:focus,
    input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus,
    button:hover, button:active, button:focus {
        outline: solid 1px var(--bg-light);
        background-color: var(--bg-dark);
        color: var(--bg-light);
    }

/* ============================== */
/* INPUTS */

.imgSubRpt {
    height: 100px;
    margin: 5px;
}

.divCallRptImage {
    padding: 5px;
    display: inline-block;
    border: solid 1px bisque;
    margin: 10px;
}

    .divCallRptImage a {
        display: block;
    }

    .divCallRptImage img {
        height: 300px;
    }

input[type="text"], input[type="number"],  select {
    min-width: 100px;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

    .st_txtInput, .st_ddlInput, select, input[type="text"], input[type="number"],
    textarea, .txtArea, input[type="date"], input[type="password"] {
        padding: 8px;
        border: none;
        border-radius: 5px;
        outline: solid 1px rgb(125,125,125);
    }

textarea, .txtArea {
    padding: 5px;
    font-size: inherit;
    border-radius: 5px;
    border: none;
    outline: solid 1px rgb(125,125,125);
    max-width: 900px;
    min-width: 300px;
    width: 100%;
    max-height: 120px;
    min-height: 120px;
    height: 120px;
    vertical-align: top;
    text-align: left;
}

input[type="radio"], input[type="checkbox"] {
    transform: scale(1.5);
    cursor: pointer;
}

    input[type="radio"]:hover, input[type="checkbox"]:hover {
        border: solid 2px green;
    }

.st_txtInput:focus, .st_txtInput:hover, .st_txtInput:active,
.st_ddlInput:focus, .st_ddlInput:hover, .st_ddlInput:active,
.st_textArea:focus, .st_textArea:hover, .st_textArea:active,
select:focus, select:hover, select:active,
textarea:focus, textarea:hover, textarea:active,
input[type="text"]:focus, input[type="text"]:hover, input[type="text"]:active,
input[type="number"]:focus, input[type="number"]:hover, input[type="number"]:active,
input[type="date"]:focus, input[type="date"]:hover, input[type="date"]:active,
input[type="password"]:focus, input[type="password"]:hover, input[type="password"]:active {
    outline: none !important;
    -webkit-box-shadow: var(--input-border-focus) !important;
    box-shadow: var(--input-border-focus) !important;
}

.duplBorder {
    border: solid 5px red !important;
}