/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');*/

* {
    /*font-family: 'Open Sans', sans-serif;
    font-size: 16px;*/
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
    position: relative;
    top: .2em;
    opacity: .35;
}

.blue-icon {
    color: #20304D;
}

.link {
    cursor: pointer;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

main {
    /*display: flex;
    flex-wrap: nowrap;
    height: 100vh;
    height: -webkit-fill-available;
    max-height: 100vh;
    overflow: auto;*/
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.25rem;
}

table {
    border-collapse: collapse;
}

.link {
    color: #003399;
}

::-webkit-input-placeholder {
    opacity: .25;
}

:-ms-input-placeholder {
    opacity: .25;
}

::placeholder {
    opacity: .25;
}

input {
    text-align: left;
}

.bold {
    font-weight: bold;
}

#NullDiv {
    display: none;
}
.clear {
    clear: both;
}

/*
##          #######    ######    ####  ##    ##
##         ##     ##  ##    ##    ##   ###   ##
##         ##     ##  ##          ##   ####  ##
##         ##     ##  ##   ####   ##   ## ## ##
##         ##     ##  ##    ##    ##   ##  ####
##         ##     ##  ##    ##    ##   ##   ###
########    #######    ######    ####  ##    ##
*/

#login_container {
    height: 100vh;
}

#login_container .inner {

}

.login-radial-gradient {
    background-color: hsl(218, 41%, 15%);
    background-image: radial-gradient(650px circle at 0% 0%, hsl(218, 41%, 35%) 15%, hsl(218, 41%, 30%) 35%, hsl(218, 41%, 20%) 75%, hsl(218, 41%, 19%) 80%, transparent 100%), radial-gradient(1250px circle at 100% 100%, hsl(218, 41%, 45%) 15%, hsl(218, 41%, 30%) 35%, hsl(218, 41%, 20%) 75%, hsl(218, 41%, 19%) 80%, transparent 100%);
}

#radius-shape-1 {
    height: 220px;
    width: 220px;
    top: -60px;
    left: -130px;
    background: radial-gradient(#4466A2, #172236);
    overflow: hidden;
}

#radius-shape-2 {
    border-radius: 38% 62% 63% 37% / 70% 33% 67% 30%;
    bottom: -60px;
    right: -110px;
    width: 300px;
    height: 300px;
    background: radial-gradient(#4466A2, #172236);
    overflow: hidden;
}

.bg-glass {
    background-color: hsla(0, 0%, 100%, 0.9) !important;
    backdrop-filter: saturate(200%) blur(25px);
}

#LoginMsg {
    color: #C36728;
}

/*
########   ########   ########   ##     ##   ######
   ##      ##         ##     ##  ###   ###  ##    ##
   ##      ##         ##     ##  #### ####  ##
   ##      ######     ########   ## ### ##   ######
   ##      ##         ##   ##    ##     ##        ##
   ##      ##         ##    ##   ##     ##  ##    ##
   ##      ########   ##     ##  ##     ##   ######
*/

#UserTerms {
    max-width: 800px;
}

#UserTerms .title {
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 2rem 0;
}

#UserTerms p {
    margin: 0 0 2rem 0;
}

/*
 ######    ####  ########   ########   ########      ###     ########
##    ##    ##   ##     ##  ##         ##     ##    ## ##    ##     ##
##          ##   ##     ##  ##         ##     ##   ##   ##   ##     ##
 ######     ##   ##     ##  ######     ########   ##     ##  ########
      ##    ##   ##     ##  ##         ##     ##  #########  ##   ##
##    ##    ##   ##     ##  ##         ##     ##  ##     ##  ##    ##
 ######    ####  ########   ########   ########   ##     ##  ##     ##
*/

#Sidebar {
    /*position: fixed;*/
    height: 100Vh;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: #343A40;
}

#Sidebar .sidebar-nav {
    height: 100vh;
    background-color: #343A40;
}

#Sidebar .logo {
    background-color: #212529;
    padding: 1rem;
}

#Sidebar .logo .image {
    display: none;
}

#Sidebar .logo .text {
    width: 150px;
}

#Sidebar .nav {
    flex-grow: 1;
}

#Sidebar .nav-item {
    line-height: 250%;
    cursor: pointer;
}

#Sidebar .nav-link {
    color: #fff;
    padding: .5rem 1rem .5rem 1rem;
    /*white-space: nowrap;*/
}

#Sidebar .nav-link.active {
    color: #fff;
    background-color: #757f6c;
}

#Sidebar .footer {
    padding: 1rem;
    background-color: #212529;
}

#Sidebar .footer .username {
    color: #fff;
}

#Sidebar .footer .logout {
    /*text-align: right;*/
}

#Sidebar .footer .logout .icon {
    color: #fff;
    font-size: 24px;
}

#Sidebar .footer .logout .text {
    color: #fff;
}

#Sidebar .footer .logout a {
    color: #fff;
    text-decoration: none;
}

/*
########      ###      ######    ##     ##  ########    #######      ###     ########   ########
##     ##    ## ##    ##    ##   ##     ##  ##     ##  ##     ##    ## ##    ##     ##  ##     ##
##     ##   ##   ##   ##         ##     ##  ##     ##  ##     ##   ##   ##   ##     ##  ##     ##
##     ##  ##     ##   ######    #########  ########   ##     ##  ##     ##  ########   ##     ##
##     ##  #########        ##   ##     ##  ##     ##  ##     ##  #########  ##   ##    ##     ##
##     ##  ##     ##  ##    ##   ##     ##  ##     ##  ##     ##  ##     ##  ##    ##   ##     ##
########   ##     ##   ######    ##     ##  ########    #######   ##     ##  ##     ##  ########
*/

#Dashboard {
    display: flex;
    gap: 1rem;
}

#Dashboard .tile {
    border: 1px solid #ccc;
    background-color: #F2F2F2;
    padding: 2rem;
    margin: 0 0 1rem 0;
    width: 100%;
    max-width: 800px;
}

#Dashboard .tile.active {
    background-color: #e9f0df;
}

#Dashboard .tile.inactive {
    /*opacity: .5;*/
}

#Dashboard .tile .title {
    font-weight: bold;
    margin: 0 0 1rem 0;
}

#Dashboard .tile .desc {
    margin: 0;
}

#Dashboard #Instructions {
    flex: 1;
    cursor: pointer;
}

#Dashboard #Items {
    flex: 1;
}

#Dashboard #Items .item {
    /*width: 370px;*/
}

#Dashboard .title-link {
    text-decoration: none;
    color: #333;
}

#Dashboard ul {
    margin: 1rem 0 0 0;
}

#Dashboard ul li {
    margin: 0 0 1.5rem 0;
    line-height: 1.5rem;
}

/*
########   ########    ######    ##     ##  ##         ########    ######
##     ##  ##         ##    ##   ##     ##  ##            ##      ##    ##
##     ##  ##         ##         ##     ##  ##            ##      ##
########   ######      ######    ##     ##  ##            ##       ######
##   ##    ##               ##   ##     ##  ##            ##            ##
##    ##   ##         ##    ##   ##     ##  ##            ##      ##    ##
##     ##  ########    ######     #######   ########      ##       ######
*/

/*#ResultsDiv {
    flex: 1;
    color: #333;
}

#ResultsContainer {
    height: 100Vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}*/

#ResultsContainer {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#ResultsDiv {
    height: 100vh;
    flex: 1;
    color: #333;
    display: flex;
    flex-direction: column;
}

#Main {
    padding: 2rem;
}

/*
########      ###     ########   ##         ########    ######
   ##        ## ##    ##     ##  ##         ##         ##    ##
   ##       ##   ##   ##     ##  ##         ##         ##
   ##      ##     ##  ########   ##         ######      ######
   ##      #########  ##     ##  ##         ##               ##
   ##      ##     ##  ##     ##  ##         ##         ##    ##
   ##      ##     ##  ########   ########   ########    ######
*/

.data_table {
    /*display: block;*/
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    /*table-layout: fixed;*/
}

.data_table thead {
    font-weight: bold;
}

.data_table th, .data_table td {
    border: 1px solid #ccc;
    text-align: left;
    padding: .5rem;
}

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

/*
########    #######   ########   ##     ##   ######
##         ##     ##  ##     ##  ###   ###  ##    ##
##         ##     ##  ##     ##  #### ####  ##
######     ##     ##  ########   ## ### ##   ######
##         ##     ##  ##   ##    ##     ##        ##
##         ##     ##  ##    ##   ##     ##  ##    ##
##          #######   ##     ##  ##     ##   ######
*/

.form {
    margin: 0 0 4em 0;
    border: 0px dashed red;
}

.form .grid {
    display: grid;
    grid-gap: 0px 30px;
    grid-template-columns: repeat(auto-fill, minmax(500px, 500px));
    grid-template-rows: masonry;
    border: 0px dotted red;
    margin: 0 0 4rem 0;
}

.form .table_container {

}

.form .section_title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 1rem 0;
    min-height: 2rem;
}

.form table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border: 0px dotted red;
}

.form table td {
    border: 0px dotted red;
}

.form .left_col_label {
    width: 130px;
    padding: 0 8px 0 0;
    white-space: nowrap;
    text-align: left;
}

.form .inline_label {
    margin: 0 .25em;
}

.form hr {
    opacity: .15;
    max-width: 1100px;
}

.form .table_container {
    block-size; 50%;
}

.form td {
    padding: .25rem 0;
}

.form input, textarea {
    padding: .25rem;
    border: 1px solid #ccc;
    border-width: 1px;
}

.form select {
    padding: .25rem;
    border: 1px solid #ccc;
    border-width: 1px;
}

.form hr {
    margin: 2em 0;
}

/*
########   ##     ##  ########   ########    #######   ##    ##
##     ##  ##     ##     ##         ##      ##     ##  ###   ##
##     ##  ##     ##     ##         ##      ##     ##  ####  ##
########   ##     ##     ##         ##      ##     ##  ## ## ##
##     ##  ##     ##     ##         ##      ##     ##  ##  ####
##     ##  ##     ##     ##         ##      ##     ##  ##   ###
########    #######      ##         ##       #######   ##    ##
*/

#ButtonBar {
    display: flex;
    background-color: #fff;
    z-index: 1000;
    position: sticky;
    bottom: 0;
    gap: 1px;
}

#ButtonBar .button {
    flex: 1;
    background-color: #657E5C;
    color: #FFF;
    padding: .25rem 1rem;
    cursor: pointer;
    text-align: center;
    line-height: 2em;
    white-space: nowrap;
}

#ButtonBar .spacer {
    /*width: 1px;*/
}

#ButtonBar .button:hover {
    background-color: #4B5B45;
    transition: background-color .5s ease-in;
}

.application_button {
    background-color: #0D6EFD;
    border: 1px solid #0D6EFD;
    color: #FFF;
    padding: .5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.submit_button {
    background-color: #809b69;
    border: 1px solid #809b69;
    color: #FFF;
    padding: .5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.dashboard_select {
    padding: .5rem 1rem;
}

.dashboard_button:hover {
    background-color: #115ac4;
    transition: background-color .5s ease-in;
}

.data_table .button_td {
    padding: 0;
    height: 100%;
    max-width: 160px;
}

.data_table .button_td .button_container {
    display: flex;
    gap: 1px;
    height: 100%;
    width: 100%;
    border: 0px dotted red;
    padding: 0;
    margin: 0;
}

.data_table .button_td .button {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: inherit;
    align-items: center;
    justify-content: center;
    background-color: #0D6EFD;
    color: #FFF;
    padding: .5rem 1rem;
    margin: 0;
    cursor: pointer;
    text-align: center;
    /*min-width: 5rem;*/
}

.dashboard_link {
    cursor: pointer;
    color: #003399;
    margin: .25rem 0 0 0;
}

.dashboard_link:hover {
    color: #000;
}

/*
########   ####     ###     ##          #######    ######
##     ##   ##     ## ##    ##         ##     ##  ##    ##
##     ##   ##    ##   ##   ##         ##     ##  ##
##     ##   ##   ##     ##  ##         ##     ##  ##   ####
##     ##   ##   #########  ##         ##     ##  ##    ##
##     ##   ##   ##     ##  ##         ##     ##  ##    ##
########   ####  ##     ##  ########    #######    ######
*/

#DialogDiv {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

#DialogDiv #dialog_container {
  position: fixed;
  max-width: 600px;
  min-width: 400px;
  top: 50%;
  left: 50%;
  z-index: 1001;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 3px 3px 6px grey;
  z-index: 1001;
}

/* header style for all dialogs */

#DialogDiv #dialog_header {
    background-color: #fff;
    font-weight: bold;
    border: 1px solid #FFF;
    border-width: 1px 1px 0 1px;
    padding: 1rem 1rem 0 1rem;
    z-index: 1001;
}

/* content style for all dialogs */

#DialogDiv #dialog_content {
    background-color: #fff;
    font-weight: normal;
    padding: 1rem;
    z-index: 1001;
}

#DialogDiv #dialog_content .buttons {
    width: 100%;
    border: 0px dotted cyan;
    padding: 1rem 0 0 0;
    text-align: right;
}

#DialogDiv #dialog_content .buttons a {
    position: relative;
    top: 0px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin: 0px 1px 0px 0px;
    outline: none;
    font-size: 90%;
    text-decoration: none;
    font-weight: normal;
    color: #fff;
    cursor: pointer;
    padding: .5rem 1rem;
    min-width: 6rem;
    line-height: 1.75rem;
    z-index: 1000;
}

#DialogDiv #dialog_content .buttons a {
    background-color: #0D6EFD;
}

#DialogDiv #dialog_content .buttons a:hover {
    background-color: #115ac4;
    transition: background-color .5s ease-in;
}

#DialogDiv #dialog_content .buttons a.green {
    background-color: #819972;;
}

#DialogDiv #dialog_content .buttons a.green:hover {
    background-color: #819972;;
}

#DialogDiv #dialog_content .buttons a.red {
    background-color: #d9534f;;
}

#DialogDiv #dialog_content .buttons a.red:hover {
    background-color: #d9534f;;
}

#DialogDiv #dialog_content .msg {
    margin: 0 1em 1em 1em;
    line-height: 1.5;
    font-size: 110%;
}

/*
########    ######    ########
##     ##  ##    ##   ##     ##
##     ##  ##         ##     ##
########   ##   ####  ########
##         ##    ##   ##
##         ##    ##   ##
##          ######    ##
*/

.pgp_popup {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    height: 100vh;
    widgh: 100vw;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1000;
}

.pgp_popup .pgp_container {
    position: fixed;
    background-color: #FFF;
    top: 50%;
    left: 50%;
    z-index: 1001;
    transform: translate(-50%, -50%);
    border: 1px solid #CCC;
    box-shadow: 3px 3px 6px #CCC;
    z-index: 1001;
    height: auto;
    max-height: 90vh;
}

.pgp_popup .pgp_header {
    font-weight: bold;
    border-width: 1px 1px 0 1px;
    padding: 1rem 1rem 0 1rem;
    z-index: 1001;
}

.pgp_popup .pgp_content {
    font-weight: normal;
    width: 100%;
    padding: 1rem;
    z-index: 1001;
    height: auto;
}

.pgp_popup .pgp_content table td {
    padding: .5rem;
    border: 1px solid #ccc;
}

.pgp_popup .pgp_content table .label {
    font-weight: normal;
    text-align: right;
    background-color: #809B69;
    color: #fff;
}

.pgp_popup .pgp_content table .data {
    font-weight: normal;
    text-align: left;
    background-color: #E9F0DF;
}

.pgp_popup .pgp_footer {
    font-weight: normal;
    width: 100%;
    padding: 0 1rem 1rem 1rem;
    z-index: 1001;
    height: auto;
}

.pgp_popup textarea {
    background-color: #fafff3;
    overflow: auto;
    width: 100%;
    padding: 1rem;
    font-size: 13px;
}

.pgp_popup .buttons {
    width: 100%;
    border: 0px dotted cyan;
    padding: 1rem 0 0 0;
    text-align: right;
}

.pgp_popup .buttons a {
    position: relative;
    top: 0px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin: 0px 1px 0px 0px;
    outline: none;
    font-size: 90%;
    text-decoration: none;
    font-weight: normal;
    background-color: #0D6EFD;
    color: #fff;
    cursor: pointer;
    padding: .5rem 1rem;
    min-width: 6rem;
    line-height: 1.75rem;
    z-index: 1000;
}

.pgp_popup .buttons a:hover {
    color: #fff;
}

/*
##     ##     ###      ######    ##    ##
###   ###    ## ##    ##    ##   ##   ##
#### ####   ##   ##   ##         ##  ##
## ### ##  ##     ##   ######    #####
##     ##  #########        ##   ##  ##
##     ##  ##     ##  ##    ##   ##   ##
##     ##  ##     ##   ######    ##    ##
*/

#LoaderMask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    border: 0px dotted red;
    /*background: rgba(0, 0, 0, 0.05);*/
}

#LoaderMask #Notice {
    display: none;
    position: fixed;
    top: 54.0%;
    left: 49.0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1000;
}

#LoaderMask #LoaderAnimation {
    position: fixed;
    top: 49.0%;
    left: 48.0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 3px solid #CCC;
    border-radius: 50%;
    border-top: 3px solid #3E5285;
    width: 50px;
    height: 50px;
    animation: spinner 1.25s linear infinite;
    z-index: 1000;
}

@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
 ######    ####   ######    ##    ##      ###     ########   ##     ##  ########   ########
##    ##    ##   ##    ##   ###   ##     ## ##       ##      ##     ##  ##     ##  ##
##          ##   ##         ####  ##    ##   ##      ##      ##     ##  ##     ##  ##
 ######     ##   ##   ####  ## ## ##   ##     ##     ##      ##     ##  ########   ######
      ##    ##   ##    ##   ##  ####   #########     ##      ##     ##  ##   ##    ##
##    ##    ##   ##    ##   ##   ###   ##     ##     ##      ##     ##  ##    ##   ##
 ######    ####   ######    ##    ##   ##     ##     ##       #######   ##     ##  ########
*/

#SignatureContainer {
    display: none;
    position: fixed;
    width: 90%;
    max-width: 1500px;
    padding: .5rem;
    top: 50%;
    left: 50%;
    background-color: #ffffff;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 3px 3px 6px grey;
    z-index: 1001;
}

#SignatureContainer #SignHere {
    margin: 0;
    padding: 0;
}

#SignatureContainer #SignatureCanvas {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    margin: .5rem 0 0 0;
    padding: 0rem;
}

#SignatureContainer #SignatureCanvas .jSignature {
    margin: 0;
    padding: 0;
    max-height: 240px;
}

#SignatureContainer #SignatureCanvas .guideline {
    display: none;
    position: absolute;
    bottom: 200px;
    width: 98%;
    border-bottom: 1px solid #ccc;
    margin: 0rem;
    padding: 0rem;
    z-index: 1000;
}

#SignatureLowerContainer {
    display: flex;
    margin: .5rem 0 0 0;
}

#SignatureContainer #SignatureTextInput {
    flex: 1;
    display: flex;
}

#SignatureContainer #SignatureTextInput input {
    flex: 1;
    background-color: #f2f2f2;
    color: #000;
    padding: .25rem 1rem;
    border: 1px solid #ccc;
    outline: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    line-height: 2em;
}

#SignatureContainer #SignatureTextInput input::placeholder {
    color: #999;
    opacity: 1.0;
}

#SignatureContainer #SignatureTextInput input:focus::placeholder {
  color: transparent;
}

#SignatureContainer #SignatureButtons {
    flex: 3;
    display: flex;
    flex-wrap: wrap;
    background-color: transparent;
}

#SignatureContainer #SignatureButtons .button {
    flex: 1;
    background-color: #0D6EFD;
    color: #FFF;
    padding: .25rem .25rem;
    margin: 0;
    cursor: pointer;
    text-align: center;
    line-height: 2em;
    white-space: nowrap;
}

#SignatureContainer #SignatureButtons .spacer {
    width: 1px;
}

#SignatureContainer #SignatureButtons .button:hover {
    background-color: #115ac4;
    transition: background-color .5s ease-in;
}

#SignatureContainer #SignatureButtons .button span {
    color: #ccc;
}

/*
 #######   ########      ###
##     ##  ##           ## ##
       ##  ##          ##   ##
 #######   ######     ##     ##
##         ##         #########
##         ##         ##     ##
#########  ##         ##     ##
*/

#TwoFactor #LoginButton {
    display: none;
}

#ButtonSpinner {
    display: none;
    width: 1rem;
    height: 1rem;
    opacity: .75;
}

#TwoFactor #TwoFactorCode {
    font-size: 16pt;
    text-align: center;
}