/* Minification failed. Returning unminified contents.
(33,1): run-time error CSS1019: Unexpected token, found ']'
(153,26): run-time error CSS1030: Expected identifier, found ','
(153,39): run-time error CSS1031: Expected selector, found ')'
(153,39): run-time error CSS1025: Expected comma or open brace, found ')'
(2433,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2434,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4104,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes'
(4105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4166,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(4167,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4290,1): run-time error CSS1019: Unexpected token, found '@-ms-keyframes'
(4291,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4352,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4353,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4428,41): run-time error CSS1046: Expect comma, found '38'
(4428,47): run-time error CSS1046: Expect comma, found '/'
(6793,42): run-time error CSS1046: Expect comma, found '0'
(6793,46): run-time error CSS1046: Expect comma, found '/'
(6794,34): run-time error CSS1046: Expect comma, found '0'
(6794,38): run-time error CSS1046: Expect comma, found '/'
 */
.svg-icon-14 {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.5rem;
}
.svg-icon-16 {
    display: inline-block;
    width: 1rem;
    height: 1rem;
}
.svg-icon-24 {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
}
.svg-icon-32 {
    display: inline-block;
    width: 2rem;
    height: 2rem;
}
.svg-icon-36 {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
}
.svg-icon-64 {
    display: inline-block;
    width: 4rem;
    height: 4rem;
}

] /*========================  WEB STANDARD =========================*/
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ps-text-muted {
    color: #636c72 !important;
}

.ps-text-primary {
    color: #0275d8 !important;
}

.ps-text-success {
    color: #5cb85c !important;
}

.ps-text-info {
    color: #5bc0de !important;
}

.ps-text-warning {
    color: #f0ad4e !important;
}

.ps-text-danger {
    color: #d9534f !important;
}

.ps-bg-primary {
    background-color: #0275d8 !important;
}

.ps-bg-success {
    background-color: #5cb85c !important;
}

.ps-bg-info {
    background-color: #5bc0de !important;
}

.ps-bg-warning {
    background-color: #f0ad4e !important;
}

.ps-bg-danger {
    background-color: #d9534f !important;
}

.alert.ps-warning {
    background-color: #fff3b4;
    border-color: #f7e3b9;
    color: #b6924f;
}

.SmartCalendarTitle.BirthDate > .fc-content:before {
    content: "";
    background-image: url(/Coachps/images/cch-birthdate-16.png);
    display: inline-block;
    width: 16px;
    height: 16px;
}

.SmartCalendarTitle {
    min-height: 20px;
}

    .SmartCalendarTitle.TrainingRoadMap.ManDatory > .fc-content:before {
        content: "";
        background-image: url(/Coachps/images/cch-mandatory-16.png);
        display: inline-block;
        width: 16px;
        height: 16px;
    }

    .SmartCalendarTitle.TrainingRoadMap.Optional > .fc-content:before {
        content: "";
        background-image: url(/Coachps/images/cch-optional-16.png);
        display: inline-block;
        width: 16px;
        height: 16px;
    }

    .SmartCalendarTitle > .fc-content > .fc-title {
        vertical-align: sub;
    }

    .SmartCalendarTitle.TrainingRoadMap.ManDatory > .fc-content > .fc-title {
        vertical-align: super;
    }

    .SmartCalendarTitle.TrainingRoadMap.Optional > .fc-content > .fc-title {
        vertical-align: super;
    }


input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
select {
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
    outline: none !important;
    height: 20px;
}

input:not([type=checkbox],[type=radio]):hover, input:not([type=checkbox],[type=radio]):active, input:not([type=checkbox],[type=radio]):focus {
    outline: none !important;
}

select[disabled] {
    cursor: not-allowed;
}

/*========================  WEB STANDARD =========================*/

.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.textAlignRight {
    text-align: right;
}

.textAlignCenter {
    text-align: center;
}

.textAlignLeft {
    text-align: left;
}

.roundTopCenter {
    margin: 0px 16px 0px 16px;
    background-color: #FFFFFF;
}

.roundCurve {
    margin-top: 5px;
    border: 2px solid white;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    background-color: White;
}

.roundBottomCenter {
    margin: 0px 16px 0px 16px;
    background-color: #FFFFFF;
}

.roundBottomLeft {
    margin: 0px 16px 0px -16px;
    width: 16px;
    height: 16px;
    background-image: url(/Coachps/images/bl.png);
}

.roundBottomRight {
    background: url(/Coachps/images/br.png) no-repeat top right;
}

.roundTopLeft {
    margin: 0px 16px 0px -16px;
    width: 16px;
    height: 16px;
    background-image: url(/Coachps/images/tl.png);
}

.roundTopRight {
    background: url(/Coachps/images/tr.png) no-repeat top right;
}

.roundCenter {
    padding: 5px;
    width: 99.1%;
    height: 100%;
    background-color: White;
}

.table-round {
    margin: 0;
    border-spacing: 0;
    border-collapse: collapse;
    border-style: none;
    border-color: White;
    background-color: transparent;
}

.borderCurve {
    padding: 5px 0;
    border: 1px solid #7B9EBD;
    -moz-border-radius: 1em !important;
    -webkit-border-radius: 1em !important;
    border-radius: 1em !important;
    background-color: #FFFFFF;
}

    .borderCurve.no-margin {
        margin: 0;
    }

.td-round-tl {
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    background-image: url(/Coachps/images/tl.png);
    background-position: bottom right;
    background-repeat: no-repeat;
}

.td-round-tc {
    padding: 0;
    height: 16px;
    background-color: #fff;
}

.td-round-tr {
    padding: 0;
    width: 16px;
    height: 16px;
    background-image: url(/Coachps/images/tr.png);
    background-position: bottom left;
    background-repeat: no-repeat;
}

.td-round-ml {
    padding: 0;
    background-color: #fff;
}

.td-round-mc {
    padding: 0;
    background-color: #fff;
}

.td-round-mr {
    padding: 0;
    background-color: #fff;
}


.td-round-bl {
    padding: 0;
    width: 16px;
    height: 16px;
    background-image: url(/Coachps/images/bl.png);
    background-position: right bottom;
    background-repeat: no-repeat;
}

.td-round-bc {
    padding: 0;
    height: 16px;
    background-color: #fff;
}

.td-round-br {
    padding: 0;
    width: 16px;
    height: 16px;
    background-image: url(/Coachps/images/br.png);
    background-position: left bottom;
    background-repeat: no-repeat;
}

.pager {
    margin-bottom: 18px;
    margin-left: 0;
    list-style: none;
    text-align: center;
    *zoom: 1;
}

    .pager:before,
    .pager:after {
        display: table;
        content: "";
    }

    .pager:after {
        clear: both;
    }

    .pager li {
        display: inline;
    }

    .pager a {
        display: inline-block;
        padding: 5px 14px;
        border: 1px solid #ddd;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        background-color: #fff;
    }

        .pager a:hover {
            background-color: #f5f5f5;
            text-decoration: none;
        }

    .pager .next a {
        float: right;
    }

    .pager .previous a {
        float: left;
    }

    .pager .disabled a,
    .pager .disabled a:hover {
        background-color: #fff;
        color: #999999;
        cursor: default;
    }

.label-success,
.badge-success {
    background-color: #468847;
}

.ACFormStatus {
    float: left;
    font-size: medium;
}

input[type=text] + label {
    margin-left: 3px;
}

label + input[type=text] {
    margin-left: 3px;
}

.adv-value span.ui-widget {
    border: none !important;
}

.adv-value input[pstype=clauseValue] + label + [pstype=clauseValue] {
    margin-left: 10px;
}

input[type="radio"], input[type="checkbox"] {
    vertical-align: middle;
}

input[type=radio] + label,
input[type=checkbox] + label {
    display: inline;
    padding-left: 5px;
    vertical-align: middle;
    margin-bottom: 0;
    cursor: pointer;
}

.radio-list td,
.radio-list td > span {
    position: relative;
}

    .radio-list td > input[type=radio],
    .radio-list td > span > input[type=radio] {
        position: absolute;
    }

        .radio-list td > input[type=radio] + label,
        .radio-list td > span > input[type=radio] + label {
            margin-left: 20px;
            margin-top: 3px;
        }

.table {
    margin-bottom: 20px;
    width: 100%;
}

    .table th,
    .table td {
        padding: 2px;
        line-height: 20px;
        /* text-align: left;
  vertical-align: top;*/
    }

    .table th {
        font-weight: bold;
    }

    .table thead th {
        vertical-align: bottom;
    }

    .table caption + thead tr:first-child th,
    .table caption + thead tr:first-child td,
    .table colgroup + thead tr:first-child th,
    .table colgroup + thead tr:first-child td,
    .table thead:first-child tr:first-child th,
    .table thead:first-child tr:first-child td {
        border-top: 0;
    }

    .table tbody + tbody {
        border-top: 2px solid #dddddd;
    }

    .table .table {
        background-color: #ffffff;
    }

.table-condensed th,
.table-condensed td {
    padding: 4px 5px;
}

.table-bordered {
    border: 1px solid #dddddd;
    border-collapse: collapse;
    border-left: 0;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

    .table-bordered th,
    .table-bordered td {
        border-left: 1px solid #dddddd;
    }

    .table-bordered caption + thead tr:first-child th,
    .table-bordered caption + tbody tr:first-child th,
    .table-bordered caption + tbody tr:first-child td,
    .table-bordered colgroup + thead tr:first-child th,
    .table-bordered colgroup + tbody tr:first-child th,
    .table-bordered colgroup + tbody tr:first-child td,
    .table-bordered thead:first-child tr:first-child th,
    .table-bordered tbody:first-child tr:first-child th,
    .table-bordered tbody:first-child tr:first-child td {
        border-top: 0;
    }

    .table-bordered thead:first-child tr:first-child > th:first-child,
    .table-bordered tbody:first-child tr:first-child > td:first-child {
        -moz-border-radius-topleft: 4px;
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    .table-bordered thead:first-child tr:first-child > th:last-child,
    .table-bordered tbody:first-child tr:first-child > td:last-child {
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
    }

    .table-bordered thead:last-child tr:last-child > th:first-child,
    .table-bordered tbody:last-child tr:last-child > td:first-child,
    .table-bordered tfoot:last-child tr:last-child > td:first-child {
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        border-bottom-left-radius: 4px;
    }

    .table-bordered thead:last-child tr:last-child > th:last-child,
    .table-bordered tbody:last-child tr:last-child > td:last-child,
    .table-bordered tfoot:last-child tr:last-child > td:last-child {
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        border-bottom-right-radius: 4px;
    }

    .table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
        -webkit-border-bottom-left-radius: 0;
        -moz-border-radius-bottomleft: 0;
        border-bottom-left-radius: 0;
    }

    .table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
        -webkit-border-bottom-right-radius: 0;
        -moz-border-radius-bottomright: 0;
        border-bottom-right-radius: 0;
    }

    .table-bordered caption + thead tr:first-child th:first-child,
    .table-bordered caption + tbody tr:first-child td:first-child,
    .table-bordered colgroup + thead tr:first-child th:first-child,
    .table-bordered colgroup + tbody tr:first-child td:first-child {
        -moz-border-radius-topleft: 4px;
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    .table-bordered caption + thead tr:first-child th:last-child,
    .table-bordered caption + tbody tr:first-child td:last-child,
    .table-bordered colgroup + thead tr:first-child th:last-child,
    .table-bordered colgroup + tbody tr:first-child td:last-child {
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
    }

td.error {
    background-color: #f2dede;
}

.table tbody tr.success > td {
    background-color: #dff0d8;
}

.table tbody tr.error > td {
    background-color: #f2dede;
}

.table tbody tr.warning > td {
    background-color: #fcf8e3;
}

.table tbody tr.info > td {
    background-color: #d9edf7;
}

.table-hover tbody tr.success:hover > td {
    background-color: #d0e9c6;
}

.table-hover tbody tr.error:hover > td {
    background-color: #ebcccc;
}

.table-hover tbody tr.warning:hover > td {
    background-color: #faf2cc;
}

.table-hover tbody tr.info:hover > td {
    background-color: #c4e3f3;
}

table.datatable {
    margin-bottom: 20px;
    width: 99%;
    border: 1px solid #466094;
    border-spacing: 0;
    border-collapse: collapse;
    background-color: #fff;
}

.datatable-header-row {
    border-top: 1px solid #466094;
    border-right: 1px solid #466094;
    border-bottom: 1px solid #466094;
    border-left: 1px solid #466094;
    background-color: rgb(224, 227, 232) !important;
    font-size: 11px;
}

.datatable-header-col {
    height: 28px;
    border-top: 1px solid #466094;
    border-right: 1px solid #466094;
    border-bottom: 1px solid #466094;
    border-left: 1px solid #466094;
}

    .datatable-header-col A:link {
        background-color: Transparent;
        color: Black;
        vertical-align: middle;
        text-decoration: none;
        font-weight: normal;
        font-size: 11px;
    }

    .datatable-header-col A:visited {
        background-color: Transparent;
        color: Black;
        vertical-align: middle;
        text-decoration: none;
        font-size: 11px;
    }

    .datatable-header-col A:active {
        background-color: Transparent;
        color: Black;
        vertical-align: middle;
        text-decoration: none;
        font-size: 11px;
    }

    .datatable-header-col A:hover {
        background-color: Transparent;
        color: Black;
        vertical-align: middle;
        text-decoration: underline;
        font-size: 11px;
    }

.datatable-item-row {
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    vertical-align: top;
    text-decoration: none;
    line-height: 1.42857;
}


.datatable-item-col {
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid #dddddd;
    border-left: 0;
    vertical-align: top;
    line-height: 1.42857;
}

.datatable-item-col-first {
    border-top: 1px solid #466094;
}


.datatable-foot-row {
    border-top: 1px solid #466094;
    border-right: 1px solid #466094;
    border-bottom: 1px solid #466094;
    border-left: 1px solid #466094;
    background-color: rgb(224, 227, 232) !important;
    font-size: 11px;
}


.datatable-foot-col {
    height: 28px;
    border-top: 1px solid #466094;
    border-right: 1px solid #466094;
    border-bottom: 1px solid #466094;
    border-left: 1px solid #466094;
}


.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.invisible {
    visibility: hidden;
}

.center-align {
    text-align: center;
}

td.RptFooter {
    text-align: left;
    border-top: 1px solid #E3E3E3;
    padding-top: 12px;
}

td.RptStep {
    padding-right: 0px;
    width: 0px;
    text-align: right;
}

/* Import Wizard */
td.wzWelcome {
    width: 13px;
}

td.wzSpecify {
    width: 13px;
}

td.wzVerifySetting {
    width: 14px;
}

td.wzImportsRecord {
    width: 50px;
}

td.wzSummary1 {
    width: 15px;
}

td.wzSummary2 {
    width: 200px;
}

td.wzError {
    width: 15px;
}

/* padding td */
tr.pageDetail td {
    vertical-align: top;
}

    tr.pageDetail td.width_col1 {
        width: 115px;
    }

    tr.pageDetail td.width_col2 {
        width: 135px;
    }

    tr.pageDetail td.padding_col {
        padding-left: 20px;
    }

    tr.pageDetail td.padding_col2 {
        padding-right: 20px;
    }

    tr.pageDetail td.padding_col3 {
        padding-left: 15px;
    }

    tr.pageDetail td.padding_col4 {
        padding-left: 10px;
    }

    tr.pageDetail td.padding_innerText, tr.pageDetail th.padding_innerText {
        padding: 2px 5px;
    }

/* padding td2 */
tr.per_pageDetail td {
    vertical-align: middle;
}

    tr.per_pageDetail td.padding_col {
        padding-left: 10px;
    }

/* padding td3 */
tr.bt_pageDetail td {
    vertical-align: bottom;
}

    tr.bt_pageDetail td.padding_col {
        padding-left: 10px;
    }


table.main td {
    vertical-align: top;
}

    table.main td.cap_1 {
        width: 115px;
    }

    table.main td.cap_3 {
        padding-left: 20px;
        width: 140px;
    }


html, body, div, ol, ul, li, dl, dt, dd, form, fieldset, a, img, button, iframe {
    margin: 0;
    padding: 0;
    border: 0;
    letter-spacing: normal;
}

.blockquote-reverse, blockquote, blockquote.pull-right {
    border-color: #E5EAF1;
}

body {
    width: 100%;
    height: 100%;
    font-weight: normal;
    color: #252525;
}

.popupBody {
    margin: 0;
    width: 100%;
    border: 0;
    background-color: #eef0f6;
    font-weight: normal;
    font-size: 11px;
    cursor: default;
}

.hPopupbase /*dao*/ {
    position: fixed;
    z-index: 500;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 10px 10px 10px;
    width: 100%;
    height: 50px;
    background-color: #0e70b1;
    font-size: 11px;
}

.BodyPopupbase /*dao*/ {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 85px 10px 10px 10px;
    width: 100%;
    height: 90%;
    font-size: 11px;
}

.FTPopupbase /*dao*/ {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    height: 10%;
    border-top: 1px solid black;
    text-align: right;
    font-size: 11px;
}

.MainDesc {
    padding: 10px 10px 10px 10px;
    width: 100%;
    background-color: #F0F8FF;
    font-size: 11px;
}

    .MainDesc p {
        color: Navy;
        font-weight: normal;
        font-size: 11px;
    }

.BuleHead {
    color: #000088;
}

.BlackHeader {
    color: #000000;
}

.WhiteHeader {
    color: #FFFFFF;
}

/* Table style */

TABLE.layout {
    margin: 0;
    width: 100%;
}

.stdTable {
    overflow-x: auto;
    width: 100%;
    table-layout: fixed;
}

    .stdTable td {
        vertical-align: top;
        padding: 2px;
    }

        .stdTable td.MainInstruction {
            border-bottom: none;
            padding-bottom: 15px;
            position: relative;
        }

            .stdTable td.MainInstruction:after {
                border-bottom: 1px solid Black;
                position: absolute;
                bottom: 10px;
                left: 0;
                width: 100%;
                display: block;
                content: "";
            }

.std1 {
    width: 115px;
}

.std2 {
}

table.letter {
    overflow-x: auto;
    width: 100%;
    table-layout: fixed;
}

table.infoTable {
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    table-layout: fixed;
}

    table.infoTable TR {
        padding-top: 4px;
        padding-bottom: 4px;
        width: 100%;
    }

    table.infoTable TD {
        vertical-align: top;
    }

table.MainTitle {
    width: 100%;
    color: #000000;
    letter-spacing: normal;
    font-weight: bold;
    font-size: 11px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#637689, EndColorStr=#63769b);
    cursor: default;
}

td.TitleLeft {
    padding-left: 5px;
    width: 50%;
    color: #ffffff;
    text-align: left;
    letter-spacing: normal;
    font-weight: bold;
    font-size: 14px;
    cursor: default;
}

td.TitleRight {
    padding-right: 10px;
    width: 50%;
    color: #ffffff;
    text-align: right;
    letter-spacing: normal;
    font-weight: bold;
    font-size: 14px;
    cursor: default;
}

td.NavLeft {
    width: 150px;
    height: 95%;
    background-color: White;
    vertical-align: top;
    text-align: left;
}

td.logo {
    width: 150px;
    text-align: center;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B4C5DF, EndColorStr=#91A9D0);
}

td.Workplace {
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#637689, EndColorStr=#63769b);
}

td.MenuBar {
    padding-left: 5px;
    width: 100%;
    height: 24px;
    background-color: #5A6B7D;
    color: #ffffff;
    text-align: left;
    letter-spacing: normal;
    font-weight: bold;
    font-size: 14px;
    cursor: default;
}

td.MenuToolsBar {
    padding-left: 5px;
    width: 100%;
    height: 26px;
    background-color: #DCDFE5;
    color: #ffffff;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
    cursor: default;
}

.TitleBar {
    padding-left: 5px;
    width: 100%;
    height: 32px;
    color: #ffffff;
    text-align: left;
    letter-spacing: normal;
    font-weight: bold;
    font-size: 14px;
    cursor: default;
}

.TitleBarLeft {
    overflow: hidden;
    padding-left: 5px;
    height: 32px;
    color: #ffffff;
    text-align: left;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: normal;
    font-weight: bold;
    font-size: 14px;
    cursor: default;
}

.TitleBarRight {
    overflow: hidden;
    padding-left: 5px;
    height: 32px;
    background-color: #63769b;
    color: #ffffff;
    text-align: right;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: normal;
    font-weight: bold;
    cursor: default;
    /*font-size: 14px;*/
}

td.WorkSpace {
    padding-left: 1px;
    width: 100%;
    height: 100%;
    color: #ffffff;
    vertical-align: top;
    text-align: left;
    letter-spacing: normal;
    font-weight: bold;
    font-size: 12px;
    cursor: default;
}

td.WorkSpaceLeft {
    padding: 0 1px 0 0;
    width: 160px;
    background-color: White;
    vertical-align: top;
    text-align: left;
}

td.WorkSpaceRight {
    padding: 10px;
    background-color: #ACC0E9;
    vertical-align: top;
    text-align: left;
    letter-spacing: normal;
}

td.WorkSpaceRight1 {
    background-color: #ACC0E9;
    vertical-align: top;
    text-align: left;
}

td.footer {
    padding-top: 10px !important;
    height: 10px;
    color: #000000;
    text-align: center;
    font-weight: bold;
    font-size: 10px;
}

td.StatusBar {
    padding-left: 5px;
    width: 100%;
    height: 5px;
    background-color: #63769b;
    color: #ffffff;
    text-align: left;
    letter-spacing: normal;
    font-weight: bold;
    font-size: 11px;
    cursor: default;
}

/* Tree Menu */

.t_Root {
    color: #000000;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
}

.t_Parent {
    padding-top: 1px;
    padding-bottom: 0;
    padding-left: 7px;
    width: 100%;
    height: 16px;
    color: #000000;
    text-align: left;
    cursor: pointer;
}

.t_Node {
    padding-top: 1px;
    padding-bottom: 0;
    padding-left: 7px;
    width: 100%;
    height: 16px;
    color: #000000;
    text-align: left;
    cursor: pointer;
}

.t_LeftNode {
}

.t_Hover {
    padding-top: 1px;
    padding-bottom: 0;
    padding-left: 7px;
    width: 100%;
    color: #000000;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#EDF1D5, EndColorStr=#D4DD9C);
}

.t_Select {
    padding-top: 1px;
    padding-bottom: 0;
    padding-left: 7px;
    width: 95%;
    background-color: #acc0e9;
    color: #000000;
}

/* Tab Strip */
.MultiPageDetailStyle {
    padding: 10px;
    width: 100%;
    height: 96%;
    border-top: medium none;
    border-right: #000000 1px solid;
    border-bottom: #000000 1px solid;
    border-left: #000000 1px solid;
    background: #f5f5dc;
}

.MultiPageDetailStyle2 {
    padding: 10px;
    width: 100%;
    height: 96%;
    border-top: medium none;
    border-right: #000000 1px solid;
    border-bottom: #000000 1px solid;
    border-left: #000000 1px solid;
    background: none transparent scroll repeat 0 0;
}

.MultiPagePopupStyle {
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 10px;
    width: 100%;
    height: 100%;
    border-top: medium none;
    border-right: #000000 1px solid;
    border-bottom: #000000 1px solid;
    border-left: #000000 1px solid;
    background: #eef0f6;
    table-layout: auto;
}

    .MultiPagePopupStyle tbody {
        width: 100%;
    }

.MultiPageNoTab {
    overflow-x: auto;
    overflow-y: visible;
    padding: 10px;
    width: 100%;
    height: 96%;
    border: 1px solid #000000;
    background: #eef0f6;
}

.MultiPageAnalysisStyle {
    overflow-x: auto;
    overflow-y: auto;
    padding: 10px;
    width: 100%;
    height: 96%;
    border: 1px solid #000000;
    background: none transparent scroll repeat 0 0;
}

.MultiPageAnalysisStyle2 {
    overflow-x: auto;
    overflow-y: auto;
    padding: 10px;
    width: 100%;
    height: 96%;
    border: 1px solid #000000;
    background: #ffffff;
}

.TabStripStyle {
    width: 100%;
    height: 20px !important;
    font-weight: bold;
    font-size: 8pt;
}

    .TabStripStyle td {
        height: 20px;
    }

/*  LinkButton Group */
/* NormalLinkButton style*/
A.NormalLinkButton:link {
    background-color: Transparent;
    color: #3366CC;
    vertical-align: middle;
    text-decoration: none;
    font-weight: normal;
}

A.NormalLinkButton:visited {
    background-color: Transparent;
    color: #3366CC;
    vertical-align: middle;
    text-decoration: none;
    font-weight: normal;
}

A.NormalLinkButton:active {
    background-color: Transparent;
    color: #3366CC;
    vertical-align: middle;
    text-decoration: none;
    font-weight: normal;
}

A.NormalLinkButton:hover {
    background-color: Transparent;
    color: #3366CC;
    vertical-align: middle;
    text-decoration: underline;
    font-weight: normal;
}

/* WhiteBoldLinkButton style for HeaderLinkButton */
A.WhiteBoldLinkButton:link {
    background-color: Transparent;
    color: #F0F8FF;
    vertical-align: middle;
    text-decoration: underline;
    font-weight: bold;
}

A.WhiteBoldLinkButton:visited {
    background-color: Transparent;
    color: #F0F8FF;
    vertical-align: middle;
    text-decoration: underline;
    font-weight: bold;
}

A.WhiteBoldLinkButton:active {
    background-color: Transparent;
    color: #F0F8FF;
    vertical-align: middle;
    text-decoration: underline;
    font-weight: bold;
}

A.WhiteBoldLinkButton:hover {
    background-color: Transparent;
    color: #F0F8FF;
    vertical-align: middle;
    text-decoration: underline;
    font-weight: bold;
}

td#t_breadcrumbs {
    padding: 2px 0 0 0;
    height: 20px;
    vertical-align: middle !important;
}

    td#t_breadcrumbs a {
        color: #3366CC;
        vertical-align: top !important;
    }

        td#t_breadcrumbs a:hover {
            color: #3366CC;
            vertical-align: top !important;
            text-decoration: underline;
        }

    td#t_breadcrumbs span {
        vertical-align: top !important;
    }

#YouAreAtTemplate {
    padding: 5px 10px 5px 10px;
    height: 100%;
    border: none;
    background: -moz-linear-gradient(top, #F7F3F7, #D6D3CE);
    background: -webkit-gradient(linear, left top, left bottom, from(#F7F3F7), to(#D6D3CE));
    color: #000000;
    text-align: right;
    font-size: 12px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#F7F3F7, EndColorStr=#D6D3CE);
}

/*
#YouAreAtTemplate A:link
{
    color: #3366CC;
    font-size: 11px;
    background-color: Transparent;
    text-decoration: none;
    vertical-align: middle;
    font-weight: normal;
}
#YouAreAtTemplate A:visited
{
    color: #3366CC;
    font-size: 11px;
    background-color: Transparent;
    text-decoration: none;
    vertical-align: middle;
    font-weight: normal;
}

#YouAreAtTemplate A:active
{
    color: #3366CC;
    font-size: 11px;
    background-color: Transparent;
    text-decoration: none;
    vertical-align: middle;
    font-weight: normal;
}
#YouAreAtTemplate A:hover
{
    color: #3366CC;
    font-size: 11px;
    background-color: Transparent;
    text-decoration: underline;
    vertical-align: middle;
    font-weight: normal;
}
*/

#header {
    width: 100%;
    height: 32px;
    border: 1px solid #466094;
    background: -moz-linear-gradient(top, #6489D4, #466094);
    background: -webkit-gradient(linear, left top, left bottom, from(#6489D4), to(#466094));
    color: #FFFFFF;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    background: #6489D4; /* Old browsers */
    background: -moz-linear-gradient(top, #6489D4 0%, #466094 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6489D4), color-stop(100%,#466094)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #6489D4 0%,#466094 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #6489D4 0%,#466094 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #6489D4 0%,#466094 100%); /* IE10+ */
    background: linear-gradient(to bottom, #6489D4 0%,#466094 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6489D4', endColorstr='#466094',GradientType=0 ); /* IE6-9 */
}

#headerFolder {
    padding-right: 20px;
    padding-left: 10px;
    width: 100%;
    height: 32px;
    border: 1px solid #466094;
    color: #FFFFFF;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#669900, EndColorStr=#006633);
}

    #header table, #headerFolder table {
        width: 100%;
        height: 32px;
    }

        #header table td.LeftHeader, #headerFolder table td.LeftHeader {
            overflow: hidden;
            padding-left: 10px;
            color: #FFFFFF;
            vertical-align: middle;
            text-align: left;
            font-weight: bold;
            font-size: 15px;
        }

        #header table td.RightHeader, #headerFolder table td.RightHeader {
            padding-right: 10px;
            color: White;
            vertical-align: middle;
            text-align: right;
            font-weight: bold;
            font-size: 12px;
        }

#footer {
    clear: both;
    padding: 10px 10px 10px 10px;
    background: transparent;
    text-align: center;
}

    #footer > span {
        vertical-align: inherit;
    }

/* Other */
.PageTitle {
    padding: 10px;
    height: 19px;
    border: 1px solid #466094;
    color: #FFFFFF;
    vertical-align: middle;
    text-align: justify;
    font-weight: bold;
    font-size: 14px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#6489D4, EndColorStr=#466094);
}

.NormalDropDownList {
    margin-right: 3px;
    height: 20px;
    border: solid 1px #7B9EBD;
    vertical-align: middle;
    color: black;
}

.ImgButton {
    vertical-align: middle;
    font-size: 11px;
}

.ImgButton2 {
    height: 100%;
    cursor: pointer;
}

.NormalTextBox {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 150px;
    max-width: 100%;
    height: 16px;
    height: 20px;
    border: solid 1px #7B9EBD;
    background-color: #FFFFFF;
    vertical-align: middle;
    font-size: 11px;
    line-height: 16px;
}

textarea.NormalTextBox {
    min-height: 100px;
}

.NormalTimeBox {
    width: 150px;
    height: 16px;
    border: solid 1px #7B9EBD;
    background-color: #FFFFFF;
    vertical-align: middle;
    font-size: 11px;
}

.FindByNumber {
    width: 100px;
    height: 16px;
    border: solid 1px #7B9EBD;
    background-color: #FFFFFF;
    vertical-align: middle;
    font-size: 11px;
}

.GridTextBox {
    width: 100%;
    border: 1px solid #7B9EBD;
    background-color: #FFFFFF;
    vertical-align: middle;
}



.NormalButton, .NormalButton:focus {
    line-height: 1;
    min-width: 80px !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    cursor: pointer;
    height: 20px;
    border-radius: .325rem;
}

.InlineButton {
    padding: 2px;
    min-width: 80px !important;
    border-width: 2px !important;
    border-style: solid !important;
    cursor: pointer;
}

/* Font style  */
/* .Normal style used for most text rendered by modules */
.Normal {
    font-weight: normal;
}

.NormalBold {
    font-weight: bold;
}

.BlackTopic {
    overflow: hidden;
    color: #000000;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}

.NormalWhite {
    color: #FFFFFF;
    font-weight: normal;
    font-size: 11px;
}

.BoldWhite {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
}

.WhiteTopic {
    overflow: hidden;
    color: #FFFFFF;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}

.NormalNavy {
    color: Navy;
    font-weight: normal;
    font-size: 11px;
}

.BoldNavy {
    color: Navy;
    font-weight: bold;
    font-size: 11px;
}

.NavyTopic {
    overflow: hidden;
    color: Navy;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}

.Caption {
    overflow: visible;
    white-space: normal;
}

.RequiredFieldCaption {
    overflow: visible;
    color: #9f2409;
    vertical-align: middle;
    white-space: normal;
}

.text-require {
    color: #a94442;
    font-weight: bolder;
}

/* Popup style group */
/* 1. Popup Information */
.popupBody .PopupInfoContainer {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 10px 10px 10px;
    width: 100%;
    cursor: default;
}

    .popupBody .PopupInfoContainer table {
        padding: 0 0 0 0;
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        vertical-align: middle;
    }

.PopupInfoContainer .ItemContainer table, .PopupInfoContainer .ItemContainer td {
    table-layout: fixed;
    vertical-align: top;
}

.PopupInfoContainer .ItemContainer {
    margin-top: 10px;
    margin-bottom: 10px;
}

.PopupInfoContainer h1 span {
    font-weight: normal;
    font-size: inherit;
}

.PopupInfoContainer .ItemContainer {
    padding: 10px 10px 10px 10px;
    border: solid 1px silver;
}

.ItemContainer {
    border: solid 1px black;
}

    .ItemContainer p.Threshold {
        color: Navy;
    }

    .ItemContainer .ColRightStyle {
        width: 25%;
        text-align: right;
    }

    .ItemContainer .ColLeftStyle {
        text-align: left;
    }

p.ParagraphHeader {
    overflow: hidden;
    vertical-align: middle;
    text-align: left;
}

/* 2. Popup Datail */
body.Dialogs {
    overflow: auto;
    background-color: #acc0e9;
    font-size: 11px;
}

.popupDetail #navbar-top {
    padding: 0;
}

    .popupDetail #navbar-top .navbar-toggle {
        margin: .5rem;
    }

        .popupDetail #navbar-top .navbar-toggle .icon-bar {
            background-color: white;
        }


/* End Popup Detail */
/* End Popup style group */
/* End Popup Information */
div.Normal {
    white-space: normal;
    font-weight: normal;
    font-size: 11px;
}

DIV.FreezedHead {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    padding: 0 0 0 0;
    width: 100%;
}

DIV.ScrollArea {
    padding: 80px 0 0 0;
    width: 100%;
    height: 100%;
}

/* ------------------------------- */
/*       [ Sortable Grid ]			   */
/* ------------------------------- */
.SortableGrid {
    border: none;
    border: 1px solid #edf2f9 !important;
    border-radius: .5rem;
}

.SortableGridHeaderStyle {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #edf2f9 !important;
    color: #000000;
    text-decoration: none;
    white-space: nowrap;
    font-weight: normal;
}

    .SortableGridHeaderStyle > td {
        border: none !important;
        padding: 7px 10px 15px 10px !important;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
    }

        .SortableGridHeaderStyle > td:hover {
            background-color: #e5f8fd;
        }

        .SortableGridHeaderStyle > td > a {
            color: #252525;
        }

.SortableGrid > tbody > .SortableGridHeaderStyle + .SortableGridRowStyle > td {
    border-bottom: solid 1px #edf2f9 !important;
    border-top: solid 1px #edf2f9 !important;
}

.SortableGrid > tbody > .SortableGridRowStyle > td {
    padding: 4px !important;
    border-bottom: solid 1px #edf2f9 !important;
}


.SortableGrid > tbody > .SortableGridRowStyle:last-child > td:first-child {
    border-bottom-left-radius: .5rem !important;
}

.SortableGrid > tbody > .SortableGridRowStyle:last-child > td:last-child {
    border-bottom-right-radius: .5rem !important;
}

.SortableGridRowStyle {
    border-bottom: none !important;
    background-color: #FFFFFF;
}

.SortableGridFooterStyle {
    height: 100%;
    border: none;
    font-size: 11px;
}

    .SortableGridFooterStyle > td {
        border-bottom: none !important;
    }

/* ========== form-table-container - Sortable */
.form-table-container .SortableGrid {
    border: 1px solid #9C9C9C;
}

.form-table-container .SortableGridHeaderStyle {
    border: solid 1px #edf2f9 !important;
    background-color: #C6C6C6;
}

    .form-table-container .SortableGridHeaderStyle > td {
        border: 1px solid rgb(160, 160, 164) !important;
    }

        .form-table-container .SortableGridHeaderStyle > td > * {
            font-weight: bold;
        }

.form-table-container .SortableGridFooterStyle,
.form-table-container .SmartGridFooterStyle {
    border: 1px Solid #edf2f9;
    background-color: #E0E3E8;
}

table.Wizard {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /*border-collapse: collapse; IE11 class="WizardContent" Padding-left จะไม่แสดง*/
    /*position:absolute;*/
}

table.WizardContent {
    margin-bottom: 20px;
    padding-left: 20px;
    width: 100%;
    height: 70%;
    vertical-align: top;
}

    table.WizardContent td {
        vertical-align: top;
    }


td.WizardHeader {
    width: 1800px;
    background-color: #0e70b1;
    vertical-align: top;
}

.WizardTitle {
    padding: 10px 0px 5px 10px;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
}

.WizardTitleDesc {
    padding-left: 10px;
    color: #FFFFFF;
    font-weight: normal;
    font-size: 11px;
}

.WizardNavigationInfo {
    padding: 10px 10px;
    text-align: left;
}

td.NavigationInfo {
    padding-left: 20px;
    height: 30px;
}

.FullTextBox {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    min-height: 20px;
    border: 1px solid #7B9EBD;
    background-color: #FFFFFF;
}

textarea.FullTextBox {
    min-height: 50px;
}

.AutoSizeTextBox {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 20px;
    border: 1px solid #d2ddec;
    background-color: #FFFFFF;
    resize: none;
}

.ReadOnlyText {
    width: 100%;
    font-size: 11px;
}

.Disable {
    width: 100%;
    border: 1px solid #AFAFAF;
    background-color: #FFFFFF;
    color: #A0A1A5;
    font-size: 11px;
}

.ReadOnlyTextSelect {
    width: 100%;
    border: 1px solid #5A7EBF;
    background-color: #5A7EBF;
    font-size: 11px;
}

.RequiredTextBox {
    width: 98%;
    border: 1px solid #7B9EBD;
    background-color: #FFFFFF;
    font-size: 11px;
}

.AutoSizeDropDownList {
    width: 100%;
    height: 20px;
    border: 1px solid #d2ddec;
    background-color: #FFFFFF;
    border-radius: 5px;
    /* remove coach10 font-size: 11px; */
}

.MainInstruction {
    margin-bottom: 5px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid Black;
}

td.MainInstrcutionGray {
    padding-top: 1px;
    padding-bottom: 5px;
    border-bottom: 2px solid #CCCCCC;
}

.uploadfile {
    width: 150px;
    border: 1px solid #7B9EBD;
    background-color: #FFFFFF;
    vertical-align: middle;
    font-size: 11px;
}

.attachment {
    cursor: pointer;
}

.indexsubtitle {
    padding-top: 15px;
    font-weight: bold;
    font-size: 16px;
}

.indexlinktitle {
    padding-bottom: 2px;
    border-bottom: #999999 1px solid;
    color: #0000aa;
    font-weight: bold;
    font-size: 15px;
}

.indexlinkhelp {
    padding-top: 2px;
    color: #444444;
}

table.MeasureLevel {
    width: 300px;
    border: 1px solid #cccccc;
    border-collapse: collapse;
}

    table.MeasureLevel td {
        border: 1px solid #cccccc;
    }

.GridViewHeaderStyle {
    border: solid 1px #edf2f9;
    background-color: #E0E3E8;
    color: #000000;
    vertical-align: middle;
    text-decoration: none;
    white-space: normal;
    font-weight: normal;
    font-size: 11px;
}

.GridViewRowStyle {
    border-bottom: solid 2px #edf2f9;
    background-color: #FFFFFF;
    font-size: 11px;
}

/* ICDP Module */
TABLE.icdpHead {
    width: 100%;
    height: 100%;
    border: solid 1px black;
    border-collapse: collapse;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#DCDFE5, EndColorStr=#BDC2CB);
}

TR.icdpHead TD {
    overflow-x: hidden;
    vertical-align: top;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
}

/* ------------------------------- */
/*       [ Scorecard ]			   */
/* ------------------------------- */
DIV.expandArea {
    margin-bottom: 1px;
    width: 100%;
    color: Black;
    text-align: left;
    font-weight: normal;
    font-size: 11px;
    filter: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=1, motion='forward');
    /*height: 20px;*/
}

TABLE.scoHead {
    width: 100%;
    height: 100%;
    border: solid 1px black;
    border-collapse: collapse;
}

TD.scoHead {
    vertical-align: top;
}

TD.scoFooter {
    border-top: solid 1px black;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#DCDFE5, EndColorStr=#BDC2CB);
    /*background-color: #ffffff;*/
}

TD.scoFooterDesc {
    color: black;
}

TR.scoHead TD {
    /* 	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFF99,endColorStr=orange); */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#DCDFE5, EndColorStr=#BDC2CB);
}

TD.scoDetailArea {
    background-color: #EEF0F6;
}

IMG.scoIconHead {
    width: 48px;
    height: 48px;
    border: none;
}

IMG.scoIcon {
    width: 16px;
    height: 16px;
}

TD.scoBorderArea {
    border: solid 1px gray;
}

.gridPerspective {
    padding: 0;
    border-color: #CDD4E3;
    background-color: #FFFFFF;
    table-layout: fixed;
    font-size: 11px;
}

.gridPerspectiveHeader {
    padding-top: 4px;
    padding-left: 4px;
    width: 100%;
    height: 24px;
    background-color: #E0E3E8;
    color: #000000;
    vertical-align: middle;
    text-decoration: none;
    white-space: normal;
    font-weight: normal;
    font-size: 11px;
    cursor: default;
}

.gridPerspectiveCell {
    padding: 2px 5px;
    height: 24px;
    border-bottom: solid 1px #edf2f9;
    cursor: default;
}

.gridPerspectiveRowStyle {
    display: inline;
    padding-top: 0;
    background-color: #FFFFFF;
    vertical-align: top;
}

fieldset {
    padding: 10px;
    border: 1px solid #CDD4E3;
}

NOBR {
    overflow: hidden;
    width: 100%;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

td.LeftHeader {
    overflow: hidden;
    width: 100%;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.NormalSubObject {
    text-align: center;
    font-weight: normal;
    font-size: 11px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ACC0E9, EndColorStr=#FFFFFF);
}

/********Learning********/

.PageTitle2 {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    height: 40px;
    color: #FFFFFF;
    vertical-align: middle;
    text-align: justify;
    font-weight: bold;
    font-size: 14px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#6489D4, EndColorStr=#466094);
}

.PageTitleQuiz {
    height: 35px;
    color: #FFFFFF;
    text-align: justify;
    font-weight: bold;
    font-size: 14px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#6489D4, EndColorStr=#466094);
}

.ratingStar {
    display: block;
    margin: 0;
    padding: 0;
    width: 23px;
    height: 23px;
    background-repeat: no-repeat;
    font-size: 0;
    cursor: pointer;
}

.filledRatingStar {
    background-image: url(/Coachps/images/cch-filledstar-16.png);
}

.NonRatingStar {
}

.emptyRatingStar {
    background-image: url(/Coachps/images/cch-emptystar-16.png);
}

.savedRatingStar {
    background-image: url(/Coachps/images/cch-filledstar-16.png);
}

table.LearningNavi {
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#FFFFFF, EndColorStr=#5A6B7D);
}

table.LearningNaviRight {
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#5A6B7D, EndColorStr=#FFFFFF);
}

table.LearningCenter {
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#5A6B7D, EndColorStr=#5A6B7D);
}

DIV.QuestionList {
    /*overflow-x: scroll;
    overflow-y: scroll;*/
    width: 100%;
    height: 100%;
    border: 1px solid #D1CDBB;
    background: #ffffff;
}

table.scroll {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.scrollpopup {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

DIV#rolltipDiv {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    visibility: hidden;
    padding: 3px;
    width: 220px;
    border: 1px solid #336;
    background-color: #FFFFCE;
    font-size: 11px;
}

.verticaltext {
    -ms-writing-mode: tb-rl;
    writing-mode: tb-rl;
    filter: flipv fliph;
}

.ColumnNowrap {
    white-space: nowrap;
}

/*AutoComplete flyout */
.AC_ListElement {
    z-index: 9999;
    visibility: hidden;
    overflow: auto;
    margin: 0 !important;
    height: 200px;
    border: 1px solid buttonshadow;
    background-color: inherit;
    color: windowtext;
    list-style-type: none;
    text-align: left;
    cursor: default;
}

/* AutoComplete highlighted item */

.AC_HLItem {
    padding: 1px;
    background-color: #ffff99;
    color: black;
}

/* AutoComplete item */
.AC_Item {
    padding: 1px;
    background-color: window;
    color: windowtext;
}

.GrayTitle {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 40px;
    color: Gray;
    text-align: justify;
    font-weight: bold;
    font-size: 14px;
}

.photo-border {
    display: block;
    margin-bottom: 5px;
    padding: 4px;
    border: 1px solid #cecece;
    background: #d9d9d9 url(/Coachps/images/bg-photo.png) top repeat-x;
}

.acInput {
    width: 200px;
}

.acResults {
    z-index: 99; /*กำหนดเป็น 99 เพราะจะได้น้อยกว่า เมนูด้านบน ซึ่งมี z-index = 100*/
    overflow-y: auto;
    padding: 0;
    height: auto;
    max-height: 250px;
    min-width: 250px;
    background-color: white;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    border-radius: .5rem;
    border: 1px solid #edf2f9;
}

.modal-dialog .acResults {
    position: fixed !important;
}

.acResults ul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none outside none;
}

    .acResults ul.no-data {
        padding: 10px;
        width: 100%;
        list-style: none outside none;
        text-align: center;
    }

.acResults li {
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 2px 5px;
    width: 100%;
    cursor: pointer;
}

.acLoading {
    position: relative;
}


.loading-bar-2x {
    position: absolute;
    top: 6.5px;
    right: 4px;
}

.loading-bar {
    display: inline-block;
    width: 1.5px;
    height: 8px;
    border-radius: 4px;
    animation: loading 1s ease-in-out infinite;
    margin: 0 0.5px;
}

    .loading-bar:nth-child(1) {
        background-color: #3498db;
        animation-delay: 0;
    }

    .loading-bar:nth-child(2) {
        background-color: #c0392b;
        animation-delay: 0.09s;
    }

    .loading-bar:nth-child(3) {
        background-color: #f1c40f;
        animation-delay: .18s;
    }

    .loading-bar:nth-child(4) {
        background-color: #27ae60;
        animation-delay: .27s;
    }

@keyframes loading {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1, 0.5);
    }

    40% {
        transform: scale(1);
    }
}

.acSelect {
    background-color: Yellow;
    color: Black;
}

.acSearchTagSelect {
    background-color: #e5f8fd; /*#46ABEE*/
    color: Black;
}

#divR {
    float: right;
}

#divL {
    float: left;
}

.primary {
    border: 1px solid #004b9a;
    border-bottom-color: #003f81;
    background-color: #0064cd;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
    background-image: linear-gradient(top, #049cdb, #0064cd);
    background-repeat: repeat-x;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

    .primary:hover {
        color: #fff;
    }

.btn {
    -moz-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    -webkit-transition: 0.1s linear all;
    transition: 0.1s linear all;
}

    .btn.primary {
        border-color: #0064cd #0064cd #003f81;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

        .btn.primary:hover {
            color: #fff;
        }

    .btn.large {
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        font-size: 16px;
        line-height: 28px;
    }

    .btn.small {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 11px;
    }

    .btn.disabled {
        background-image: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -khtml-opacity: 0.65;
        -moz-opacity: 0.65;
        opacity: 0.65;
        filter: alpha(opacity=65);
        cursor: default;
    }

    .btn:disabled {
        background-image: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -khtml-opacity: 0.65;
        -moz-opacity: 0.65;
        opacity: 0.65;
        filter: alpha(opacity=65);
        cursor: default;
    }

        .btn:disabled.primary {
            color: #fff;
        }

    .btn:active {
        -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    }

button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.btn.info, .alert-message.info {
    border-color: #339bb9 #339bb9 #22697d;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    background-color: #339bb9;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
    background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
    background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
    background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
    background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
    background-image: linear-gradient(top, #5bc0de, #339bb9);
    background-repeat: repeat-x;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.PeriodTableTree {
    width: 100%;
    height: auto;
    border: solid 1px #6699CC;
    table-layout: fixed;
}

.PeriodtdTableTree1 {
    width: 200px;
    background-color: #FFFFFF;
}

.PeriodtdTableTree2 {
    padding: 5px 10px 0 5px;
    width: auto;
}

#T_tmaintrvPeriodTemplate {
    overflow-x: hidden !important;
    padding-bottom: 5px;
    height: 665px !important;
}

.OrgTableTree {
    width: 100%;
    height: auto;
    border: solid 1px #6699CC;
    table-layout: fixed;
}

.OrgtdTableTree1 {
    overflow-y: auto !important;
    width: 280px;
    background-color: #FFFFFF;
}

.OrgtdTableTree2 {
    padding: 5px 10px 0 5px;
    width: auto;
}

#T_tmaintrvOrgChart {
    /*overflow-x: hidden !important;
    overflow-y: auto !important;*/
    padding-bottom: 5px;
    height: 640px !important;
}

#ddlLogontype {
    width: 143px !important;
}

#tbFilters {
    width: 100%;
}

    #tbFilters td {
        z-index: -5;
    }

/*   --------------------  Start : PopupPlan Master >> Top fixed with body 100% by Boat    ----------------------     */
.wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 116px;
    background: transparent;
}

.wrapper-xl {
    padding-top: 130px;
}


.wrapper.no-toolbar-item {
    padding-top: 69px;
}

#popupplan-navigation {
    position: fixed;
    top: 0;
    z-index: 70;
    width: 100%;
}

    #popupplan-navigation .dropdown-menu > li > a {
        color: white;
    }

@media (min-width: 768px) {
    #popupplan-navigation .dropdown-menu > li > a {
        color: inherit;
    }
}

@media (min-width:540px) {
    .coach-version-2 {
        display: inline;
    }
}

/*=======  Popip Plan =========== */

.popupDetail.hide-appmenu-bar .navbar-top, .popupDetail.hide-appmenu-bar .pagelist-navbar-top,
.popupDetail.hide-appmenu-toolbar .navbar-toolbar,
.popupDetail.hide-appmenu-toolbar .nav-mobile,
.popupDetail.hide-appmenu-bar.hide-appmenu-toolbar .ess-navbar,
.popupDetail.hide-title-bar .navbar-titlebar {
    display: none !important;
}

.popupDetail.hide-appmenu-toolbar .wrapper {
    padding-top: 64px;
}

.popupDetail.hide-appmenu-bar .wrapper {
    padding-top: 66px;
}

.popupDetail.hide-title-bar .wrapper {
    padding-top: 59px;
}

.popupDetail.hide-appmenu-toolbar.hide-appmenu-bar .wrapper {
    padding-top: 39px;
}

.popupDetail.hide-appmenu-toolbar.hide-title-bar .wrapper {
    padding-top: 32px;
}

.popupDetail.hide-appmenu-bar.hide-title-bar .wrapper {
    padding-top: 39px;
}

.popupDetail.hide-appmenu-toolbar.hide-appmenu-bar.popupDetail.hide-title-bar .wrapper {
    padding-top: 0;
}

@media(max-width:539px) {
    .wrapper {
        padding-top: 80px !important;
    }

    #popupplan-navigation {
        height: auto !important;
    }
}

.sidebar.collapsing {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.no-toolbar-item .navbar-toolbar {
    display: none !important;
}

.popupDetail .pagelist-navbar-top > .navbar-toggle {
    border-radius: 0;
    margin: 2px 2px 3px 2px;
}

#btnsidebar {
    float: left;
}

#popupplan-navigation > .pagelist-navbar-top > .navbar-header,
#popupplan-navigation > .pagelist-navbar-top > .navbar-collapse {
    margin-left: 0;
    margin-right: 0;
}

@media (min-width:540px) {
    #popupplan-navigation > .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding-left: 0;
    }

        #popupplan-navigation > .navbar-collapse.collapse {
            display: block !important;
            height: auto !important;
            padding-bottom: 0;
            overflow: visible !important;
        }
}

.popupDetail .pagelist-navbar-top.navbar-toolbar .navbar-nav > li > a {
    color: #000;
}

.popupDetail #navbar-toolbar.navbar-toolbar {
    display: block;
    background: #dcdfe5;
    border-top: none;
    padding: 0;
}

.popupDetail .navbar-toolbar a[href $='SkipLink'] {
    display: none;
}

.popupDetail .pagelist-navbar-top.navbar-toolbar nav > .nav > li[disabled],
.nav.nav-extra-menu li[disabled] {
    cursor: not-allowed;
}

    .popupDetail .pagelist-navbar-top.navbar-toolbar nav > .nav > li[disabled] > a,
    .nav.nav-extra-menu li[disabled] > a, .navbar-menu > .navbar-nav li[disabled] > a {
        color: #ACACAC !important;
        pointer-events: none;
    }

.popupDetail .pagelist-navbar-top.navbar-toolbar .navbar-nav > li > a > img:first-child {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    margin-right: 4px;
}

.popupDetail .pagelist-navbar-top.navbar-toolbar .navbar-nav > li > a > .fa:first-child {
    line-height: 16px;
    margin-right: 4px;
}

.popupDetail .pagelist-navbar-top.navbar-toolbar .navbar-nav > li > a > .menu-text {
    vertical-align: middle;
}

@media (min-width: 768px) {
    .popupDetail #navbar-toolbar.navbar-toolbar {
        padding: 4px 0;
    }
}

@media (max-width:539px) {
    .popupDetail .pagelist-navbar-top.navbar-toolbar nav > .nav {
        overflow-y: auto;
        max-height: 230px;
    }

        /*.popupDetail .pagelist-navbar-top.navbar-toolbar nav > .nav > li > a:hover,
        .popupDetail .pagelist-navbar-top.navbar-toolbar nav > .nav > li > a:focus {
            background-color: #4d4c4c;
            color: #fff;
        }*/

        .popupDetail .pagelist-navbar-top.navbar-toolbar nav > .nav > li[disabled] {
            display: none !important;
        }
}

@media (min-width:768px) {
    .popupDetail .pagelist-navbar-top.navbar-toolbar .navbar-nav > li > a {
        color: #000;
        padding-top: 6px;
        padding-bottom: 7px;
        padding-left: 6px;
        padding-right: 6px;
        border-radius: 5px;
    }

    .popupDetail .navbar-toolbar {
        overflow: auto;
        height: auto;
        /*min-height: 29px;*/
        -webkit-transition: max-height 0.8s;
        -moz-transition: max-height 0.8s;
        -o-transition: max-height 0.8s;
        transition: max-height 0.8s;
    }

        .popupDetail .navbar-toolbar:hover {
            max-height: 100%;
            overflow: visible;
            height: auto;
        }
}

.popupDetail .fast-action {
    position: fixed;
    left: 0;
    padding-left: 10px;
    padding-right: 50px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center;
}

    .popupDetail .fast-action > .btn {
        font-size: .75rem;
        padding: 0.75rem 0.5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 2;
    }

        .popupDetail .fast-action > .btn + .btn {
            margin-left: .5rem;
        }

        .popupDetail .fast-action > .btn > img,
        .popupDetail .fast-action > .btn > i {
            width: 1rem;
            height: 1rem;
            margin-right: 0.25rem;
            transform: none;
            vertical-align: middle;
            top: 0;
        }

        .popupDetail .fast-action > .btn > .fast-action-title {
            color: white;
            vertical-align: middle;
        }

        .popupDetail .fast-action > .btn.icon-only > .fast-action-title {
            margin-left: 16px;
        }

        .popupDetail .fast-action > .btn.title-only > .fast-action-title {
            margin-left: 0;
        }

        .popupDetail .fast-action > .btn[disabled] {
            display: none;
        }

        .popupDetail .fast-action > .btn:hover,
        .popupDetail .fast-action > .btn:active {
            background-color: rgba(255,255,255,.1) !important;
            border-radius: .325rem;
        }

@media (min-width: 768px) {
    .popupDetail .fast-action {
        display: none !important;
    }
}

.main-container {
    min-height: 100%;
    height: 100%;
}

.popup-plan .main-container {
    padding-top: 6px;
}

.page-content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    /*padding: 5px 5px 5px 5px;*/
}
/*   --------------------  End : PopupPlan Master >> Top fixed with body 100% by Boat    ----------------------     */

/*   --------------------  Start : Popup Master >> Top fixed with body 100% by Boat    ----------------------     */
.main-content {
    /*padding-top: 31px;*/
}
/*   --------------------  End : Popup Master >> Top fixed with body 100% by Boat    ----------------------     */

/*   --------------------  Start : Dialog Master >> Top fixed with body 100% by Boat    ----------------------     */
#wrapper-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 65px;
}

.wrapper-dialog-non-display {
    padding-top: 0px !important;
}

#dialog-title {
    -moz-box-sizing: padding-box;
    -webkit-box-sizing: padding-box;
    box-sizing: padding-box;
    margin-top: -65px;
    padding: 10px;
    min-height: 65px;
    background-color: #0e70b1;
}

.dialog-title-non-display {
    display: none !important;
}

.dialog-content {
    overflow-y: auto;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    min-height: 100%;
    height: 100%;
}

    .dialog-content > .dialog-footer {
        margin-left: -10px;
    }

.dialog-footer {
    bottom: 0;
    padding: 10px 0;
    width: 100%;
    height: 40px;
    border-top: 1px solid #cccccc;
}

    .dialog-footer input, .dialog-footer button, .dialog-footer a {
        margin: 10px 5px;
        vertical-align: middle;
    }

/*   --------------------  End : Dialog Master >> Top fixed with body 100% by Boat    ----------------------     */

/*   --------------------  Start : PopupBasic Master by Boat    ----------------------     */



.PopupBasic-Container .basic-wrapper {
    padding-top: 35px;
}

    .PopupBasic-Container .basic-wrapper .TitleBar {
        line-height: 32px;
        padding-left: 17px;
    }

.PopupBasic-Container .navbar-toggle {
    margin: 0;
    border: none;
}

.PopupBasic-Container .pagelist-navbar-top {
    border: none;
    border-bottom: 1px solid #e2e2e2;
}

@media (min-width: 540px) {
    .PopupBasic-Container .basic-wrapper {
        padding-top: 70px;
    }

    .PopupBasic-Container .pagelist-navbar-top .navbar-nav > li > a {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}


/*   --------------------  End : PopupBasic Master by Boat    ------------------------     */

.no-padding {
    padding: 0 !important;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

@media (max-width: 767px) {
    .pull-left-xs {
        float: left !important;
    }

    .pull-right-xs {
        float: right !important;
    }
}

/*   --------------------  Start : Res Page by Boat    ----------------------     */

html.res-page {
    position: relative !important;
    min-height: 100%;
    height: auto;
}

.res-page body {
    margin-bottom: 40px;
    min-height: 100%;
    width: auto;
    height: auto;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1.4285;
    /*for footer*/
}

.res-page form {
    width: auto;
    height: auto;
}

.res-page-container {
}

.res-page-toolbar-close {
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 15px;
    position: relative;
    background-image: none;
    background-color: transparent;
    margin-right: 10px;
}

@media (min-width: 768px) {
    .res-page-toolbar-close {
        display: none;
    }
}
/* Navbar */

.res-page-nav {
    margin-bottom: 0;
    border-bottom: 0;
    background-color: #fff;
}

.bs-home-nav .bs-nav-b {
    display: none;
}

.res-page-nav .navbar-brand, .res-page-nav .navbar-nav > li > a {
    color: #000;
    font-weight: 500;
}

.res-page-nav img.navbar-brand {
    padding: 10px 10px;
}

.res-page-nav .navbar-nav > .active > a, .res-page-nav .navbar-nav > .active > a:hover, .res-page-nav .navbar-nav > li > a:hover {
    background-color: #f9f9f9;
    color: #463265;
}

.res-page-nav .A {
    color: red;
}

.res-page-nav .navbar-toggle .icon-bar {
    background-color: #563d7c;
}

.res-page-nav .navbar-header .navbar-toggle {
    border-color: #fff;
}

    .res-page-nav .navbar-header .navbar-toggle:focus, .res-page-nav .navbar-header .navbar-toggle:hover {
        border-color: #f9f9f9;
        background-color: #f9f9f9;
    }


.navbar-header img {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.res-page-nav img.navbar-brand {
    max-height: 50px;
    height: auto;
}

.nav-pills > li > a {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    line-height: 30px;
}

.Splitter {
    top: 10px;
    left: -1px;
    padding: 10px 0px !important;
    border: 1px solid #D9D9D9;
    border-width: 0 1px 0 0;
    content: "";
    line-height: 9px;
}

.TH-LG, .EN-LG {
    color: #767676;
}

    .TH-LG:before {
        content: "ไทย";
    }

    .EN-LG:before {
        content: "Eng";
    }

@media (min-width:480px) {
    .TH-LG:before {
        content: "ภาษาไทย";
    }

    .EN-LG:before {
        content: "English";
    }
}

@media (min-width:768px) {
    .res-page-nav img.navbar-brand {
        max-height: 70px;
        height: auto;
    }

    .nav-pills > li > a {
        line-height: 50px;
    }

    .Splitter {
        top: 15px;
        padding: 15px 0px !important;
    }

    .rpt-detail-wrapper .rpt-input > .rpt-detail-wrapper > .rpt-detail-set > .rpt-input {
        margin: 0px;
    }
}

/* System information */
.system-information {
    margin-top: 20px;
}

/* Footer */
.footer {
    width: 100%;
    height: 40px;
    /* Set the fixed height of the footer here */
}

@media (max-width:480px) {
    .res-page body {
        margin-bottom: 53px;
    }

    .footer {
        height: 53px;
    }

    .container .text-muted {
        margin: 9px 0;
    }

    .version-coach {
        display: block;
    }
}

/*   --------------------  End : Res Page by Boat    ----------------------     */

/*   --------------------  User photo    ----------------------     */

a.logon-user {
    position: relative;
    display: block;
    padding: 6px 8px 0;
    height: 100%;
    color: #FFF;
    list-style: none;
    text-decoration: none;
    line-height: 40px;
    cursor: pointer;
    text-align: left;
    padding-left: 56px;
    z-index: 1;
}

    a.logon-user:active {
        cursor: pointer;
    }

.nav-user-photo {
    position: absolute;
    top: 2px;
    left: 10px;
    height: 36px;
    width: 36px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    vertical-align: middle;
}

.user-info > .user-info-name {
    cursor: pointer;
    display: block;
    line-height: 1;
    font-size: 14px;
    text-decoration: none;
}

.user-info-position {
    padding-left: 56px;
    padding-right: 10px;
    text-align: left;
    font-size: 11px;
}

    .user-info-position > .current-position {
        color: #fff;
    }

        .user-info-position > .current-position[data-toggle=dropdown] {
            cursor: pointer;
        }

            .user-info-position > .current-position[data-toggle=dropdown]:after {
                position: absolute;
                top: 2px;
                right: 0;
                display: inline-block;
                font-family: "Font Awesome 5 Pro";
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                content: "\f13a";
                color: #fff;
            }

@media (max-width: 540px) {
    a.logon-user {
        padding: 5px;
        min-width: 0;
        line-height: 0;
    }

    .nav-user-photo {
        position: relative;
        top: 0;
        min-height: 30px;
        max-width: 30px;
        max-height: 30px;
        height: auto;
        vertical-align: auto;
    }

        .nav-user-photo.mobile {
            position: static;
            width: 35px;
            height: auto;
            max-width: none;
            max-height: 35px !important;
            padding: 5px;
            max-height: none;
            margin-right: 3px;
        }



    .user-info {
        display: none;
    }

    .user-info-position {
        display: none;
    }
}

@media (min-width:541px) and (max-width:768px) {

    a.logon-user {
        min-width: 0;
    }

    .user-info {
        margin-left: 0;
    }
}

@media(max-width: 767px) {
    .navbar-home {
        margin: 0.5rem 0px;
        color: white;
    }
}

@media (min-width: 769px) {
    .user-info-position .dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
    }
}

/*   --------------------  New left menu    ----------------------     */

.separator-line {
    border: 1px solid #D9D9D9;
    border-width: 0 1px 0 0;
}

.sr-only {
    position: absolute;
    overflow: hidden;
    clip: rect(0,0,0,0);
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    background-color: #fff;
}

    .navbar-toggle .icon-bar + .icon-bar {
        margin-top: 4px;
    }

@media (max-width: 539px) {
    .separator-line {
        display: none;
    }
}

@media (min-width: 768px) {
    .separator-line {
        display: none;
    }
}

legend {
    padding: 0 5px;
    font-size: 0.8125rem;
    border-bottom: none;
    display: inline-block;
    width: auto;
    margin-bottom: 0;
}


.advancesearch .advancesearch-condition .form-control[disabled],
.advancesearch .advancesearch-condition .form-control[readonly] {
    background: #eeeeee;
}

/*-----------------------Self service ------------------------*/

.panel-group.self-service {
    margin-bottom: 0;
}

    .panel-group.self-service .panel.panel-default {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .panel-group.self-service .panel.panel-default > .panel-heading {
            padding: 0 !important;
        }

.self-service-list {
    width: 100%;
}

    .self-service-list > tbody > tr > td {
        padding: 5px;
    }

.self-service-image {
    width: 48px;
    height: 48px;
    background-color: #7e7e7e;
    padding: 10px;
    vertical-align: middle;
}

.self-service-detail {
    height: 48px;
    background-color: #F5F5F5;
    padding: 10px;
    cursor: pointer;
}

    .self-service-detail:hover {
        background-color: #fff;
    }

    .self-service-detail:focus {
        background-color: #fff;
    }

    .self-service-detail .indexlinktitle {
        margin-left: 0;
    }

.self-service-sub-menu-container {
    padding: 5px;
    margin-top: 10px;
}

.self-service-sub-menu {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.1em;
}

    .self-service-sub-menu .sub-menu {
        position: relative;
        display: block;
        padding: 8px 12px;
        border-bottom: 1px solid #DAE2EA;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .self-service-sub-menu .sub-menu.sub-menu-level-2 {
            padding-left: 88px;
        }

            .self-service-sub-menu .sub-menu.sub-menu-level-2 .sub-menu-image {
                left: 44px;
            }

        .self-service-sub-menu .sub-menu .sub-menu-image {
            left: 0;
            top: 0;
            width: 36px;
            margin: 0;
            text-align: center;
            padding: 0 !important;
            line-height: 3;
            height: 100%;
            cursor: pointer;
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }

            .self-service-sub-menu .sub-menu .sub-menu-image > .fa:first-child {
                width: 15px;
                height: 15px;
                line-height: 15px;
                font-size: 14px;
                vertical-align: middle;
            }

        .self-service-sub-menu .sub-menu a {
            color: #7C9EB2;
            text-decoration: none;
        }

        .self-service-sub-menu .sub-menu:hover {
            background-color: #F4F6F7;
        }

.sub-menu.sub-menu-btn {
    padding-left: 44px;
}

@media (max-width: 768px) {
    .self-service-list > tbody > tr > td {
        display: block;
        width: 100% !important;
    }
}



/*   --------------------  Modal Dialog    ----------------------     */

.ui-dialog {
    border-radius: 0 !important;
    z-index: 10001 !important;
    padding: 0;
    border-radius: 8px !important;
}

.ui-widget-content {
    background: none;
    background-color: white;
    border: none;
    box-shadow: 0 12px 24px rgba(18,38,63,.03);
}

.ui-dialog .ui-dialog-titlebar {
    top: 0;
    left: 0;
    width: 100%;
}

.ui-dialog-titlebar-close {
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    background: none !important;
}

    .ui-dialog-titlebar-close:after {
        font-family: "Font Awesome 5 Pro";
        content: "\f00d";
        font-size: 13px;
        font-weight: lighter;
        color: #fff;
    }
/*ui-corner-all ui-state-default*/
.ui-dialog-titlebar-maximize {
    border: none !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    margin-top: 2px;
    padding: 2px !important;
}

    .ui-dialog-titlebar-maximize > span {
        background: none;
        background-image: none !important;
        display: none !important;
    }

    .ui-dialog-titlebar-maximize:after {
        font-family: "Font Awesome 5 Pro";
        content: "\f2d0";
        font-size: 12px;
        font-weight: normal;
        color: #fff;
    }

.ui-dialog-titlebar-restore {
    border: none !important;
    background: none !important;
    margin-top: 2px;
    /*flip horizontal icon*/
    padding: 0 3px !important;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

    .ui-dialog-titlebar-restore > span {
        background: none;
        background-image: none !important;
        display: none !important;
    }

    .ui-dialog-titlebar-restore:after {
        font-family: "Font Awesome 5 Pro";
        content: "\f2d1";
        font-size: 10px;
        color: #fff;
        font-weight: normal;
    }

.ui-dialog-titlebar {
    background: none;
    border-color: transparent;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}



@media only screen and (min-device-width : 320px) and (max-device-width : 750px) {
    .ui-dialog {
        width: 90% !important;
        margin: 0 5% !important;
    }
}

.ui-dialog-content {
    padding: 0px !important;
    overflow: hidden !important;
}

.ui-widget-overlay {
    background: #000;
    opacity: .5;
    filter: Alpha(Opacity=50);
}

/*--------------------- hr------------------*/
hr {
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid black;
}

.pointer-hand {
    cursor: pointer;
    cursor: hand;
}



/*---------------------------- Input ---------------------*/
textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color] {
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #d2ddec;
    padding: 2px 4px 2px;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
}

input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color] {
    height: 20px;
}

    textarea:hover,
    input[type=text]:hover,
    input[type=password]:hover,
    input[type=datetime]:hover,
    input[type=datetime-local]:hover,
    input[type=date]:hover,
    input[type=month]:hover,
    input[type=time]:hover,
    input[type=week]:hover,
    input[type=number]:hover,
    input[type=email]:hover,
    input[type=url]:hover,
    input[type=search]:hover,
    input[type=tel]:hover,
    input[type=color]:hover {
        color: #12263f;
        background-color: #fff;
        border-color: #d2ddec;
        outline: 0;
        box-shadow: 0 0 0 1px rgba(217,112,93,.6);
    }

    textarea:focus,
    input[type=text]:focus,
    input[type=password]:focus,
    input[type=datetime]:focus,
    input[type=datetime-local]:focus,
    input[type=date]:focus,
    input[type=month]:focus,
    input[type=time]:focus,
    input[type=week]:focus,
    input[type=number]:focus,
    input[type=email]:focus,
    input[type=url]:focus,
    input[type=search]:focus,
    input[type=tel]:focus,
    input[type=color]:focus {
        color: #12263f;
        background-color: #fff;
        outline: 0;
        box-shadow: 0 0 0 1px rgba(217,112,93,.6);
    }

input::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
    color: silver;
}

input:-moz-placeholder,
.form-control:-moz-placeholder {
    color: silver;
    opacity: 1;
}

input::-moz-placeholder,
.form-control::-moz-placeholder {
    color: silver;
    opacity: 1;
}

input:-ms-input-placeholder,
.form-control:-ms-input-placeholder {
    color: silver;
}
/*ปิด x ใน textbox*/
input[type=text]::-ms-clear {
    display: none;
}

.form-control {
    color: #000;
    border-radius: 6px;
    background-color: #fff;
    border-color: #d2ddec;
    padding: 2px;
    height: 20px;
}

select.form-control {
    padding: 0 0 0 2px;
    width: 100%;
}

.form-control:focus,
select:focus {
    color: #000;
    border-color: #f59942;
    background-color: #fff;
    outline: 0;
}

textarea.form-control {
    padding: 2px 4px 2px;
    border: 1px solid #7B9EBD;
    height: 60px;
}

select {
    padding-left: 2px;
    border: 1px solid #7B9EBD;
}

    select[multiple],
    select.form-control[multiple] {
        height: auto;
    }

    select.input-sm {
        border-radius: 0;
        padding: 2px 3px;
    }

    select.input-lg {
        border-radius: 0;
        padding: 6px 8px;
    }

input.block {
    display: block;
    margin-bottom: 9px;
}

textarea.autosize-transition {
    -webkit-transition-duration: "height 0.2s";
    transition-duration: "height 0.2s";
}

.limiterBox {
    border: 1px solid #222;
    border-top: none;
    background-color: #333;
    padding: 3px 6px;
    color: #FFF;
    margin-top: 6px;
}

    .limiterBox:after {
        display: none;
    }

    .limiterBox:before {
        display: block;
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        top: -8px;
        left: 50%;
        margin-left: -5px;
        border-color: transparent;
        border-style: solid;
        border-bottom-color: #333;
        -moz-border-bottom-colors: #333;
        border-width: 0 8px 8px;
    }

select option,
select.form-control option {
    padding: 3px 4px 5px;
}

    select option:active,
    select.form-control option:active,
    select option:hover,
    select.form-control option:hover,
    select option:focus,
    select.form-control option:focus {
        background-color: #eee;
        color: #444;
    }

    select option.no-option,
    select.form-control option.no-option {
        padding: 1px 0;
    }

textarea[disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=datetime][disabled],
input[type=datetime-local][disabled],
input[type=date][disabled],
input[type=month][disabled],
input[type=time][disabled],
input[type=week][disabled],
input[type=number][disabled],
input[type=email][disabled],
input[type=url][disabled],
input[type=search][disabled],
input[type=tel][disabled],
input[type=color][disabled] {
    color: #848484 !important;
    background-color: #eee !important;
}

input[disabled]:hover {
    border-color: #d5d5d5 !important;
}

textarea[readonly], input[readonly], select[readonly] {
    color: #939192;
    background: #f5f5f5 !important;
    cursor: default;
}

    select[readonly] option[disabled] {
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

    textarea[readonly], input[readonly]:hover, select[readonly]:hover {
        border-color: #c3c3c3;
    }

    textarea[readonly], input[readonly]:focus, select[readonly]:focus {
        /*-webkit-box-shadow: none;
        box-shadow: none;
        border-color: #aaa;
        background-color: #f9f9f9;*/
    }

.help-inline {
    font-size: 12px !important;
    padding-top: 2px;
}

.input-mini {
    width: 60px;
    max-width: 100%;
}

.input-small {
    width: 90px;
    max-width: 100%;
}

.input-medium,
.input-md {
    width: 150px;
    max-width: 100%;
}

.input-large {
    width: 210px;
    max-width: 100%;
}

.input-xlarge {
    width: 270px;
    max-width: 100%;
}

.input-xxlarge {
    width: 530px;
    max-width: 100%;
}

input.input-lg {
    font-size: 18px;
}

.input-time,
[pstype=psTimeBox] {
    width: 42px;
    min-width: 42px;
    max-width: 100%;
    font-size: 11px !important;
}

/*------------------------------ List -------------------------------*/
ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
    margin-right: 0;
    margin-left: 25px;
    padding: 0;
}

    ul.margin-5,
    ol.margin-5 {
        margin-left: 5px;
    }

    ul.margin-10,
    ol.margin-10 {
        margin-left: 10px;
    }

    ul.margin-15,
    ol.margin-15 {
        margin-left: 15px;
    }

    ul.margin-20,
    ol.margin-20 {
        margin-left: 20px;
    }

li > ul,
li > ol {
    margin-left: 18px;
}

.list-unstyled,
.list-inline {
    margin-left: 0;
}

    .list-unstyled > li > .ps-icon:first-child,
    .list-inline > li > .ps-icon:first-child {
        width: 25px;
        text-align: center;
    }

.spaced > li {
    margin-top: 9px;
    margin-bottom: 9px;
}

.spaced2 > li {
    margin-top: 15px;
    margin-bottom: 15px;
}

li.divider {
    font-size: 0;
    background-color: #e5e5e5;
    height: 3px;
}

.spaced > li.divider {
    margin-top: 5px;
    margin-bottom: 5px;
}

.spaced2 > li.divider {
    margin-top: 8px;
    margin-bottom: 8px;
}



/*--------------- wrenching (use in error page)----------- */

.icon-animated-wrench {
    display: inline-block;
    -moz-animation: wrenching 2.5s 4 ease;
    -webkit-animation: wrenching 2.5s 4 ease;
    -o-animation: wrenching 2.5s 4 ease;
    -ms-animation: wrenching 2.5s 4 ease;
    animation: wrenching 2.5s 4 ease;
    -moz-transform-origin: 90% 35%;
    -webkit-transform-origin: 90% 35%;
    -o-transform-origin: 90% 35%;
    -ms-transform-origin: 90% 35%;
    transform-origin: 90% 35%;
}

@-moz-keyframes wrenching {
    0% {
        -moz-transform: rotate(-12deg);
    }

    8% {
        -moz-transform: rotate(12deg);
    }

    10% {
        -moz-transform: rotate(24deg);
    }

    18% {
        -moz-transform: rotate(-24deg);
    }

    20% {
        -moz-transform: rotate(-24deg);
    }

    28% {
        -moz-transform: rotate(24deg);
    }

    30% {
        -moz-transform: rotate(24deg);
    }

    38% {
        -moz-transform: rotate(-24deg);
    }

    40% {
        -moz-transform: rotate(-24deg);
    }

    48% {
        -moz-transform: rotate(24deg);
    }

    50% {
        -moz-transform: rotate(24deg);
    }

    58% {
        -moz-transform: rotate(-24deg);
    }

    60% {
        -moz-transform: rotate(-24deg);
    }

    68% {
        -moz-transform: rotate(24deg);
    }

    75% {
        -moz-transform: rotate(0deg);
    }
}

@-webkit-keyframes wrenching {
    0% {
        -webkit-transform: rotate(-12deg);
    }

    8% {
        -webkit-transform: rotate(12deg);
    }

    10% {
        -webkit-transform: rotate(24deg);
    }

    18% {
        -webkit-transform: rotate(-24deg);
    }

    20% {
        -webkit-transform: rotate(-24deg);
    }

    28% {
        -webkit-transform: rotate(24deg);
    }

    30% {
        -webkit-transform: rotate(24deg);
    }

    38% {
        -webkit-transform: rotate(-24deg);
    }

    40% {
        -webkit-transform: rotate(-24deg);
    }

    48% {
        -webkit-transform: rotate(24deg);
    }

    50% {
        -webkit-transform: rotate(24deg);
    }

    58% {
        -webkit-transform: rotate(-24deg);
    }

    60% {
        -webkit-transform: rotate(-24deg);
    }

    68% {
        -webkit-transform: rotate(24deg);
    }

    75% {
        -webkit-transform: rotate(0deg);
    }
}

@-o-keyframes wrenching {
    0% {
        -o-transform: rotate(-12deg);
    }

    8% {
        -o-transform: rotate(12deg);
    }

    10% {
        -o-transform: rotate(24deg);
    }

    18% {
        -o-transform: rotate(-24deg);
    }

    20% {
        -o-transform: rotate(-24deg);
    }

    28% {
        -o-transform: rotate(24deg);
    }

    30% {
        -o-transform: rotate(24deg);
    }

    38% {
        -o-transform: rotate(-24deg);
    }

    40% {
        -o-transform: rotate(-24deg);
    }

    48% {
        -o-transform: rotate(24deg);
    }

    50% {
        -o-transform: rotate(24deg);
    }

    58% {
        -o-transform: rotate(-24deg);
    }

    60% {
        -o-transform: rotate(-24deg);
    }

    68% {
        -o-transform: rotate(24deg);
    }

    75% {
        -o-transform: rotate(0deg);
    }
}

@-ms-keyframes wrenching {
    0% {
        -ms-transform: rotate(-12deg);
    }

    8% {
        -ms-transform: rotate(12deg);
    }

    10% {
        -ms-transform: rotate(24deg);
    }

    18% {
        -ms-transform: rotate(-24deg);
    }

    20% {
        -ms-transform: rotate(-24deg);
    }

    28% {
        -ms-transform: rotate(24deg);
    }

    30% {
        -ms-transform: rotate(24deg);
    }

    38% {
        -ms-transform: rotate(-24deg);
    }

    40% {
        -ms-transform: rotate(-24deg);
    }

    48% {
        -ms-transform: rotate(24deg);
    }

    50% {
        -ms-transform: rotate(24deg);
    }

    58% {
        -ms-transform: rotate(-24deg);
    }

    60% {
        -ms-transform: rotate(-24deg);
    }

    68% {
        -ms-transform: rotate(24deg);
    }

    75% {
        -ms-transform: rotate(0deg);
    }
}

@keyframes wrenching {
    0% {
        transform: rotate(-12deg);
    }

    8% {
        transform: rotate(12deg);
    }

    10% {
        transform: rotate(24deg);
    }

    18% {
        transform: rotate(-24deg);
    }

    20% {
        transform: rotate(-24deg);
    }

    28% {
        transform: rotate(24deg);
    }

    30% {
        transform: rotate(24deg);
    }

    38% {
        transform: rotate(-24deg);
    }

    40% {
        transform: rotate(-24deg);
    }

    48% {
        transform: rotate(24deg);
    }

    50% {
        transform: rotate(24deg);
    }

    58% {
        transform: rotate(-24deg);
    }

    60% {
        transform: rotate(-24deg);
    }

    68% {
        transform: rotate(24deg);
    }

    75% {
        transform: rotate(0deg);
    }
}


/*-----------------------report template ------------------------*/

.line-height24 {
    line-height: 24px;
}

.rpt-container {
    padding: 1rem;
    background-clip: border-box;
    background-color: #fff;
    border: 1px solid #edf2f9;
    border-radius: .5rem;
    width: 100%;
    box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
}

.rpt-step-group + .rpt-step-group {
    margin-top: 10px;
}


.rpt-step {
    position: relative;
    padding: 5px;
}

.rpt-step-img,
.rpt-step-number {
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -15px;
    height: 35px;
    width: 35px;
    background-repeat: no-repeat;
}

    .rpt-step-img.step1 {
        background-image: url(/Coachps/images/rpt-step1-48.png);
    }

    .rpt-step-img.step2 {
        background-image: url(/Coachps/images/rpt-step2-48.png);
    }

    .rpt-step-img.step3 {
        background-image: url(/Coachps/images/rpt-step3-48.png);
    }

    .rpt-step-img.step4 {
        background-image: url(/Coachps/images/rpt-step4-48.png);
    }

    .rpt-step-img.step5 {
        background-image: url(/Coachps/images/rpt-step5-48.png);
    }

    .rpt-step-img.step6 {
        background-image: url(/Coachps/images/rpt-step6-48.png);
    }

    .rpt-step-img.step7 {
        background-image: url(/Coachps/images/rpt-step7-48.png);
    }

    .rpt-step-img.step8 {
        background-image: url(/Coachps/images/rpt-step8-48.png);
    }

    .rpt-step-img.step9 {
        background-image: url(/Coachps/images/rpt-step9-48.png);
    }

    .rpt-step-img.step10 {
        background-image: url(/Coachps/images/rpt-step10-48.png);
    }

    .rpt-step-img.step11 {
        background-image: url(/Coachps/images/rpt-step11-48.png);
    }

    .rpt-step-img.step12 {
        background-image: url(/Coachps/images/rpt-step12-48.png);
    }

    .rpt-step-img.step13 {
        background-image: url(/Coachps/images/rpt-step13-48.png);
    }

    .rpt-step-img.step14 {
        background-image: url(/Coachps/images/rpt-step14-48.png);
    }

    .rpt-step-img.step15 {
        background-image: url(/Coachps/images/rpt-step15-48.png);
    }

.rpt-step-number {
    background-color: #2c7be5;
    border-radius: 100%;
    color: white;
    font-weight: 500;
    font-size: .875rem;
    text-align: center;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.rpt-step-caption {
    margin-left: 40px;
    padding-top: 3px;
    padding-bottom: 5px;
}


    .rpt-step-caption > span:after {
        content: "";
        display: block;
        border-bottom: 1px solid #d9dadf;
        margin-top: 2px;
    }


/*#head*/
.rpt-detail-set::before, .rpt-detail-set::after {
    content: " ";
    display: table;
    clear: both;
}

.rpt-group-detail {
    padding-left: 37px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.rpt-detail-wrapper::after {
    clear: both;
}

.rpt-detail-wrapper::before, .rpt-detail-wrapper::after {
    content: " ";
    display: table;
}

.rpt-detail-wrapper:after {
    clear: both;
}

.rpt-detail-wrapper:before, .rpt-detail-wrapper:after {
    content: " ";
    display: table;
}


.rpt-detail-wrapper.two-col > .rpt-detail-set,
.rpt-detail-wrapper.three-col > .rpt-detail-set {
    float: left;
}

.rpt-detail-wrapper.two-col > .rpt-detail-set {
    width: 49%;
}

    .rpt-detail-wrapper.two-col > .rpt-detail-set + .rpt-detail-set {
        margin-left: 4px;
    }

    .rpt-detail-wrapper.two-col > .rpt-detail-set:nth-child(2n) + .rpt-detail-set {
        margin-left: 0;
    }

.rpt-detail-wrapper.three-col > .rpt-detail-set {
    width: 30%;
}

    .rpt-detail-wrapper.three-col > .rpt-detail-set + .rpt-detail-set {
        margin-left: 5%;
    }

    .rpt-detail-wrapper.three-col > .rpt-detail-set:nth-child(3n) + .rpt-detail-set {
        margin-left: 0;
    }

.rpt-detail-set > * {
    position: relative;
}

.rpt-caption {
    padding: 4px;
    z-index: 1;
    line-height: 20px;
    /*margin-bottom: 10px;*/
}

.rpt-input {
    padding-left: 5px;
    position: relative;
    width: 100%;
    min-height: 20px;
    margin-bottom: 10px;
}

    .rpt-input > .margin-rpt-input-remove {
        margin-left: -5px;
        margin-bottom: -10px;
    }

.rpt-detail-set[class*="caption"] {
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

    .rpt-detail-set[class*="caption"] > .rpt-caption {
        position: relative;
        display: table-cell;
        line-height: 20px;
        padding: 4px;
        width: 100%;
        vertical-align: top;
    }

    .rpt-detail-set[class*="caption"] > .rpt-input {
        display: table-cell;
        width: 100%;
        padding: 4px;
        min-height: 20px;
        vertical-align: top;
    }

.rpt-detail-set.caption80 > .rpt-caption {
    width: 80px;
}

.rpt-detail-set.caption110 > .rpt-caption {
    width: 110px;
}

/*.rpt-detail-set.caption110 > .rpt-input {
    padding-left: 115px;
}*/

.rpt-detail-set.caption130 > .rpt-caption {
    width: 130px;
}

/*.rpt-detail-set.caption130 > .rpt-input {
    padding-left: 135px;
}*/

.rpt-detail-set.caption150 > .rpt-caption {
    width: 150px;
}

/*.rpt-detail-set.caption150 > .rpt-input {
    padding-left: 155px;
}*/

.rpt-detail-set.caption190 > .rpt-caption {
    width: 190px;
}

/*.rpt-detail-set.caption190 > .rpt-input {
    padding-left: 195px;
}*/

.rpt-detail-set.caption230 > .rpt-caption {
    width: 230px;
}

/*.rpt-detail-set.caption230 > .rpt-input {
    padding-left: 235px;
}*/

.rpt-detail-set.caption250 > .rpt-caption {
    width: 250px;
}

/*.rpt-detail-set.caption250 > .rpt-input {
    padding-left: 255px;
}*/

.rpt-detail-set.caption260 > .rpt-caption {
    width: 260px;
}

.rpt-detail-set.caption400 > .rpt-caption {
    width: 400px;
}

/*.rpt-detail-set.caption260 > .rpt-input {
    padding-left: 265px;
}*/

.rpt-detail-set.caption-mini > .rpt-caption {
    width: 50px;
}

.rpt-detail-set.caption-full > .rpt-caption {
    width: 100%;
}

.rpt-detail-set.caption-full > .rpt-input {
    width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Radio or Checkbox or something head on caption */
.rpt-detail-set.caption-list > .rpt-caption {
    padding-left: 23px;
}

    .rpt-detail-set.caption-list > .rpt-caption > :first-child {
        position: absolute;
        top: 8px;
        left: 5px;
    }


/*.rpt-detail-wrapper > .rpt-detail-set > .rpt-input > :not(script){ 
    display:inline-block; เพราะมัน display inline script โค้ดเลยขึ้น แต่เอาออกดีกว่า ถ้าอยากให้ div ต่อกันแบบ inline ให้ใส่ style เองครับ
}*/

.rpt-detail-wrapper > .rpt-detail-set > * > * {
    position: relative;
}

.rpt-detail-set > * > .advancesearch {
    width: 100%;
}

.rpt-detail-set.caption80 > .rpt-input.rpt-padding-l30,
.rpt-detail-set.caption110 > .rpt-input.rpt-padding-l30,
.rpt-detail-set.caption150 > .rpt-input.rpt-padding-l30,
.rpt-detail-set.caption190 > .rpt-input.rpt-padding-l30,
.rpt-detail-set.caption230 > .rpt-input.rpt-padding-l30,
.rpt-detail-set.caption250 > .rpt-input.rpt-padding-l30,
.rpt-detail-set.caption-mini > .rpt-input.rpt-padding-l30,
.rpt-detail-set.caption-full > .rpt-input.rpt-padding-l30,
.rpt-detail-set > .rpt-input.rpt-padding-l30 {
    padding-left: 30px;
}

.rpt-input .rpt-sub-input {
    display: block;
    padding: 10px;
    padding-left: 30px;
}

/*@media (min-width: 768px) { /*sm>*/

.rpt-caption > select,
.rpt-caption > input[type="text"],
.rpt-caption > .autolookup,
.rpt-caption > .custom-combobox,
.rpt-input > select,
.rpt-input > input[type="text"],
.rpt-input > textarea,
.rpt-input > .select2.select2-container,
.rpt-input > .autolookup {
    width: 55%;
    margin-right: 3px;
}

.rpt-input > .custom-combobox {
    width: 55% !important;
    margin-right: 3px;
}

.rpt-input > .lookup, .rpt-input > .custom-ddl {
    width: 55%;
    display: inline-block;
    vertical-align: middle;
}

.rpt-input .lookup + input[type=checkbox] + label {
    vertical-align: middle;
}

.rpt-group-detail .advancesearch {
    margin-top: 0;
}

@media (max-width:767px) {
    .rpt-input > .lookup, .rpt-input > .custom-ddl,
    .rpt-input > .rpt-input-uc {
        width: 100%;
        display: block;
    }

        .rpt-input > .lookup + input,
        .rpt-input > .lookup + label {
            margin-top: 10px;
        }

    /*.rpt-input > input + input,
    .rpt-input > input + label,
    .rpt-input > label + label,
    .rpt-input > label + input {
        margin-top: 10px;
    }*/

    .rpt-input > .select2.select2-container {
        width: 100% !important;
    }
}

@media (max-width:539px) {
    .rpt-detail-set[class*="caption"],
    .rpt-detail-set[class*="caption"] > .rpt-caption,
    .rpt-detail-set[class*="caption"] > .rpt-input {
        display: block;
    }

    .rpt-detail-set > .rpt-caption {
        width: 100%;
    }

        .rpt-detail-set > .rpt-caption:empty {
            margin: 0px;
            padding: 0px;
        }

    .rpt-detail-set.caption-mini > .rpt-caption {
        width: 50px !important;
        position: relative;
        display: table-cell;
    }

    .rpt-detail-set.caption-mini > .rpt-input {
        display: table-cell;
        width: 100%;
    }

    .rpt-detail-set.caption-mini {
        display: table;
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
        margin-bottom: 10px;
    }
}

.rpt-input > textarea {
    height: auto;
}

.rpt-caption > input[type=radio] + label,
.rpt-caption > input[type=checkbox] + label,
.rpt-input > input[type=radio] + label,
.rpt-input > input[type=checkbox] + label {
    display: inline-block;
    /*vertical-align: middle;*/
}

.rpt-detail-wrapper.two-col > .rpt-detail-set > * > select,
.rpt-detail-wrapper.three-col > .rpt-detail-set > * > select,
.rpt-detail-wrapper.two-col > .rpt-detail-set > * > input[type="text"],
.rpt-detail-wrapper.three-col > .rpt-detail-set > * > input[type="text"],
.rpt-detail-wrapper.two-col > .rpt-detail-set > * > .autolookup,
.rpt-detail-wrapper.three-col > .rpt-detail-set > * > .autolookup {
    width: 100%;
}

.rpt-detail-wrapper.two-col > .rpt-detail-set > * > .custom-combobox,
.rpt-detail-wrapper.three-col > .rpt-detail-set > * > .custom-combobox {
    width: 100% !important;
}

span[class*="radiolist-"] > span {
    min-height: 20px;
    margin-bottom: 10px;
    display: inline-block;
    padding-left: 18px;
    padding-right: 5px;
    vertical-align: top;
    position: relative;
    margin-right: -1px;
}

    span[class*="radiolist-"] > span > input:first-child {
        position: absolute;
        top: 0;
        left: 0;
        margin-top: 3px;
        margin-left: 5px;
    }

        span[class*="radiolist-"] > span > input:first-child + label {
            display: inline-block;
            vertical-align: top;
        }

.radio-checkbox-h10,
.radio-checkbox-h9,
.radio-checkbox-h8,
.radio-checkbox-h7,
.radio-checkbox-h6,
.radio-checkbox-h5,
.radio-checkbox-h4,
.radio-checkbox-h3,
.radio-checkbox-h2,
.radio-checkbox-v {
    clear: both;
    padding-left: 4px;
}

    .radio-checkbox-h10 > div,
    .radio-checkbox-h9 > div,
    .radio-checkbox-h8 > div,
    .radio-checkbox-h7 > div,
    .radio-checkbox-h6 > div,
    .radio-checkbox-h5 > div,
    .radio-checkbox-h4 > div,
    .radio-checkbox-h3 > div,
    .radio-checkbox-h2 > div,
    .radio-checkbox-v > div {
        min-height: 20px;
        /*margin-bottom: 10px;*/
        display: inline-block;
        float: left;
    }

.radio-checkbox-h10 > div,
.radiolist-h10 > span {
    width: 10%;
}

.radio-checkbox-h9 > div,
.radiolist-h9 > span {
    width: calc(100% / 9);
}

.radio-checkbox-h8 > div,
.radiolist-h8 > span {
    width: 12.5%;
}

.radio-checkbox-h7 > div,
.radiolist-h7 > span {
    width: calc(100% / 7);
}

.radio-checkbox-h6 > div,
.radiolist-h6 > span {
    width: 16.66666667%;
}

.radio-checkbox-h5 > div,
.radiolist-h5 > span {
    width: 20%;
}

.radio-checkbox-h4 > div,
.radiolist-h4 > span {
    width: 25%;
}

.radio-checkbox-h3 > div,
.radiolist-h3 > span {
    width: 33.33333333%;
}

.radio-checkbox-h2 > div,
.radiolist-h2 > span {
    width: 50%;
}

.radio-checkbox-v > div,
.radiolist-v > span {
    width: 100%;
}

.radio-checkbox-v:before {
    content: " ";
    display: table;
}

.radio-checkbox-v:after {
    clear: both;
    content: " ";
    display: table;
}

.rpt-footer {
    line-height: 24px;
}

    .rpt-footer .rpt-button {
        display: inline-block;
    }

        .rpt-footer .rpt-button + .rpt-button {
            margin-left: 0.375rem;
        }

        .rpt-footer .rpt-button.rpt-button-reset:hover::before {
            color: white !important;
        }

@media (max-width: 479px) {
    /*.rpt-container {
        padding-left: 0px;
        padding-right: 0px;
    }*/

    .rpt-group-detail { /**/
        padding-left: 37px;
        /*width: 100%;*/
    }

    .rpt-caption > select,
    .rpt-caption > input[type="text"],
    .rpt-caption > .autolookup,
    .rpt-input > select,
    .rpt-input > input[type="text"],
    .rpt-input > textarea,
    .rpt-input > .autolookup {
        width: 100%;
    }

    .rpt-caption > .custom-combobox,
    .rpt-input > .custom-combobox {
        width: 100% !important;
    }

    .rpt-input > textarea {
        height: auto;
    }

    .rpt-caption,
    .rpt-input {
        width: 100% !important;
    }


    .rpt-caption {
        display: block;
        padding: 2px;
    }

    .rpt-input {
        padding: 2px;
        display: block;
    }

    .rpt-detail-set.caption-list > .rpt-caption > :first-child {
        left: 2px;
    }

    .rpt-detail-wrapper.two-col > .rpt-detail-set,
    .rpt-detail-wrapper.three-col > .rpt-detail-set {
        width: 100%;
        padding-right: 0px;
        margin-left: 0px !important;
    }

    .radio-checkbox-h10 > div,
    .radio-checkbox-h9 > div,
    .radio-checkbox-h8 > div,
    .radio-checkbox-h7 > div,
    .radio-checkbox-h6 > div,
    .radio-checkbox-h5 > div,
    .radio-checkbox-h4 > div,
    .radio-checkbox-h3 > div,
    .radio-checkbox-h2 > div,
    .radio-checkbox-v > div,
    .radiolist-h10 > span,
    .radiolist-h9 > span,
    .radiolist-h8 > span,
    .radiolist-h7 > span,
    .radiolist-h6 > span,
    .radiolist-h5 > span,
    .radiolist-h4 > span,
    .radiolist-h3 > span,
    .radiolist-h2 > span,
    .radiolist-v > span {
        width: 100%;
        padding: 4px;
    }

    .rpt-footer {
        padding-left: 0px;
    }
        .rpt-footer .rpt-button + .rpt-button {
            margin-left: unset;
            margin-top: 0.375rem;
        }
}

@media (min-width: 480px) and (max-width: 767px) {

    .rpt-group-detail { /**/
        padding-left: 37px;
        /*width: 100%;*/
    }

    .rpt-detail-wrapper.two-col > .rpt-detail-set,
    .rpt-detail-wrapper.three-col > .rpt-detail-set {
        width: 100%;
        padding-right: 0px;
        margin-left: 0px !important;
    }

    .rpt-caption > select,
    .rpt-caption > input[type="text"],
    .rpt-caption > .autolookup,
    .rpt-input > select,
    .rpt-input > input[type="text"],
    .rpt-input > textarea,
    .rpt-input > .select2.select2-container,
    .rpt-input > .autolookup {
        width: 100%;
    }

    .rpt-caption > .custom-combobox,
    .rpt-input > .custom-combobox {
        width: 100% !important;
    }

    .radio-checkbox-h10 > div,
    .radio-checkbox-h9 > div,
    .radiolist-h10 > span,
    .radiolist-h9 > span {
        width: 50%;
    }

    .radio-checkbox-h8 > div,
    .radio-checkbox-h7 > div,
    .radiolist-h8 > span,
    .radiolist-h7 > span {
        width: calc(100% / 3);
    }

    .radio-checkbox-h5 > div,
    .radio-checkbox-h6 > div,
    .radiolist-h5 > span,
    .radiolist-h6 > span {
        width: 50%;
    }

    .radio-checkbox-h4 > div,
    .radio-checkbox-h3 > div,
    .radio-checkbox-h2 > div,
    .radio-checkbox-v > div,
    .radiolist-h4 > span,
    .radiolist-h3 > span,
    .radiolist-h2 > span,
    .radiolist-v > span {
        width: 100%;
    }

    .rpt-footer {
        padding-left: 0px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .radio-checkbox-h6 > div,
    .radio-checkbox-h5 > div,
    .radiolist-h6 > span,
    .radiolist-h5 > span {
        width: 33.33333333%;
    }

    .radio-checkbox-h4 > div,
    .radiolist-h4 > span {
        width: 50%;
    }
}

.rpt-margin-l0 {
    width: 95.8333333%;
    margin-left: 4.16666667%;
}

.rpt-margin-l1 {
    width: 91.66666667%;
    margin-left: 8.33333333%;
}

.rpt-margin-l2 {
    width: 83.33333333%;
    margin-left: 16.66666667%;
}

.rpt-container .help-inline {
    margin-left: 15px;
}

@media (max-width: 479px) {
    .rpt-container .help-inline {
        margin-left: 0;
    }
}

.rpt-indent-1 {
    padding-left: 30px;
}

/*---------------------------------------------------------------------

/*------------------------- Image --------------------------*/
.img-thumbnail {
    border-radius: 0;
}

.changpass-pic {
    max-height: 128px;
    min-height: 128px;
    margin: 10px 0px;
    width: auto;
    height: auto;
}

.person-pic {
    border: 1px solid #CCC;
    background-color: #FFF;
    padding: 4px;
    display: inline-block;
    max-height: 120px;
    min-width: 120px;
    min-height: 120px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* --------------- About Coach ---------------------*/
.aboutcoach .coach-logo {
    /*border: 1px solid #CCC;
    background-color: #FFF;*/
    padding: 4px;
    /*border-radius: 4px 4px;*/
    text-align: left;
}

.aboutcoach .header-version {
    padding-top: 8px;
    text-align: right;
    padding-bottom: 5px;
}

.aboutcoach .header-title {
    padding-left: 20px;
}

@media (max-width: 479px ) {
    .aboutcoach .coach-logo, .aboutcoach .header-version {
        text-align: center;
    }
}
/* --------------- About Coach ---------------------*/

/*-------------  Profile picture --------------------*/
.profile-picture {
    border: 1px solid #CCC;
    background-color: #FFF;
    padding: 4px;
    max-width: 120px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px rgba(0,0,0,.15);
}


/*==========================  OperSelectPeriod.ascx ===============================*/
.select-period div + div {
    margin-top: 10px;
}

.select-period .div-ed div + div {
    margin-top: 0px;
}

.select-period .lbl-ed {
    max-width: 100px;
}


@media (max-width: 539px) {
    .select-period .pcd-sd, .select-period .div-ed,
    .select-period .ddl-period, .select-period .lbl-period,
    .select-period .lbl-sd {
        padding-left: 25px;
    }

        .select-period .div-ed div + div {
            margin-top: 10px;
        }
}
/*==================================================================================*/

/*==========================  ORG_ManPersonnelGradeAutoControl.ascx ===============================*/
.control-tool {
    display: table;
    width: 100%;
}

    .control-tool .c-row {
        display: table-row;
    }

        .control-tool .c-row .c-col {
            display: table-cell;
        }

            .control-tool .c-row .c-col + .c-col {
                padding-left: 3px;
            }

@media (max-width: 767px) {
    .opg-uc .chkbox {
        margin-top: 5px;
    }

    .opg-uc .st-section, .opg-uc .nd-section {
        margin-top: 10px;
    }
}


/*==========================  Personnel info Control ===============================*/

.compact-area {
    padding-left: 0;
    padding-right: 0;
}

.personnel-tools {
    margin-right: 10px;
}

/* --------------- normal personel-info ---------------------*/
.normal-personelinfo {
    margin: 5px 0;
}

    .normal-personelinfo .profile-detail {
        padding-top: 10px;
    }

    .normal-personelinfo .user-name {
        margin-top: 7.5px;
    }

    .normal-personelinfo.compact-personnelinfo .personnelinfo-container,
    .normal-personelinfo.compact-personnelinfo .compact-area {
        padding-left: 0;
        padding-right: 0;
    }

    .normal-personelinfo.compact-personnelinfo .user-name {
        margin: 0;
    }

    .normal-personelinfo.compact-personnelinfo .form-normal {
        width: calc(100% - 10px);
    }

/*-------------------  Career ACPersonalinfo -------------------*/

.career-acpersonalinfo .profile-detail {
    padding-top: 10px;
}

.career-acpersonalinfo.compact-personnelinfo .personnelinfo-container,
.career-acpersonalinfo.compact-personnelinfo .compact-area {
    padding-left: 0;
    padding-right: 0;
}

.career-acpersonalinfo.compact-personnelinfo .user-name {
    margin: 0;
    margin-left: 5px;
}

/*--------------------- Career OEPersonnelinfo -------------------------------*/

.career-oepersonnelinfo .profile-detail {
    padding-top: 10px;
}

.career-oepersonnelinfo.compact-personnelinfo .personnelinfo-container,
.career-oepersonnelinfo.compact-personnelinfo .compact-area {
    padding-left: 0;
    padding-right: 0;
}

.career-oepersonnelinfo.compact-personnelinfo .user-name {
    margin: 0;
    margin-left: 5px;
}

/* --------------- Personel info control (evaluation form) ---------------------*/


.personnel-eva-form .eva-form-inner {
    padding-left: 0;
    padding-right: 0;
}

.subjector-detail {
    margin-bottom: 8px;
    padding-left: 0;
    padding-right: 0;
}

.skin-blue .personnel-eva-form {
    background-color: #fff;
    padding: 10px 0;
    border: 1px solid #3a87ad;
}

.personnel-eva-form .company-logo {
    margin-right: 10px;
}

.evaluator-detail img {
    padding: 2px;
    border-radius: 100%;
    border: 1px solid #AAA;
    max-width: none;
    width: 64px;
    -webkit-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
}

@media (max-width: 768px ) {
    .evaluator-detail img {
        max-width: 40px;
        margin-top: 8px;
    }

    .personnel-eva-form .eva-form-inner {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.evaluator-detail .element-body,
.evaluation-score .element-body {
    padding-left: 0;
    padding-right: 0;
}

    .evaluator-detail .element-body .approver-detail .form-normal,
    .evaluation-score .element-body .score-detail .form-normal {
        width: 100%;
    }

@media (min-width: 992px) {
    .evaluator-detail .evaluator .form-normal .form-normal-name {
        width: 90px;
    }

    .evaluator-detail .element-body .approver-detail .form-normal,
    .evaluation-score .element-body .score-detail .form-normal {
        width: calc(100% - 24px);
    }
}

@media (min-width: 992px) {
    .evaluation-score .form-normal .form-normal-name {
        width: 145px;
    }
}

@media (min-width: 1200px) {
    .personnel-eva-form .eva-form-inner {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.pending-header {
    margin-top: 15px;
}

.steps li.complete .title.approver-position,
.steps li.active .title.approver-position {
    color: #6688a6;
}

.steps li.complete .title.delegate-approver,
.steps li.active .title.delegate-approver {
    color: #daa458;
}


.score-detail .infobox {
    display: block;
    width: 100%;
}

    .score-detail .infobox .infobox-content {
        max-width: none;
    }

.personnel-eva-form .approve-path .form-normal-name {
    width: 40px;
}

.active-arrow {
    font-size: 13px;
}

.personnel-eva-form .form-normal .form-normal-row .active-arrow {
    display: none;
}

.personnel-eva-form .form-normal .form-normal-row.active .active-arrow {
    display: inline-block;
}

.personnel-eva-form .form-normal .form-normal-row.active .approve-name {
    font-weight: bold;
}

.eva-element-title {
    font-size: 15px;
}

.summary-element-header {
    border-bottom-color: #87b87f !important;
}

    .summary-element-header > .element-title {
        color: #87b87f !important;
    }

.detail-element-header {
    border-bottom-color: #a069c3 !important;
}

    .detail-element-header > .element-title {
        color: #a069c3 !important;
    }


/*========================== End : Personnel info Control ===============================*/

/*---------------- Page element -------------------*/
.page-header {
    margin: 7.5px 0 14px;
    border-bottom: 1px dotted #e2e2e2;
}

    .page-header.header-collapse > .page-title > .toggle {
        float: right;
    }

        .page-header.header-collapse > .page-title > .toggle:before {
            font-size: 1rem;
            font-family: "Font Awesome 5 Pro";
            content: "\f077";
            transition: transform .2s ease-in-out;
            color: #2679b5;
        }

        .page-header.header-collapse > .page-title > .toggle[aria-expanded="false"] {
            color: gray;
        }

            .page-header.header-collapse > .page-title > .toggle[aria-expanded="false"]:before {
                content: "\f078";
                color: gray;
            }

    .page-header h1 {
        padding: 0;
        margin: 0 8px;
        font-size: 18px;
        font-weight: 300;
        color: #2679b5;
    }

        .page-header h1 small {
            margin: 0 6px;
            font-size: 11px;
            font-weight: 400;
            color: #8089a0;
        }

    .page-header.double-border {
        border: none;
    }

        .page-header.double-border h1 {
            margin-left: 0;
            margin-right: 0;
        }

            .page-header.double-border h1::after {
                content: "";
                display: block;
                height: 3px;
                border-top-width: 1px;
                border-top-style: solid;
                border-top-color: #E3E3E3;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: #E3E3E3;
                margin-top: 8px;
            }

    .page-header.no-margin {
        margin-bottom: 0;
    }

@media (min-width: 375px) {
    .page-header h1 {
        font-size: 24px;
    }

        .page-header h1 small {
            font-size: 14px;
        }
}

/*================== Custom bootstrap show modal center ============*/
.modal-body {
    overflow: auto;
}




/*------------------ [PS]Slim scroll ---------------------------*/
/* Let's get this party started */
.ps-slim-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
.ps-slim-scroll::-webkit-scrollbar-track {
    background-color: #E7E7E7;
}

/* Handle */
.ps-slim-scroll::-webkit-scrollbar-thumb {
    background: #a0a0a4;
}

    .ps-slim-scroll::-webkit-scrollbar-thumb:window-inactive {
        background: #e5e5e5;
    }

/*------------------ PersonnelInfo Control ---------------------------*/
.personnel-info-control.striped-style .table-info,
.personnel-info-control.normal-style .table-info {
    border: 1px solid #BCE8F1;
}

.personnel-info-control .table-info {
    display: table;
    width: 100%;
    table-layout: fixed;
    color: black;
}

    .personnel-info-control .table-info .row-info .col-info {
        display: block;
        width: 100%;
        padding: 8px;
    }

        .personnel-info-control .table-info .row-info .col-info.caption-info {
            /*background-color: #BCE8F1;*/
            background-color: #EDF3F4;
        }

.personnel-info-control.normal-style .table-info .row-info .col-info.control-info span {
    border-bottom: 1px dashed #bbb;
}

.personnel-info-control.striped-style .table-info .row-info .col-info.caption-info {
    border-bottom: 1px dotted #fff;
}

.personnel-info-control.striped-style .table-info .row-info .col-info.control-info {
    border-bottom: 1px dotted #BCE8F1;
}

@media(min-width:540px) and (max-width:767px) {
    .personnel-info-control .table-info .row-info {
        position: relative;
        overflow: hidden;
    }

        .personnel-info-control .table-info .row-info > .col-info.caption-info {
            position: absolute;
            width: 150px;
            height: 100%;
        }

        .personnel-info-control .table-info .row-info > .col-info.control-info {
            padding-left: 170px;
        }
}

@media(min-width:540px) {
    .personnel-info-control .table-info .row-info .col-info.caption-info {
        width: 150px;
    }

        .personnel-info-control .table-info .row-info .col-info.caption-info + .col-info.control-info {
            width: auto;
        }

    .personnel-info-control .table-info > div.row-info:last-child > div.col-info.caption-info:last-child,
    .personnel-info-control .table-info > div.row-info:last-child > div.col-info.caption-info:last-child + div.control-info {
        border: none;
    }

    .personnel-info-control.normal-style .table-info .col-info.caption-info {
        text-align: right;
    }

    .personnel-info-control.normal-style .table-info {
        border: none;
    }

        .personnel-info-control.normal-style .table-info .col-info.caption-info,
        .personnel-info-control.normal-style .table-info .col-info.control-info {
            background-color: inherit !important;
            border-top: 1px dotted #BCE8F1;
        }
}

@media(min-width:768px) {
    .col-info.control-info.dummyColumn {
        display: table-cell !important;
    }

    .personnel-info-control .table-info .row-info {
        display: table-row;
    }

        .personnel-info-control .table-info .row-info .col-info {
            display: table-cell;
        }

            .personnel-info-control .table-info .row-info .col-info.control-info {
                min-height: initial !important;
            }

    .personnel-info-control .table-info > div.row-info:last-child > div.col-info,
    .personnel-info-control .table-info > div.row-info:last-child > div.control-info {
        border: none !important;
    }

    .personnel-info-control .table-info .row-info .col-info.w-90.caption-info {
        width: 90px;
    }

    .personnel-info-control .table-info .row-info .col-info.w-90.control-info {
        padding-left: 110px;
    }

    .personnel-info-control .table-info .row-info .col-info.w-150.caption-info {
        width: 150px;
    }

    .personnel-info-control .table-info .row-info .col-info.w-150.control-info {
        padding-left: 170px;
    }
}

@media(max-width: 539px) {
    .personnel-info-control .table-info .row-info .col-info.control-info {
        min-height: auto !important;
        min-height: initial !important;
    }
}
/* ================= Mini PersonInfo Control ================= */
.mini-info .collapse-info:hover {
    cursor: pointer;
}

.mini-info.profile-name {
    float: none;
    font-size: 2em;
}

.mini-info .person-name {
    position: relative;
}

.mini-info-icon {
    display: inline-block;
    font-size: 1rem;
}

.mini-info .person-name .collapse-info {
    /*font-size: 14px;*/
    /*position: absolute;*/
    /*bottom: 4px;
    right: 0;
    float: right*/
}

.addition-profile {
    font-size: 14px;
}

    .addition-profile .mini-info-row {
        padding-top: 5px;
        margin-bottom: 8px;
        border-top: 1px dotted #ccc;
        width: 100%;
    }

        .addition-profile .mini-info-row:first-child,
        .addition-profile.no-border .mini-info-row {
            border-top: none;
        }

@media(max-width:767px) {
    .addition-profile .mini-info-row > .blue {
        color: white !important;
    }
}

@media(min-width:768px) {
    .addition-profile .mini-info-row {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

    @media(min-width:540px) {
        .mini-info.profile-name .person-name {
            float: left;
            width: 100%;
        }

            .mini-info.profile-name .person-name > .empcode-front {
                display: inline-block;
            }

            .mini-info.profile-name .person-name > .name {
                display: block;
            }
    }

    @media(min-width:768px) {
        .addition-profile {
            font-size: 11px;
        }

        .mini-info {
            text-align: center;
        }

            .mini-info.profile-name {
                float: none;
                font-size: inherit;
            }

                .mini-info.profile-name .person-name {
                    float: none;
                    border: none;
                    margin: 0;
                    line-height: 1.6;
                }

                    .mini-info.profile-name .person-name .empcode-front {
                        display: inline-block;
                    }

                    .mini-info.profile-name .person-name .empcode-rear {
                        display: none;
                    }
    }


    /* ================= Mini PersonInfo Control ================= */

    /*====================== Input group ===========================*/
    .input-group .input-group-addon,
    .input-group > .btn {
        height: 20px;
        line-height: 1;
    }

        .input-group .input-group-addon:not(.rounded),
        .input-group > .btn:not(.rounded) {
            border-radius: 0 !important;
        }

        .input-group .input-group-addon .ps-checkbox {
            width: 12px;
            height: 12px;
            line-height: 8px;
            margin-left: 4px;
            margin-right: 0;
        }

            .input-group .input-group-addon .ps-checkbox:before {
                height: 12px;
                width: 12px;
                min-width: 12px;
                font-size: 8px;
                line-height: 8px;
            }

    .input-group.input-group-na {
        width: 100%;
    }

        .input-group.input-group-na > .form-control {
            /*border-right: none;*/
        }

        .input-group.input-group-na .input-group-addon {
            /*border-right: 1px solid #7B9EBD;*/
            border-color: #7B9EBD;
            overflow: hidden;
            max-width: 0;
            width: 0;
            -webkit-transition: all .5s ease;
            transition: all .5s ease;
            /*border-radius: 0 !important;*/
            height: 20px;
            line-height: 1;
            padding: 0;
        }

            .input-group.input-group-na .input-group-addon > label,
            .input-group.input-group-na .input-group-addon > .label {
                margin: 0;
            }

        .input-group.input-group-na > .form-control:first-child:focus + .input-group-addon {
            border-color: #f59942 !important;
        }

        .input-group.input-group-na:hover > input:not([data-pm-disallow="disallow"]) + .input-group-addon,
        .input-group.input-group-na > .form-control:not([data-pm-disallow="disallow"]):first-child:focus + .input-group-addon {
            max-width: 26px;
            width: 26px;
            padding: 2px 4px 2px;
            /*border-width: 1px;*/
        }

        .input-group.input-group-na:hover > input + .input-group-addon:hover,
        .input-group.input-group-na > .form-control:first-child:focus + .input-group-addon:hover {
            max-width: 50px;
            width: 50px;
        }

        /*.input-group.input-group-na:hover .input-group-addon:hover > .ps-checkbox {
                margin: 0;
            }*/

        .input-group.input-group-na.na > .form-control {
            /*width: 0;*/
            padding: 0;
        }

        .input-group.input-group-na.na .input-group-addon > .ps-checkbox {
            margin: 0;
            /*float: right;*/
            top: 3px;
            position: absolute;
            right: 4px;
        }

    .na .input-group-addon {
        position: relative;
        max-width: 100% !important;
        width: 100% !important;
        padding: 2px 4px 2px !important;
        background-color: rgba(123,158,189,.5);
        color: #3a7bb5;
    }


    .input-group.input-group-na.na .input-group-addon input[type="checkbox"].ps-checkbox:checked:before {
        border-color: #32A3CE;
    }

    .input-group.input-group-na.not-allow-na > .form-control {
        border-right: 1px solid #7B9EBD;
    }

    .input-group.input-group-na.not-allow-na .input-group-addon {
        display: none !important;
    }

    .input-group.input-group-na > .form-control[disabled]:first-child + .input-group-addon {
        max-width: 0 !important;
        border-width: 0 !important;
        padding: 0 !important;
    }

    .input-group.input-group-na.na > .form-control[disabled]:first-child {
        border-right: none !important;
    }

        .input-group.input-group-na.na > .form-control[disabled]:first-child + .input-group-addon {
            max-width: 100px !important;
            background-color: #eeeeee;
            color: #848484;
            border-top: 1px solid #cccccc !important;
            border-right: 1px solid #cccccc !important;
            border-bottom: 1px solid #cccccc !important;
            padding: 2px 4px 2px !important;
        }

            .input-group.input-group-na.na > .form-control[disabled]:first-child + .input-group-addon input[type=checkbox] {
                display: none;
            }


    /*====================== Table (.Table) =========================*/

    .table.table-bordered > thead > tr.table-header,
    .table.table-bordered > thead > tr > th.table-header {
        background-color: #307ECC;
        color: #FFF;
        font-size: 1.1em;
        line-height: 38px;
        padding-left: 12px;
        margin-bottom: 1px;
        background-image: none;
    }

    .table > thead > tr {
        color: #707070;
        font-weight: 400;
        background-image: none;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff8f8f8', endColorstr='#ffececec', GradientType=0);
    }


        .table > thead > tr > th {
            border-color: #ddd;
        }

            .table > thead > tr > th .ace-icon:first-child {
                margin-right: 2px;
            }

            .table > thead > tr > th:first-child {
                border-left-color: #F1F1F1;
            }

            .table > thead > tr > th:last-child {
                border-right-color: #F1F1F1;
            }

    .table.transparent > thead > tr {
        background: none;
    }

    .table.table-bordered > thead > tr > th {
        vertical-align: middle;
    }

        .table.table-bordered > thead > tr > th:first-child {
            border-left-color: #ddd;
        }

    td.center, th.center {
        text-align: center;
    }

    td .lbl, th .lbl {
        margin-bottom: 0;
    }

        td .lbl:only-child, th .lbl:only-child {
            vertical-align: top;
        }

    .table-header {
        background-color: #307ECC;
        color: #FFF;
        font-size: 14px;
        line-height: 38px;
        padding-left: 12px;
        margin-bottom: 1px;
    }

        .table-header .close {
            margin-right: 8px;
            margin-top: 0;
            opacity: .45;
            filter: alpha(opacity=45);
        }

            .table-header .close:hover {
                opacity: .75;
                filter: alpha(opacity=75);
            }

    th.detail-col {
        width: 48px;
        text-align: center;
    }

    tr.detail-row {
        display: none;
    }

        tr.detail-row.open {
            display: block;
            display: table-row;
        }

        tr.detail-row > td {
            background-color: #f1f6f8;
            border-top: 3px solid #d1e1ea !important;
        }

    .table-detail {
        background-color: #fff;
        border: 1px solid #dcebf7;
        width: 100%;
        padding: 12px;
    }

        .table-detail td > .profile-user-info {
            width: 100%;
        }

    .panel > .table thead tr {
        background: #fff;
    }

    .ps-panel {
        position: relative;
        padding: 15px;
        margin: 15px 0;
        border-color: #e5e5e5 #eee #eee;
        border-style: solid;
        border-width: 1px 0;
    }

    @media (min-width: 768px) {
        .ps-panel {
            margin-right: 0;
            margin-left: 0;
            background-color: #fff;
            border-color: #ddd;
            border-width: 1px;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
    }

    .cell-mini {
        width: 60px;
        max-width: 60px;
    }

    .cell-sm {
        width: 120px;
        max-width: 120px;
    }

    .cell-160 {
        width: 160px;
        max-width: 160px;
    }

    .cell-200 {
        width: 200px;
        max-width: 200px;
    }

    .cell-lg {
        width: 250px;
        max-width: 250px;
    }

    .cell-lg {
        width: 250px;
        max-width: 250px;
    }

    .cell-270 {
        width: 270px;
        max-width: 270px;
    }

    .cell-300 {
        width: 300px;
    }

    .cell-360 {
        width: 360px;
    }

    .cell-65 {
        width: 65px;
        max-width: 65px;
    }

    /*note*/
    pre.pre-clear {
        /* bootstrap style overrides */
        display: block;
        font-family: inherit;
        padding: 0;
        line-height: normal;
        border: 0;
        background-color: transparent;
        word-break: normal;
        word-wrap: normal;
        border-radius: 0;
        font-size: inherit;
        white-space: pre-wrap;
        margin: inherit;
        width: 100%;
    }


    .asp-control .radio-inline {
        margin-left: 0;
    }

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

.minimize-menu .tbIconArea {
    text-align: left;
}

.minimize-menu .mCS_no_scrollbar .tbIconArea {
    text-align: center;
}

TD.AppMenuBar {
    text-align: left;
    padding-left: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #ffffff;
    background-color: #5A6B7D;
    padding-right: 10px;
}

.AppMenuBar .TopMenuItemStyle A:Link {
    color: White;
    cursor: pointer;
}

.AppMenuBar .TopMenuItemStyle A:visited {
    text-decoration: none;
    color: White;
    cursor: pointer;
}

.AppMenuBar .TopMenuItemStyle A:active {
    text-decoration: none;
    color: White;
    cursor: pointer;
}

.AppMenuBar .TopMenuItemStyle A:hover {
    text-decoration: none;
    color: Black;
    cursor: pointer;
}

.AppMenuBar .SubMenuItemStyle A:Link {
    color: #00025C;
}

.AppMenuBar .SubMenuItemStyle A:visited {
    text-decoration: none;
    color: #00025C;
}

.AppMenuBar .SubMenuItemStyle A:active {
    text-decoration: none;
    color: #00025C;
}

.AppMenuBar .SubMenuItemStyle A:hover {
    text-decoration: none;
    color: #00025C;
}

td.MenuBar {
    width: 100%;
    height: 24px;
    text-align: left;
    padding-left: 5px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: normal;
    cursor: default;
    color: #ffffff;
    background-color: #5A6B7D;
}

td.MenuToolsBar {
    width: 100%;
    height: 24px;
    text-align: left;
    padding-left: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: default;
    color: #ffffff;
    background-color: #DCDFE5;
}


/***********************************

	Style Sheet
	Application Menu
************************************/


.TopMenu {
    /*background-color:#5A6B7D;*/
    font-weight: bold;
}

.TopMenuStyle {
    color: #000000;
}

.TopMenuItemStyle label {
    cursor: pointer;
}

.TopMenu10 {
    font-weight: bold;
}

.TopMenu10Style {
    color: #000000;
}

.TopMenu10ItemStyle {
    color: white !important;
    font-size: 14px;
    padding: 1px;
    border: 1px solid #454545;
    width: 100%;
    height: 100%;
    font-weight: bold;
}

.TopMenu10ItemHover {
    color: Black;
    font-size: 14px;
    cursor: pointer !important;
    font-weight: bold;
}


.TopMenuItemStyle {
    color: white;
    padding: 1px;
    width: 100%;
    height: 100%;
}


.TopMenuItemHover {
    color: Black;
    font-size: 14px;
    border: #DFE2E5 1px solid;
    background-color: #C2C5C8;
    font-weight: bold;
}

.SubMenuStyle {
    border: 1px solid #8394ac;
    font-weight: bold;
}

a.SubMenuItemStyle {
    display: block;
    text-align: left;
}

.SubMenuItemStyle[disabled="true"] {
    color: #999 !important;
}

.SubMenuItemStyle {
    color: #00025C;
    font-size: 14px;
    height: 100%;
    border: #ffffff 1px solid;
    padding: 2px 4px 2px 4px;
    cursor: pointer;
}

    .SubMenuItemStyle:hover {
        background-color: #E4F1F7;
        color: #00025C;
        font-size: 14px;
        border: #0099ff 1px solid;
        cursor: pointer;
    }


    .SubMenuItemStyle label {
        cursor: pointer;
    }

.SubMenuItemHover {
    background-color: #E4F1F7;
    color: #00025C;
    font-size: 14px;
    border: #0099ff 1px solid;
    cursor: pointer;
}


@media (max-width: 480px) {
    .TopMenu10ItemHover.MenuIcon label {
        display: none;
    }


    .TopMenu10ItemStyle.MenuIcon label {
        display: none;
    }
}

/*
	Menu Tool Bar
*/

.MenuToolBar {
    cursor: pointer;
    color: Black;
    height: 100%;
}

    .MenuToolBar > tbody > tr > td {
        height: 100%;
    }

        .MenuToolBar > tbody > tr > td > .MenuToolBarItem {
            height: 100%;
        }

a.MenuToolBarItem {
    color: #fff;
    cursor: pointer;
    padding: 5px 15px 6px;
    width: 100%;
    display: inline-block;
}

    a.MenuToolBarItem:hover {
        background-color: #d7e6f3;
    }

.MenuToolBarItem > a {
    display: none;
}

.MenuToolBarItem A[disabled="true"],
.MenuToolBarItem A[disabled="disabled"] {
    color: #999 !important;
    text-shadow: white 1px 1px;
    vertical-align: bottom;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

    .MenuToolBarItem A[disabled="true"]:hover,
    .MenuToolBarItem A[disabled="disabled"]:hover {
        background-color: transparent;
    }

.MenuToolBarItem A:Link {
    color: black;
    font-weight: normal;
    outline: 0;
}

.MenuToolBarItem A:visited {
    color: black;
}

/*.MenuToolBarItemHover {
    color: Black;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    height: 23px;
    padding: 1px;
    margin: 2px;
    background-color: #c2c1c1;
}*/


/*
	Navigation vertical
*/

.NavMenu {
    padding: 1px 0 1px 2px;
    color: #00025C;
    font-size: 14px;
}

.NavMenuItem {
    font-size: 14px;
    cursor: default;
    background-color: #ffffff;
    border-bottom: #333333 1px solid;
    border-top: #333333 1px solid;
    border-left: #333333 1px solid;
    padding: 2px 0 2px 2px;
    color: #00025C;
    width: 100%;
}

    .NavMenuItem A:Link {
        color: Black;
    }

    .NavMenuItem A:visited {
        color: Black;
    }

.NavHover {
    border-bottom: #333333 1px solid;
    border-top: #333333 1px solid;
    border-left: #333333 1px solid;
    padding: 2px 0 2px 2px;
    color: #00025C;
    cursor: pointer;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#EDF1D5, EndColorStr=#D4DD9C);
}

.NavSelected {
    background-color: #ACC0E9;
    border-bottom: #333333 1px solid;
    border-top: #333333 1px solid;
    border-left: #333333 1px solid;
    padding: 2px 0 2px 2px;
    color: #000000;
}

.Listbar {
    Width: 100%;
    Font-Size: 12px;
}

.ListbarHeader {
    Font-Size: 12px;
    font-weight: bold;
    color: #ffffff;
    border: 1px none Silver;
    width: 142px;
    height: 30px;
}

.ListGroup {
    Cursor: Default;
    Font-Size: 12px;
    font-weight: bold;
    Color: #000000;
    background-color: #ffffff;
    Width: 100%;
    border: 0 none Silver;
    border-bottom-width: 1px;
}

.ListbarDefaultItem,
.ListbarDefaultItemHover,
.ListbarDefaultItemSelect {
    table-layout: fixed;
    overflow: hidden;
    Cursor: Default;
    Height: 30px;
    border: none #dcdfe5;
    border-right-width: 1px;
    border-left-width: 1px;
    font-weight: normal;
    Color: #000000;
    background-color: #ffffff;
    padding: 5px;
    white-space: nowrap;
    -ms-text-overflow: clip !important;
    -o-text-overflow: clip !important;
    text-overflow: ellipsis;
    border-top: 1px dotted #dcdfe5;
    Width: 150px;
}

    .ListbarDefaultItem > i:first-child,
    .ListbarDefaultItemHover > i:first-child,
    .ListbarDefaultItemSelect > i:first-child {
        width: 20px;
        font-size: 14px;
        vertical-align: middle;
    }

    .ListbarDefaultItem > img,
    .ListbarDefaultItemHover > img,
    .ListbarDefaultItemSelect > img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

.ListbarDefaultItem {
    border-left: 3px solid transparent;
}

.ListbarDefaultItemHover {
    cursor: pointer; /*Cross browser*/
}

.ListbarDefaultItemSelect {
}

.ListbarDefaultItem[disabled], .ListbarDefaultItem[disabled] > img,
.ListbarDefaultItem[disabled], .ListbarDefaultItem[disabled] > i:first-child {
    opacity: 0.4;
}

/*div[disabled] {
    color: #999 !important;
    vertical-align: bottom;
    cursor: default;
    border-left:none;
    cursor: default;
    pointer-events: none;
}*/

A.DarkRedBoldLinkButton:hover {
    text-decoration: underline;
    color: red;
    cursor: pointer;
    font-weight: 700;
}

.SiteLink {
    font-size: 11px;
    font-weight: 700;
}

A.SiteLink:link {
    text-decoration: none;
    color: white;
}

A.SiteLink:hover {
    text-decoration: underline;
    color: white;
}

.Head {
    font-size: 20px;
    font-weight: 400;
    color: #666644;
}

.ReportTitle {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
}

.SubHead {
    font-size: 14px;
    font-weight: 700;
    color: navy;
}

.SubSubHead {
    font-size: 11px;
    font-weight: 700;
    color: black;
}

.NormalDarkRed {
    font-size: 11px;
    font-weight: 700;
    color: darkred;
}

.NormalNavy {
    font-size: 11px;
    font-weight: 400;
    color: Navy;
}

A.CommandButton:hover {
    text-decoration: underline;
    color: red;
}

.RadioButtonList {
    font-size: 11px;
    font-weight: 400;
    border-style: outset;
    border-width: 0;
}

.lijntjes {
    background-color: #666633;
}

.noviewcel {
    background-color: #CCCCCC;
}

.TableCalendar {
    border-right: lightgrey 0 solid;
    table-layout: fixed;
    border-top: lightgrey 0 solid;
    border-left: lightgrey 0 solid;
    border-bottom: lightgrey 0 solid;
    border-collapse: collapse;
}

A.DarkRedBoldLinkButton:link, A.DarkRedBoldLinkButton:visited, A.DarkRedBoldLinkButton:active {
    text-decoration: none;
    color: darkred;
    cursor: pointer;
    font-weight: 700;
}

A.DarkRedLinkButton:link, A.DarkRedLinkButton:visited, A.DarkRedLinkButton:active {
    text-decoration: none;
    color: darkred;
    cursor: pointer;
    font-weight: normal;
}

A.SiteLink:visited, A.SiteLink:active {
    text-decoration: none;
    color: #eeeeee;
}

.Accent, .NormalRed {
    font-size: 11px;
    font-weight: 700;
    color: red;
}

.NormalSelection, .NormalNavyBold {
    color: Navy;
}
.NormalSelection, .NormalNavy {
    font-size: 11px;
    color: #000000;
}

A.CommandButton:link, A.CommandButton:visited, A.CommandButton:active {
    text-decoration: underline;
    color: darkred;
}
.calendar {
    position: relative;
    z-index: 99999 !important;
    border-radius: .5rem;
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    background-color: white;
}

span.calendar {
    position: relative;
    z-index: 99999 !important;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.calendar, .calendar table {
    font-size: 11px;
    color: #000;
    cursor: default;
}

    .calendar .button {
        text-align: center;
        background-color: rgb(20, 100, 204);
        color: #FFF;
        padding: 5px;
    }

    .calendar .nav div {
    }

    .calendar thead tr {
        background: url(/Coachps/App_Themes/Coach10/images/popupcalendar/title-bg.gif) repeat-x 0 100%;
        color: #000;
    }

    .calendar thead tr:first-child td:first-child {
        border-top-left-radius: .5rem;
    }

        .calendar thead tr:first-child td:last-child {
            border-top-right-radius: .5rem;
        }

    .calendar thead .title {
        text-align: center;
        background-color: rgb(20, 100, 204);
        color: #FFF;
        padding: 2px;
    }

    .calendar thead .name {
        text-align: center;
        color: #000;
        padding: 5px;
        font-weight: 700;
        background-color: #edf2f9;
    }

    .calendar thead .hilite {
        background-color: #6699FF;
        padding: 5px;
    }

    .calendar thead .daynames {
        background: url(/Coachps/App_Themes/Coach10/images/popupcalendar/dark-bg.gif);
    }

    .calendar tbody .day {
        background-color: white;
        color: #555555;
        text-align: right;
        padding: 2px 4px 2px 2px;
        cursor: pointer;
    }

        .calendar tbody .day.othermonth {
            font-size: 80%;
            color: #999;
        }

            .calendar tbody .day.othermonth.oweekend {
                color: #f99;
            }

    .calendar table .wn {
        border-right: 1px solid #797979;
        padding: 2px 3px 2px 2px;
        border-right: solid 1px #BBBBBB;
    }

    .calendar tbody .rowhilite td, .calendar tbody .rowhilite td.wn {
        background-color: rgba(217,112,93,30%);
    }

    .calendar tbody td.today {
        font-weight: 700;
    }

    .calendar tbody td.hilite {
        background-color: #d9705d;
        border-radius: .5rem;
        color: white;
    }

    .calendar tbody td.active {
        padding: 2px 2px 0;
    }

    .calendar tbody td.selected {
        color: white;
        padding: 1px 3px 1px 1px;
        background-color: #d9705d;
        border-radius: .5rem;
        width: 18px;
        height: 18px;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .calendar tbody .disabled {
        color: #999;
    }

    .calendar tbody .emptycell {
        visibility: hidden;
    }

    .calendar tbody .emptyrow {
        display: none;
    }

    .calendar tfoot .footrow {
        text-align: center;
        color: #fff;
    }

    .calendar tfoot .ttip {
        color: #555;
        font-weight: 700;
        padding: 2px;
        border-top: solid 1px #BBBBBB;
    }

    .calendar tfoot .hilite {
        background: #afa;
        border: 1px solid #084;
        color: #000;
        padding: 1px;
    }

    .calendar tfoot .active {
        background: #7c7;
        padding: 2px 0 0 2px;
    }

    .calendar .combo {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        width: 4em;
        cursor: default;
        color: #000;
        z-index: 100;
        border: 1px solid #edf2f9;
        border-radius: 0.5rem;
    }

        .calendar .combo .label, .calendar .combo .label-IEfix {
            text-align: center;
            padding: 1px;
            display: block;
            font-size: 90%;
            line-height: 1.5;
            color: #000;
            border-radius: 0 !important;
            background-color: white;
        }

        .calendar .combo .label-IEfix {
            width: 4em;
        }

        .calendar .combo .active {
            font-weight: 700;
            color: white;
            background-color: #d9705d;
        }

    .calendar td.time {
        border-top: 1px solid #797979;
        text-align: center;
        background: url(/Coachps/App_Themes/Coach10/images/popupcalendar/dark-bg.gif);
        padding: 1px 0;
    }

        .calendar td.time .hour, .calendar td.time .minute, .calendar td.time .ampm {
            font-weight: 700;
            background: url(/Coachps/App_Themes/Coach10/images/popupcalendar/normal-bg.gif);
            color: #000;
            padding: 0 5px 0 6px;
        }

        .calendar td.time .ampm {
            text-align: center;
        }

        .calendar td.time .colon {
            font-weight: 700;
            padding: 0 2px 0 3px;
        }

        .calendar td.time span.active {
            background: url(/Coachps/App_Themes/Coach10/images/popupcalendar/active-bg.gif);
            color: #fff;
        }

.NormalCalendar {
    /*border: 1px solid red;*/
    padding-top: 0;
    display: inline-block;
    *display: inline; /* for IE7*/
    *zoom: 1; /* for IE7*/
    position: relative;
    width: 100px;
}

    .NormalCalendar > input[pswebctrltype] {
        text-align: center;
        padding-right: 22px;
    }

.calendarText {
    border: solid 1px #7B9EBD;
    width: 100%;
    padding-right: 20px !important;
    min-height: 16px;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
    margin-right: 2px;
    line-height: normal;
}

.NormalCalendar > a,
.NormalCalendar > .calendarButton {
    position: absolute;
    top: 0;
    right: 0;
}

.calendarButton {
    cursor: pointer;
    height: 20px;
    vertical-align: middle;
    padding: 3px 5px;
    /*display: inline;*/
}

.NormalCalendar > input[pswebctrltype][readonly] + a > .calendarButton {
    color: #939192 !important;
    cursor: default;
}

.calendar thead .weekend, .calendar tbody td.weekend {
    /*color: #c44;*/
}

.calendar .combo .hilite, .calendar td.time span.hilite {
    background-color: #eecec8;
}