/*========================================================================================================================================*/
/* All Pages */
body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    color: #000;
    font-weight: normal;
    text-align: left;
    padding: 0px;
    margin: 0px 0px 30px 0px;
    background-position: top;
    background-color: transparent;
    z-index: 0;
}

#outer {
    font-size: 12px;
    min-height: 450px;
    padding: 0px;
    margin: 0px 10px 10px 10px;
}

#outer_auto {
    font-size: 0.85em;
    min-height: 450px;
    padding: 0px;
    margin: 0px 10px 10px 10px;
    border: 1px #fbfbfb dotted;
}

#outer_blank {
    font-size: 0.85em;
    min-height: 450px;
    padding: 0px;
    margin: 0px 10px 10px 10px;
}

/* Hack for IE \*/
* html #outer {
    height: 450px;
}


/*========================================================================================================================================*/
/* Loging Box:      updated 03/04/2025 */  
#login {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
    line-height: 20px;
    min-height: 200px;
    padding: 0px 10px;
    margin: 0px auto 0px auto;
    background-color: #def;
    border: 1px solid #44f;
    border-radius: 6px;
    border-collapse: separate !important;
    box-shadow: 5px 5px 2px grey;
}

    #login div {
        height: 32px;
        line-height: 26px;
    }

    #login div .lineheight18 {
        height: 18px;
        line-height: 18px;
    }

        #login div input {
            font-size: inherit;
            height: 26px !important;
        }

        #login div input[type="text"], #login div input[type="password"] {
            float: right;
        }

/*========================================================================================================================================*/
/* Paragraph and Font settings */
p {
    margin: 0;
    padding: 2px 0px 0px 0px;
    height: 12px;
}

/* set default margin and padding for span element */
span {
    margin: 0;
    padding: 0px;
}

h1 { /* Page Heading (layout) */
    font-size: 24px;
    color: #03f;
    margin: 2px 0px;
    padding: 0px;
}

h2 { /* Page Sub Heading (all pages) */
    font-size: 20px;
    color: #000;
    margin: 10px 0px;
    padding: 0px;
}

h3 { /* blue title on page */
    font-size: 16px;
    font-weight: bold;
    color: #03f;
    margin: 6px 0px 3px 0px;
    padding: 0px;
}

h4 { /* No currently in use. spare */
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    padding: 3px;
}

h5 { /* Light Blue title bar */
    font-size: 14px;
    font-weight: bold;
    background-color: #acf;
    border: 1px solid #ccc;
    color: #000;
    margin: 1px 0px;
    padding: 2px 10px;
}

h6 { /* blue underlined text */
    font-size: 14px;
    font-weight: bold;
    color: #03f;
    margin: 15px 0px 5px 0px;
    padding: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #05948f;
}

/* used in Development program*/
.iframe_doc {
    width: 800px;
    max-width: 776px;
    height: 1130px;
}

.iframe_img {
    width: 800px;
    max-width: 776px;
    padding: 50px 15px 15px 15px;
    border: 2px solid #ccc;
    background: #666;
}

.banner {
    background-color: #fb0;
}

.header {
    background-color: #cc9;
}

.transformText {
    display: inline-block;
    position: relative;
    margin-left: 0px;
    transform: rotate(-90deg);
    text-align: center;
    vertical-align: top;
    width: 5px;
    height: 20px
}

.promtMsg {
    width: 240px;
    float: right;
    margin-top: 4px;
    margin-right: 4px;
    font-size: 12px;
}

/*========================================================================================================================================*/
/* override default settings */
#outer ul, ul li, ol, ol li {
    padding: 0px;
    margin: 0px 0px 0px 10px;
    line-height: 18px;
}
#outer_auto ul, ul li, ol, ol li {
    padding: 0px;
    margin: 0px 0px 0px 10px;
    line-height: 20px;
}



/*========================================================================================================================================*/
/* Protect page from copy paste*/
.CopyProtected {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Protect page from copy paste*/
.CopyUnprotected {
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}



/*========================================================================================================================================*/
/* FORMATTING FOR 'column Sytling' */
/* used for creating column on page */
#PageColumn {
    float: left;
    padding: 0px;
    margin: 0px;
}



/*========================================================================================================================================*/
/* clear line break */
/* section break, minimal size, used extensively throughout the website */
.PageBreakStd {
    clear: both;
    min-height: 1px;
    margin: 0px;
    padding: 0px;
    page-break-after: always;
}

.SectionBreakStd {
    clear: both;
    min-height: 1px;
    margin: 0px;
    padding: 0px;
}

/* section break with box for message */
.SectionBreakMsg {
    clear: both;
    padding: 0px;
    margin: 10px auto;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    min-height: 20px
}



/*========================================================================================================================================*/
/* FROMATTING FOR Block Displays*/
.Block-Inline-Line {
    display: inline-block;
    border-bottom: 1px solid #ddd;
    border-collapse: collapse;
    padding: 0px;
    margin: 0px;
}

.Block-Inline-Clr {
    display: inline-block;
    margin: 0px;
    padding: 1px;
}

.Block-Inline-Yellow {
    display: inline-block;
    background-color: rgba(255, 255, 0, 0.40);
    width: 185px;
    padding: 2px 5px;
    margin: 1px;
    text-align: left;
    color: #000;
}


/*========================================================================================================================================*/
/* special text formatting */
.strikeOut {
    text-decoration: line-through;
    text-decoration-color: #f00;
    text-decoration-thickness: 2px;
    font-style: oblique;
    color: #999;
}
    .strikeOut a {
        text-decoration: line-through !important;
        text-decoration-color: #f00 !important;
        font-style: oblique !important;
        color: #999 !important;
    }

.greyOut {
    text-decoration: line-through;
    text-decoration-color: #999;
    text-decoration-thickness: 1px;
    font-style: oblique;
    color: #999;
}

    .greyOut a {
        font-style: oblique !important;
        color: #999 !important;
    }

.greyText {
    text-decoration-color: #999;
    text-decoration-thickness: 1px;
    font-style: oblique;
    color: #999;
}
    .greyText a {
        font-style: oblique !important;
        color: #999 !important;
    }

.LockedRecord {
    color: #9f003f;
}
    .LockedRecord input, .LockedRecord select {
        color: #9f003f !important;
        padding-right: 3px !important;
    }

.shadeOut {
    font-style: oblique;
    color: #999;
    background-color: rgb(255 0 0 / 0.25) !important;
}

.superscript {
    vertical-align: super;
    font-size: 70%; /*smaller*/
    line-height: normal;
}
.comments {
    font-size: 85%; /*smaller*/
    display: inline-block;
    float: right;
    margin-top: 3px
}

.informationbox {
    padding: 3px;
    background-color: #ff6;
    line-height: 16px;
    border: solid 1px #990;
    z-index: 20;
}
.informationboxAbs {
    display: block;
    position: absolute;
    padding: 3px;
    background-color: #ff6;
    line-height: 16px;
    border: solid 1px #990;
    z-index: 20;
}

.underline {
    border-bottom: 1px solid #05948f;
}

.overlineBlue {
    border-top: 1px solid #00f;
}

.overlineGrey {
    border-top: 1px solid #ddd;
    margin-top: 3px;
    padding-top: 3px;
}

.NumberCell {
    width: 20px;
    margin: 0px;
    padding: 0px;
    text-align: right
}

.Condensed {
    margin: 0px;
    padding: 0px;
    letter-spacing: -0.5px;
}

.oblique {
    font-style: oblique;
}

.LCP_TrafficLight {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: transparent !important;
    border: 1px solid #333;
}

.SurveyResult {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: inline-block;
    width: 14px;
}

.OrgChartCell {
    margin-top: -15px;
    margin-right: 0px;
    margin-bottom: 5px;
    padding: 3px;
    min-width: 180px;
    border: solid 1px #000;
    background-color: #efefff;
    z-index: 10;
    line-height: 12px;
    white-space: nowrap;
    display: inline-block;
}

.OrgChartLine {
    display: block;
    position: relative;
    margin-top: 0px;
    width: 80px;
    height: 38px;
}

    .OrgChartLine:before {
        display: inline-block;
        position: relative;
        content: "_ _ _ _";
        color: #f00;
        z-index: -1;
        height: 26px;
        line-height: 26px;
        margin-top: 0px;
        bottom: 0px;
        left: -40px;
        border-left: 1px dashed #ff0000;
    }

/*========================================================================================================================================*/
/* rotate image */
.rotate {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}



/*========================================================================================================================================*/
/* Container holding the image and the text */
.imgcontainer {
    position: relative;
    text-align: center;
    color: black;
    font-weight: bold;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*========================================================================================================================================*/
/* Styles for table input boxes*/
#outer_auto input[type="text"], #outer_auto input[type="file"], #outer_auto input[type="password"], #outer_auto select, #outer_auto .multi select {
    height: 24px !important;
}

:focus {
    outline: 1px solid #0bb;
}

input:not([type="submit"]), select, textarea {
    box-sizing: border-box !important;
    margin: 0px !important;
    line-height: 16px !important;
    color: #00f;
    background-color: #fff;
    border-collapse: collapse;
    border: #aaa 1px solid;
    border-radius: 1px;
}

input {
    font-family: inherit;
    font-size: inherit;
    padding: 0px 2px !important;
    height: 22px !important;
    text-indent: 4px;
    /* -webkit-touch-callout: none; /* iOS Safari */
    /* -webkit-user-select: none; /* Safari */
    /* -khtml-user-select: none; /* Konqueror HTML */
    /* -moz-user-select: none; /* Old versions of Firefox */
    /* -ms-user-select: none; /* Internet Explorer/Edge */
    /* user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

    input[type=file] {
        width: 370px;
    }


textarea {
    font-family: inherit;
    font-size: inherit;
    padding: 4px !important;
    display: block;
    resize: vertical;
}

select {
    font-family: inherit;
    font-size: inherit;
    padding: 0px !important;
    text-indent: 1px;
    display: inline-block;
}

/* Selection box for multiple choices*/
.multi {
    vertical-align: top !important;
}

    .multi select, .multi select:not(focus) {
        height: 22px;
        line-height: 20px;
        position: absolute; /*this makes the text float over the page*/
        margin: 1px 0px !important;
        padding: 0px !important;
        z-index: 45;
        border: solid 1px #05948f;
    }

        .multi select:focus {
            background-color: #e8ead5 !important;
            min-height: 400px;
            z-index: 48;
        }

        .multi select option {
            height: inherit;
            line-height: 14px;
            padding-top: 3px
        }

            .multi select option[value="-9"] {
                color: #666;
                font-style: oblique;
                background-color: #eef;
            }



label {
    display: block;
    vertical-align: top;
    float: left;
    margin-right: 10px;
}

input[type="checkbox"], input[type="radio"] {
    border-collapse: collapse;
    margin: 3px 4px 0px 0px !important;
    padding: 0px !important;
    width: 15px;
    height: 15px !important;
    border: 1px solid #888;
}

.checkboxLarge input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #03f;
}

.a_button {
    color: inherit;
    font-size: inherit;
    background-color: #eee !important;
    padding: 2px 4px !important;
    border-width: 1px;
    border-style: outset;
    border-color: #888;
    border-image: initial;
    border-radius: 3px;
}
    .a_button:active {
        position: relative;
        top: 1px;
        border-style: inset;
    }

.div_button {
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8), inset 0px 0px 2px rgba(154, 147, 113, 0.95);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-indent: 0;
    border: 1px solid #666;
    display: inline-block;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    text-shadow: 0px 0px 0px #73ad00;
    border-style: outset;
    padding: 4px 10px;
    z-index: 10px
}

    .div_button:hover {
        background-color: #eee;
        cursor: pointer;
    }

    .div_button:active {
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8), inset 0px 0px 2px rgba(154, 147, 113, 0.95);
        position: relative;
        top: 1px;
        border-style: inset;
        cursor: pointer;
    }


/*========================================================================================================================================*/
/* Styles for media formats*/
select::-moz-focus-inner {
    /*Remove button padding in FF*/
    border: 0;
    padding: 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /*safari and chrome*/
    select {
        height: 22px;
        line-height: 22px;
        padding-top: 1px
    }
}

@media screen\0 {
    /* IE Hacks: targets IE 8, 9 and 10 */
    select {
        height: 22px;
        line-height: 22px;
        padding-top: 1px
    }
}

@-moz-document url-prefix() {
    /* targets Firefox only */
    select {
        padding: 0px 0 !important;
    }
}



@media print {
    body {
        background: none;
        -ms-zoom: 1.665;
    }

    div.portrait, div.landscape {
        margin: 0px;
        padding: 0px;
        border: none;
        background: none;
    }

    div.portrait {
        transform: rotate(270deg) translate(-231mm, 0);
        transform-origin: 0 0;
    }
}

/* media on screen display */
@media screen {
    .Screen_Only {
        visibility: visible
    }

    .Print_Only {
        display: block;
        visibility: hidden;
        height: 0px;
    }
}

/* media on print do not display */
@media print {
    .Screen_Only {
        display: block;
        visibility: hidden;
        height: 0px;
    }

    .Print_Only {
        visibility: visible
    }
}

@media print {
    .no-page-break {
        display: inline-table;
        break-inside: avoid;
        page-break-inside: avoid; /* Legacy property for compatibility */
    }
}



/*========================================================================================================================================*/
/* Styles for Development Program */
.TrafficLight {
    display: inline-block;
    border: 1px solid #000;
    height: 13px;
    width: 13px;
    border-radius: 8px;
    margin-right: 8px;
    margin-left: 8px;
    float: right;
}

.TrafficLightRed {
    background-color: rgba(255, 0, 0, 1.00);
}

.TrafficLightYellow {
    background-color: rgba(255, 255, 0, 1.00);
}

.TrafficLightGreen {
    background-color: rgba(0, 255, 0, 1.00);
}

.vcontainer span {
    display: table-cell;
    vertical-align: top;
}



/*========================================================================================================================================*/
/* styles for Task List*/
.tasklist, .tasklist p, .tasklist div {
    line-height: 15px;
    min-height: 15px;
    font-size: 13px;
}


/*========================================================================================================================================*/
/* Risk score background colours*/
.bgColorRed, .bgColorYellow, .bgColorBlue, .bgColorGreen, .bgColorGrey, .bgColorClear {
    font-size: inherit;
    font-weight: normal;
    text-align: center;
    color: #000;
}

.bgColorRed {
    background-color: rgba(255, 0, 0, 0.40);
}

.bgColorYellow {
    background-color: rgba(255, 255, 0, 0.40);
}

.bgColorBlue {
    background-color: rgba(0, 154, 255, 0.40);
}

.bgColorGreen {
    background-color: rgba(0, 255, 0, 0.40);
}

.bgColorGrey {
    background-color: rgba(0, 0, 0, 0.15);
}

.bgColorClear {
    background-color: none;
}

.fontRedBold {
    color: #f00;
    background-color: rgba(0, 0, 0, 0.15);
}