@media print 
{   
    .myimages, .fixedBorder, .img_border, .page, body   
    {
        width: 50em !important;
        height: 48em !important; 
    }

    #left, #footer, #navigationmenu
    {
        display: none;
    }
    .ax-container
    {
        page-break-after: always;
    }
}

@media screen
{
    /* Imported from old site.css */
    body
    {
        background-color: LightGrey;
        font-size: .75em;
        font-family: Arial, Verdana, Helvetica, Sans-Serif;
        margin: 0;
        padding: 0;
    }
    
    img 
    {
        border:none 0px #ffffff;
    }
    a:link
    {
        color: #034af3;
        text-decoration: underline;
    }
    a:visited
    {
        color: #505abc;
    }
    a:hover
    {
        color: #1d60ff;
        text-decoration: none;
    }

    p, ul
    {
        margin-bottom: 20px;
        line-height: 1.2em;
    }
    
     /* HEADINGS   
    ----------------------------------------------------------*/
    h1, h2, h3, h4, h5, h6
    {
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    h1
    {
        font-size: 2em;
    }
    h2
    {
        font-size: 1.5em;
    }
    h3
    {
        font-size: 1.2em;
    }
    h4
    {
        font-size: 1.1em;
    }
    h5, h6
    {
        font-size: 1em;
    }

    /* this rule styles <h2> tags that are the 
    first child of the left and right table columns */
    .rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
    {
        margin-top: 0;
    }

    /* PRIMARY LAYOUT ELEMENTS   
    ----------------------------------------------------------*/
    #header
    {
        margin: 0px;
        color: #000;
        padding: 0;
    }

    #header h1
    {
        font-weight: bold;
        padding: 5px 0;
        margin: 0;
        color: #fff;
        border: none;
        line-height: 2em;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 32px !important;
    }

    #footer {
        color: #000;
        padding: 0.625em 0;
        text-align: center;
        line-height: normal;
        font-size: .9em;
        /*width: 90em;*/
    }

    /* TAB MENU   
    ----------------------------------------------------------*/
    ul#menu
    {
        border-bottom: 1px #5C87B2 solid;
        padding: 0 0 2px;
        position: relative;
        margin: 0;
        text-align: right;
    }

    ul#menu li
    {
        display: inline;
        list-style: none;
    }

    ul#menu li#greeting
    {
        padding: 10px 20px;
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        color: #fff;
    }

    ul#menu li a
    {
        padding: 10px 20px;
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        background-color: #e8eef4;
        color: #034af3;
    }

    ul#menu li a:hover
    {
        background-color: #fff;
        text-decoration: none;
    }

    ul#menu li a:active
    {
        background-color: #a6e2a6;
        text-decoration: none;
    }

    ul#menu li.selected a
    {
        background-color: #fff;
        color: #000;
    }
    
    /* MISC  
    ----------------------------------------------------------*/
    .clear
    {
        clear: both;
    }

    .error
    {
        color:Red;
    }

    #title
    {
        display:block;
        float:right;
        text-align:left;
    }

    #logindisplay
    {
        font-size:1.1em;
        display:block;
        text-align:right;
        margin:10px;
        color:White;
    }

    #logindisplay a:link
    {
        color: white;
        text-decoration: underline;
    }

    #logindisplay a:visited
    {
        color: white;
        text-decoration: underline;
    }

    .field-validation-error
    {
        color: #ff0000;
    }

    .input-validation-error
    {
        border: 1px solid #ff0000;
        background-color: #ffeeee;
    }

    .validation-summary-errors
    {
        font-weight: bold;
        color: #ff0000;
    }

    #main
    {
	    background-color: #fff;
	    z-index: 10000;
    }

    /* Home View 
    =======================================================*/
    #homediv {
        background-color: #fff;
        z-index: 10000;
        /*height: 56.5em;
	    width: 81em;*/
        margin: 0 auto;
    }

    #homemain
    {
	    height: 25em;
    }

    .homeitem
    {
        padding:20px;   
    }
    
    #leftpanel
    {
        width: 49em;
        float: left;
        padding: 1em;
    }

    #login
    {
        margin-bottom: 4em;
    }
    #signup
    {
	    height: 9em;
    }
    
    /*Approved
    =======================================================*/
    #approved {
        background-color: #fff;
        width: 100%;
       
    }
    
    #approvedcontent
    {
    	margin: 3em;
    }

    /*Register
    =======================================================*/
    #AddAccount
    {
	    background-color: #fff;
	    width: 100%;
    }

    .icons
    {
	    margin-right: .5em;
    }

    .divider
    {
        border-top: dashed 3px #666666;
        height:3px;
    }

	#mask {
	  position:absolute;
	  left:0;
	  top:0;
	  z-index:9000;
	  background-color:#000;
	  display:none;
	}
	  
	#boxes .window {
	  position:fixed;
	  left:0;
	  top:0;
	  width:440px;
	  height:200px;
	  display:none;
	  z-index:9999;
	  padding:20px;
	}
	
	#boxes #tos {
	  background-color:#ffffff;
	  width:326px; 
	  height:360px;
	  padding:50px 0 20px 25px;
	}
	
	/*Password Strength*/
	#password_strength
	{
		height:20px;
		display:block;
		color: White;
	}

	#password_strength_border
	{
		width: 144px;
		height: 20px;
		border: 1px solid black;
		display:none;
	}
	.strength0
	{
		width:144px;
		background:#cccccc;
	}

	.strength1
	{
		width:36px;
		background:#ff0000;
	}

	.strength2
	{
		width:72px;	
		background:#ff5f5f;
	}

	.strength3
	{
		width:108px;
		background:#ff8f8f;
	}

	.strength4
	{
		background:#4dcd00;
		width:144px;
	}

    #site_logo
    {
        background-repeat: no-repeat;
        width:175px;
        height: 100px;
        margin: 0 auto;
    }
    
    /*==========================================================
                      Document Listing View
    ==========================================================*/
    #documentView {
        color: #fff;
        min-height: 20em;
        height: auto;
        z-index: 20000;
        margin:10px;
        padding: 5px 15px 5px 15px;
        width:100%;
    }

    #imageView {
        text-align: left;
        max-width: 100%;
        max-height: 64em;
        border-bottom: 5px;
        padding-bottom: 5px;
    }

    .documentImage {
        border: 1px black solid;
        max-width: 100%;
        max-height: 100%;
    }

    #selectedDocument {
        font-size: medium;
        -webkit-border-radius: 8px 8px 8px 8px;
	    -moz-border-radius: 8px 8px 8px 8px;
	    border-radius: 8px 8px 8px 8px;
        padding: 5px 25px 5px;
    }

    .listItem
    {
	    height: 2em;
	    color: Black;
	    cursor: pointer;
    }

    .selectedItem
    {
	    width: 20em;
	    height: 2em;
	    color: Black;
	    cursor: pointer;
	    background-color: Yellow;
    }

    .hometxt
    {
        text-align:left;
        font-size:2.75em;
        color:#5C87B2;
        font-weight:bold;
    }

    /**********************************************/
    /*              Document Paging               */
    /**********************************************/
    #documentPager 
    {
	    height: 35px;
	    width: 350px;
        margin: 0 auto;
        margin-top: 5px;
	    margin-bottom: 5px;
    }

    #txt_selectedPage
    {
	    float: left;
	    width: 50px;
	    height: 28px;
	    margin-right: 10px;
	    margin-left: 10px;
	    font-size: large;
    }

    span.pager {
	    background:url(../Content/Paging/hori_large.png) no-repeat;
	    width:30px;
	    height:30px;
	    cursor:pointer;
	    font-size:1px;
	    display:block;
	    float: left;
    }

    /* right */
    span.rightpager				{ z-index: 1000px; background-position: 0 -30px; clear:right; margin-right: 0px;}
    span.rightpager:hover 		{ background-position:-30px -30px; }
    span.rightpager:active 	{ background-position:-60px -30px; } 

    /* left */
    span.leftpager				{ margin-left: 0px; z-index: 1000px;} 
    span.leftpager:hover  		{ background-position:-30px 0; }
    span.leftpager:active  	{ background-position:-60px 0; }
    /* Tables */
    td
    {
        padding: 0.375em 0.5em;
        vertical-align:top;
    }

    tr.alt td 
    {
         background: #ecf6fc;
    }

    tr.over.td 
    {
         background: #bcd4ec;
    }
    
    .downloadDocument
    {
        cursor:pointer;   
    }
    
    a.aImageText
    {
        text-decoration:none;
        font-weight:bold;
        font-size:15px;
        color:Black;
    }

    a.aImageText :hover {
        cursor: pointer;
    }
    
    img.aImage
    {
        padding: 5px;
        vertical-align:middle;
    }
    
    .hide
    {
        display:none;
    }
}

.clientlogo{
    height: 45px;
    width: auto;
}

#header {
    width: 100%;
}
.regtxt {
    /*max-width: 500px;*/ /* match your table width */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
#headerMenuNavUl a {
    font-size: 16px !important;
    line-height: 16px !important;
    /*padding-top: 9px !important;
    padding-bottom: 9px !important;*/
}
.nav-link {
    color: #777 !important;

}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}
#header {
    clear: both;
    position: relative;
    z-index: 100;
    padding-bottom: 0px;
    background-color: #ffffff;
    border-bottom: solid 1px #b0bfbc;
    
}

#header {
    position: sticky;
    top: 0;
    z-index: 1030;
}
#footer {
    background: #f8f9fa;
}

    #footer > * {
        max-width: 1200px;
        margin: 0 auto;
    }

/* Full-width section */
.home-wrapper {
    width: 100%;
}

/* Centered content */
.home-inner {
    display: flex;
    gap: 2rem; /* space between left and right panels */
    flex-wrap: wrap; /* allows responsiveness */
    justify-content: space-between; /* spreads panels on desktop */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .home-inner {
        flex-direction: column;
    }

    #leftpanel,
    #rightpanel {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.approved-wrapper {
    width: 100%;
}

.approved-inner {
    max-width: 1200px;
    margin: 0 auto; /* centers horizontally */
    padding: 1rem;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .approved-inner table {
        width: 100%;
    }
    .approved-inner td {
        display: block;
        width: 100%;
    }
}
label {
    display: inline !important;
}
/* Center the table */
.table-container {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-x: auto; /* mobile safety */
}

/* Desktop table width */
.approved-table {
    
    max-width: 100%;
    border-collapse: collapse;
}

/* Left column fixed width */
.left-col {
    width: 350px;
}

/* Mobile layout: stack rows */
@media (max-width: 768px) {
    .approved-table,
    .approved-table tbody,
    .approved-table tr,
    .approved-table td {
        display: block;
        width: 100%;
    }

    .left-col,
    .right-col {
        width: 100%;
    }

    .left-col {
        margin-bottom: 20px;
    }

    td {
        text-align: center;
    }
}

.homeitem {
    width: 100%;
    margin: 0;
}
#homemain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

#headerLogo {
    max-height: 60px;
}

#processingModal {
    z-index:2000;
}

.rule {
    margin-bottom: 5px;
    transition: 0.3s;
}

.valid {
    color: green;
}

    .valid .icon {
        content: "✔";
    }

.invalid {
    color: red;
}

#strengthBarContainer {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 4px;
    margin-top: 10px;
}

#strengthBar {
    height: 6px;
    width: 0%;
    border-radius: 4px;
    transition: 0.3s;
}

.clientTheme {
    background-color: var(--primary-hex-color, #002e6d) !important;
    color: var(--alternate-hex-color, #ffffff) !important;
}

thead tr.clientTheme th {
    background-color: var(--primary-hex-color, #002e6d) !important;
    color: var(--alternate-hex-color, #ffffff) !important;
}

.clientPaginationTheme.btn {
    background-color: var(--pagination-color) !important;
}

.clientPaginationTheme.btn:hover {
    background-color: var(--pagination-color) !important;
    color: var(--bs-dark) !important;
}

.btn {
    border-radius: 8px 0px 8px 0px !important;
}