/* 
 * Copyright (c) 2024 JCPDS-ICDD. All rights reserved.
 */
/* 
    Created on : Jul 16, 2020, 5:33:38 AM
    Author     : clement
*/
/*  === Color Scheme ===

lt teal - #d6eef2
med teal - #aedce3
teal - #87cad4
purple - #573085
med blue - #3a56a2
dk blue - #203061
*/
html {
    height: 100%;
    width: 100%;
}
html, body {
    margin: 0 auto;
    padding: 0;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    background: #fff;
    border: none;
    width: 100%;
    min-width: 900px;
}
#page {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
#page-header {
    margin: 0 auto 3em auto;
    padding: 0;
    width: 100%;
    text-align: center;
}
.header-graphic {
    margin: 0 auto;
    padding: 1em;
    text-align: center;
}
#content {
    margin: 0 3em;
    min-height: 500px;
}
#content-report {
    margin: 0 1em;
}
/* === Page Footer === */
footer {
    margin: 2em auto 2em auto;
    font-size: 0.8em;
}
div#footer-msg.contact {
    margin: 3em auto 1em auto;
    padding: 0;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.3;
    letter-spacing: 0.1em;
}
/* === This class is to clear floats. 
Apply it to an empty div after a floated element.
=== */
.clear-fix {
    clear: both;
}
/* === Page Copy Styles === */
div.one-col-para {
    margin: 0 auto ;
    padding: 0;
    text-align: justify;
}
div.one-col-para h3 {
    font-size: 1.7em;
    color: #573085;
}
div.one-col-para p.bold-italic {
    font-size: 1.2em;
    font-weight: bold;
    font-style: italic;
    color: #573085;
}
div.one-col-para p {
    line-height: 1.5;
}
h1, h2, h3 {
    color: #573085;
}
h1, h2 {
    text-align: center;
}
h1 {
    margin: 0 0 0.5em 0;
    padding: 0;
    font-size: 1.5em;
}
h2 {
    margin: 0.2em 0.2em 0.2em 0em;
    padding: 0.5em 0.5em 0.5em 0em;
    font-size: 1em;
    letter-spacing: 0.1em;
}
h3 {
    margin: 0.2em;
    padding: 0.4em;
    font-size: 1em;
    letter-spacing: 0.1em;
}
p {
    margin: 0.5em;
}
nav {
    margin: 0;
    padding-bottom: 1em;
    text-align: center;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav ul li {
    display: inline;
    margin: 0 0.5em;
}
nav ul li a:link, nav ul li a:visited, .subnav a:link, .subnav a:visited {
    color: #203061;
}
nav ul li a:hover, nav ul li a:active, .subnav a:hover, .subnav a:active {
    color: #573085;
}
.nav-curr {
    color: darkgray;
    cursor: default;
}
ol.items {
    margin-top: 0;
    padding-top: 0;
}
ol.inline-list li {
    width: auto;
    float: left;
    margin-right: 2em;
}
ul.items {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.items > li {
    margin-bottom: 0.5em;
}
ul.nmtop {
    margin-top: 0;
    padding-top: 0;
}
#arrow-items li {
    list-style-type: none;
    position: relative;
    padding-left: 15px;
}
#arrow-items li:before {
    content: "\25BA \0020";
    font-size: 6px;
    position: absolute;
    top: 5px;
    left: -10px;
}
.actions-box {
    margin: 0 auto 2.5em auto;
    padding: 2em 1em;
    width: 32%;
    background-color: #d6eef2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#fff, #d6eef2);
    border: 0.15em solid #c5c7c9;
    border-radius: 1em;
    text-align: center;
    font-size: 120%;
    color: #203061;
}
.actions-box a:link, .actions-box a:visited {
    text-decoration: none;
    color: #203061;
}
.actions-box a:hover, .actions-box a:active {
    text-decoration: underline;
    color: #573085;
}
.actions {
    margin-bottom: 1em;
    text-align: right;
}
.actions a:link, .actions a:visited {
    min-width: 5.5em;
    font-size: 0.9em;
    font-weight: bold;
    /*text-transform: uppercase;*/
    text-align: center;
    padding: 0.45em;
    color: #203061;
    background-color: #d6eef2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#fff, #d6eef2);
    display: inline-block;
    border: 0.1em solid lightgrey;
    border-radius: 0.2em;
    text-decoration: none;
}
.actions a:hover, .actions a:active {
    background: #573085;
    color: white;
    text-decoration: none;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.actions a:focus {
    outline: 2px;
    background: #573085;
    color: white;
}
#actions-left.actions{
    text-align: left;
}
#actions-left-nomar.actions{
    text-align: left;
    margin: 0.2em;
}
#actions-center.actions{
    text-align: center;
}
li .actions{
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.com label {
    margin: 0;
    display: inline-block;
}
.input-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.input-file + label {
    padding: 0.2em 1em 0.2em 1em;
    min-width: 5em;
    min-height: 1.2em;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: 0.1em solid lightgrey;
    border-radius: 0.2em;
    color: #203061;
    background-color: #d6eef2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#fff, #d6eef2);
    display: inline-block;
}
.input-file:focus + label,
.input-file + label:hover {
    background: #573085;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.input-file:focus + label {
    outline: 2px;
    background: #573085;
}
.input-file + label * {
    pointer-events: none;
}
.com input[type="checkbox"] {
    border: 1px solid lightgray;
    border-radius: 0.2em;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.com input[type="checkbox"]:hover {
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.24), 0 2px 5px 0 rgba(0,0,0,0.19);
}
.com input[type="file"] {
    padding: 0.2em 0.2em 0.2em 0.2em;
    border: 0;
    font-size: 0.9em;
    font-weight: bold;
    color: transparent;
}
.com input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"] {
    padding: 0.2em 0.2em 0.2em 0.2em;
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom: 1px solid lightgray;
    font-size: 1em;
    color: #000066;
}
.com input[type="text"]:focus {
    outline: 0;
    background: #ebebeb;
    border-radius: 0.2em;
}
#editbl input[type="text"] {
    width: 100%;
}
.com-numb-tn input[type="number"] {
    width: 5em;
}
.com-tn input[type="text"] {
    width: 3.5em;
}
.com-ttn input[type="text"] {
    width: 5em;
}
.com-smd input[type="text"] {
    width: 9em;
}
.com-md input[type="text"],
input[type="date"] {
    min-width: 10em;
}
.com-mmd input[type="text"] {
    min-width: 15em;
}
.com-lg input[type="text"],
input[type="password"],
input[type="email"] {
    min-width: 20em;
}
.com-xlg input[type="text"],
input[type="password"],
input[type="email"] {
    min-width: 25em;
}
.com-hlg input[type="text"] {
    min-width: 30em;
}
.com-full input[type="text"] {
    width: 100%;
}
.com-slg input[type="text"] {
    width: 75%;
}
.com-width-full {
    width: 100%;
}
.com-width-fullp {
    width: 99%;
}
.com-width-fullm {
    width: 90%;
}
.com-w-sm {
    width: 4em;
}
textarea {
    width: 100%;
    border-radius: 0.2em;
    color: #000066;
    border: 1px solid lightgray;
}
.com-width-tn {
    display:inline-block;
    min-width:3.1em;
}
.com-width-tnn {
    min-width: 5em;
}
.com-width-md {
    min-width: 10em;
}
.com-width-mmd {
    min-width: 15em;
}
.com-width-lg {
    min-width: 20em;
}
.com-width-xlg {
    min-width: 25em;
}
.com-width-hlg {
    width: 50%;
}
.com-width-slg {
    width: 75%;
}
.com-width-xxlg {
    width: 98%;
}
.com-select {
    padding: 0.2em 0.2em 0.2em 0.2em;
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom: 1px solid lightgray;
    border-radius: 0.2em;
    font-size: 0.85em;
    color: #000066;
}
.button-link a:link, .button-link a:visited {
    text-decoration: none;
    color: #203061;
}
.button-link a:hover, .button-link a:active {
    text-decoration: underline;
    color: #573085;
}
.com-inbutton-md {
    margin: 0.2em;
    padding: 1em 0.5em 1em 0.5em;
    min-width: 6em;
    min-height: 1em;
    font-size: 1em;
    white-space: nowrap;
    display: inline-block;
    font-weight: bold;
    border: 0.1em solid lightgrey;
    border-radius: 0.2em;
    color: #203061;
    background-color: #d6eef2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#fff, #d6eef2);
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}
.com-inbutton {
    padding: 0.2em 1em 0.2em 1em;
    min-width: 5em;
    min-height: 2.1em;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    border: 0.1em solid lightgrey;
    border-radius: 0.2em;
    color: #203061;
    background-color: #d6eef2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#fff, #d6eef2);
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}
.com-button {
    padding: 0.45em 1em 0.45em 1em;
    min-width: 10em;
    min-height: 3em;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 0.1em solid lightgrey;
    border-radius: 0.5em;
    color: #203061;
    background-color: #d6eef2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#fff, #d6eef2);
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}
.com-button:hover, .com-inbutton:hover {
    background: #573085;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.com-button:active, .com-inbutton:active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}
.com-button:focus, .com-inbutton:focus {
    outline: 2px;
    background: darkgray;
    color: white;
}
.com-hr, .com-hr-wm {
    color: lightgray;
    height: 1px;
    border-width: 0;
    background-color: lightgray;
}
.com-hr {
    margin: 0.6em 0em 0.2em 0em;
}
.com-hr-wm {
    margin: 0;
}
#operations {
    clear: both;
    margin: 1em 0 1em 75px;
}
.error {
    color: red;
    padding: 0;
    margin-bottom: 0.2em;
    text-align: left;
}
.errors {
    display: inline-block;
    border: 0.08em solid red;
    border-radius: 0.2em;
    color: red;
    padding: 1em;
    margin-bottom: 1em;
    text-align: left;
}
.errors ul {
    margin-bottom: 0;
    padding-left: 1em;
}
#message {
    color: #3a56a2;
    background: white;
    border: 0.08em solid #573085;
    border-radius: 0.2em;
    padding: 1em;
    max-width: 800px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}
.el-message {
    background: #f5f5f5;
    border: 0.08em solid lightgray;
    border-radius: 0.2em;
    padding: 0.5em;
    margin: 0.5em;
}
.pagination {
    margin: 1em 0;
}
.pagination a, .pagination span {
    display: inline-block;
    margin: 0 5px;
}
.pagination span.selected {
    font-weight: bold;
    color: #000;
}
.com-styleform {
    background-color: #fcfcfc;
}
.divbord-top {
    border-top: 1px solid lightgray;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 0;
}
.div-dashboard {
    max-width: 900px;
}
.div-dashboard-lg {
    max-width: 1300px;
}
.div-dashboard-xlg {
    max-width: 1500px;
}
.div-dashboard-xxlg {
    max-width: 1700px;
}
.div-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.div-left {
    display: inline-block;
    text-align: left;
}
.div-right {
    display: inline-block;
    text-align: right;
}
.span-br {
    display: table;
}
.com-grid, .com-grid-smm, .com-grid-md, .com-grid-lg, .com-grid-xlg {
    display: grid;
    column-gap: 0.5em;
    row-gap: 0.5em;
}
.com-grid-smm {
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
}
.com-grid-sm {
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
}
.com-grid-md {
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
}
.com-grid-lg {
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
}
.com-grid-xlg {
    grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
}
.com-divnobord {
    display: inline-block;
    padding: 0;
}
.div-respsv {
    overflow-x:auto;
}
.com-fieldbox {
    display:inline-block;
    padding:0.2em 0.2em 0.2em 0.2em;
    border:0.08em solid lightgray;
    border-radius:0.2em;
}
.com-divbox {
    display: inline-block;
    padding: 0.5em;
    margin-bottom: 0.5em;
    border: 0.08em solid lightgray;
    border-radius: 0.2em;
}
.com-tablebox {
    display: table;
    border: 0.08em solid lightgray;
    border-radius: 0.2em;
    width: 100%;
}
.com-msgbox {
    background: white;
    border: 0.08em solid red;
    border-radius: 0.2em;
    padding: 1em 0;
    margin: 1em 0;
    max-width: 300em;
}
.com fieldset {
    display: inline-block;
    padding: 0.5em 0.5em 0em 0.5em;
    border: 0.08em solid lightgray;
    border-radius: 0.2em;
}
.lgspacetop {
    padding-top: 3.5em;
}
.mdspacetop {
    padding-top: 1.5em;
}
.tnspacetop {
    padding-top: 0.5em;
}
.lgspacebottom {
    padding-bottom: 1em;
}
.mdspacebottom {
    padding-bottom: 0.5em;
}
.com-spcright {
    padding-right: 1em;
}
.com-spcright-tn {
    padding-right: 0.5em;
}
.com-spcright-lg {
    padding-right: 2em;
}
.com-spcleft {
    padding-left: 1em;
}
.com-spcleft-tn {
    padding-left: 0.5em;
}
.com-spcleft-lg {
    padding-left: 2em;
}
.mg-spctop-tn {
    margin-top: 0.5em;
}
.ln-height-hlf {
    line-height: 1.5em;
}
.com-center {
    text-align: center;
}
.com-vtop {
    vertical-align: top;
}
.com-vbottom {
    vertical-align: bottom;
}
.rad {
    margin:0.2em 1em 0.2em 0em;
    padding:0;
    border-style:none;
}
.rad-inline-block {
    display: inline-block;
}
.com-example {
    color: grey;
    font-style: italic;
    font-size: 85%;
}
.com-explain {
    color: grey;
    font-size: 85%;
}
.com-info {
    font-size: 90%;
}
.com-nowrap {
    white-space: nowrap;
}
.el-inline-block {
    display: inline-block;
    padding: 0.3em;
    text-align: left;
}
.el-label-block {
    display: block;
}
.el-label, .el-labelb {
    font-weight: bold;
    cursor: default;
    line-height: 1.2em;
}
.el-labelb {
    font-size: 1.3em;
    line-height: 1.5em;
}
.el-label-med {
    font-size: 1em;
    font-style: italic;
}
.el-import {
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: 300;
}
.el-underline {
    text-decoration: underline;
}
.el-dunderline {
    text-decoration: underline;
    text-decoration-line: underline;
    text-decoration-style: double;
}
.el-text-right {
    text-align: right;
}
.el-text-left {
    text-align: left;
}
.el-text {
    color:#000066;
}
.el-lgtext {
    font-size:1.3em;
    color:#000066;
}
.el-strong {
    font-size: 1.3em;
    font-weight: bold;
    color: #573085;
}
.el-strong-red {
    font-size: 1.3em;
    font-weight: bold;
    color: red;
}
.el-em {
    font-style: italic;
}
.el-linethrough {
    text-decoration: line-through;
}
.com-red {
    color: red;
}
.com-green {
    color: green;
}
.com-gray {
    color: grey;
}
.com-back-yellow {
    background-color: yellow;
}
.com-highl-blue {
    background-color: blue;
    color: white;
}
dl {
    clear: both;
    overflow: hidden;
    margin: 0.5em 0;
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom: 1px solid lightgray;
    line-height: 1.2em;
}
dt {
    float: left;
    font-weight: bold;
    min-width: 7em;
}
dd {
    float: left;
    margin-left: 0.5em;
    color: #000066;
    word-break: break-all;
}
/* Create two equal columns that floats next to each other */
.com-twocolumns {
    float: left;
    width: 50%;
}
/* Create three equal columns that floats next to each other */
.com-threecolumns {
    float:left;
    width:33%;
}
/* Clear floats after the columns */
.com-row:after {
    content: "";
    display: table;
    clear: both;
}
/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 72em) {
    .com-threecolumns {
        width:50%;
    }
    .com-threecolumns:nth-child(3) {
        width:100%;
    }
    .com-hlg input[type="text"] {
        min-width: 25em;
    }
}
@media screen and (max-width: 50em) {
    .com-twocolumns {
        width: 100%;
    }
    .com-threecolumns {
        width:100%;
    }
    .com-hlg input[type="text"] {
        min-width: 30em;
    }
}
/* print */
@page {
    margin: 2cm;
}
.pg-before {
    page-break-before: always; /* Firefox */
    break-before: always;
}
dl, dt, dd {
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
}
/* table */
.freeze-header thead {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}
.dres {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 16px;
    width: 100%;
}
.dres tr:nth-child(even) {
    background-color: #d6eef2;
}
.dres tr:hover {
    color: black;
    background-color: #aedce3;
}
.dres th {
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    padding: 0.35em 0.35em;
    border-style: solid;
    border-width: 0.15em;
    border-color: white;
    border-radius: 0.5em;
    background-color: #87cad4;
}
#tblresid th {
    box-shadow: 0 5px 10px -5px #666;
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}
#selrowid:hover,
#tblresid th:hover {
    background-color: #d6eef2;
    color: white;
    cursor: pointer;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.dres td {
    font-size: 1em;
    line-height: 1.2;
    vertical-align: top;
    word-break: normal;
    padding: 0.35em 0.35em;
    border-style: solid;
    border-width: 0.15em;
    border-color: white;
    max-width: 15em;
    height: 1em;
}
.dres .dres-nowrap {
    white-space: nowrap;
}
.dres .dres-hideWord {
    overflow: hidden;
}
.dres .td-maxheight {
    max-height: 3.5em;
    overflow: hidden;
}
.dres .dres-name {
    min-width: 25em;
}
.dres .colsizesmall {
    max-width: 3.5em;
}
.dres .colsizemed {
    max-width: 5em;
}
.dres .colsize-min-md {
    min-width: 10em;
}
.dres a, .dres-a {
    text-decoration: underline;
}
.el-hidden {
    visibility: hidden;
}
.el-dis-none {
    display: none;
}
.dres-action {
    text-align: center;
}
.img-fit {
    max-width: 100%;
    height: auto;
}
.img-fit-y {
    width: auto;
    max-height: 160px;
}
img.el-icon {
    float: left;
    width: 20px;
    margin-right: 5px;
}
img.el-icons {
    position: relative;
    width: 20px;
    margin-right: 10px;
    top: 5px;
    left: 5px;
}
.dis-block-label, .dis-block-label-red {
    display: block;
    padding-bottom: 0.25em;
    font-weight: bold;
    cursor: default;
}
.dis-block-label-red {
    color: red;
}
.dis-breakw, .dis-multi-breakw {
    word-wrap: break-word
}
.dis-multi-breakw {
    white-space: pre-wrap;
}
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.staff-input-bckg {
    background-color: #f0ffff;
}
#gotop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99; /* not overlap */
    border: none;
    outline: none;
    background-color: #3a56a2;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 1.5em;
}
#gotop:hover {
    background-color: #573085;
}
::-ms-reveal { /* Hide password reveal button in MS Edge */
    display: none;
}
/* Dynamic dropdown menu */
.dropup {
    position: relative;
    display: inline-block;
}
.dropcont {
    display: none;
    position: absolute;
    background-color: #fcfcfc;
    min-width: 25em;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    z-index: 1;
}
.dropcont li {
    padding: 0.2em;
    display: block;
}
.dropcont a:hover {
    text-decoration: none;
    color: #573085;
}
.dropup:hover .dropcont {
    display: block;
}
.dropup:hover .droptrig {
    background-color: #573085;
    color: white;
    cursor: pointer;
}
.show {
    display: block;
}
.frame-full {
    margin: 0;
    display: block;
    height: 1030px;
    width: 800px;
    border: none;
    background-color: white;
}
.com-link {
    cursor: pointer;
    text-decoration: underline;
}
.phone-container {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  transition: box-shadow .2s, border-color .2s;
}

.phone-segment {
  border: none;
  outline: none;
  text-align: center;
  font-size: 16px;
  background: transparent;
  padding: 0;
  margin: 0;
}

.hyphen {
  user-select: none;
  pointer-events: none;
  color: #666;
  font-size: 16px;
  margin: 0 2px;
}

.phone-container:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 3px rgba(0,123,255,.5);
}

.phone-segment.selected-all {
  background-color: #cce5ff;
  color: #000;
}