::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*, html, body {
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}
body.index {
    background-color: #d6d6d6;
}

img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    pointer-events: none;       /*  to prevent downloading of image */
}

#myProgress {
  width: 100%;
  background-color: #f0f0f0; /* Background of the bar */
  height: 30px;
  border-radius: 5px;
}

#myBar {
  width: 0%; /* Initial width */
  height: 100%;
  background-color: #4CAF50; /* Color of the progress */
  border-radius: 5px;
  transition: width 0.3s ease; /* Smooth animation */
}

a {
    font-weight: bold;
}

a.attachment {
    color: #333;
    font-weight: normal;
}

a.attachment:visited {
    color: #626567;
}

.columns {
    width: 100%;
    margin-top: 0px;
    display: flex;
    justify-content: center; /* or other values */
}
.leftpane, .rightpane {
    /*min-width: 300px; */
    padding: 15px;
    padding-top: 60px;
}
.centerpane {
    width:60%;
    min-width: 800px;
}
.mynavbar {
    overflow: hidden;
    background-color: #333;
}

.mynavbar a {
    float: left;
    font-size: 14px;
    color: #FFBF00;
    text-align: center;
    padding: 10px 14px;
    text-decoration: none;
}

.mydropdown {
    float: left;
    overflow: hidden;
}

.mydropdown_user {
    float: right;
    overflow: hidden;
    width: 180px;
    text-align: right;
}

.mydropdown .dropbtn, .mydropdown_user .dropbtn, button.dropbtn {
    font-size: 14px;  
    border: none;
    outline: none;
    color: #FFBF00;
    padding: 10px 14px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.mynavbar a:hover, .mydropdown:hover .dropbtn, .mydropdown_user:hover .dropbtn {
    background-color: #FFBF00;
    color: #333;
}

.mydropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
}

.mydropdown-content a {
    float: none;
    color: black;
    padding: 10px 14px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.mydropdown-content a:hover {
    background-color: #ddd;
}

.mydropdown:hover .mydropdown-content, .mydropdown_user:hover .mydropdown-content {
    display: block;
}

form {
    margin: 0px;
}

input[type=submit].btnlink {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    float: none;
    color: black;
    text-decoration: none;
    text-align: left;
    display: block;
    font-size: 14px;
    font-weight: bold;
    background-color: #f9f9f9;
    margin: 0;
    padding: 12px 14px;
}
input[type=submit].btnlink:hover {
    background-color: #ddd;
}

.att2printlist {
    background-color: yellow;;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;

}
.pdfimgprint {
	background: url(images/print-icon.png) no-repeat;
	height: 12px;
	width: 12px;
	border:none;
}
.user_menu {
    float: right;
    text-decoration: none;
}
.user_menu a {
    float: right;
    color: #ddd; 
    text-align: center;
    padding: 10px 14px;
    text-decoration: none;
    font-size: 14px;
    width: 150px;
}
.top_bar {
    width: 100%;
    margin: 0 auto;
    /*min-width: 900px; */
}
.top_container {
    width: 100%;
}
.paf_page {
    margin: 30px auto 0 auto;
    width: 96%;
    height: 1075px; /* 3,478px; */
}
table.paftable {
    border: 1px solid black;
    border-collapse: collapse;
    margin: 0 auto; /* or margin: 0 auto 0 auto */
    width: 100%;
    margin-bottom: 18px;
}
table {
    border: 1px solid black;
    border-collapse: collapse;
    margin: 0 auto; /* or margin: 0 auto 0 auto */
    width: 100%;
}
td {
    border: 1px solid black;
    border-collapse: collapse;
    vertical-align: top;
    width: 8.33%;
    max-width: 8.33%;
    padding: 3px 5px;
}
td.attachments {
    border: none;
}
td.upload {
    border: 1px solid black;
    border-collapse: collapse;
    vertical-align: top;
    width: 8.33%;
    max-width: 8.33%;
    padding: 3px 5px;
    text-align: center;
}
tr {
    height: 30px;
}
input[type=button], input[type=submit], input[type=reset] {
    padding: 5px 20px;
    cursor: pointer;
    margin-top: 10px;
    
}
input[type=text].hoverable {
    width: 60%;
    border: none;
    outline: none;
    text-decoration: none;
    border: 1px solid #fff;
}
input[type=text].hoverable1 {
    width: 60%;
    border: none;
    outline: none;
    text-decoration: none;
    border: 1px solid lightgray;
}
input[type=file].esign {
    display: none;
}
input[type=text].idate {
    width: 120px;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
}
input[type=text].hoverable:hover, input[type=text].hoverable1:hover, textarea.hoverable:hover {
    border: 1px solid black;
}
.border_gray {
    border: 1px solid lightgray;
}
.border_white {
    border: 1px solid red;
}
/*input[type=date] {
    border-bottom: 1px solid black;
}*/
textarea.hoverable {
    width: 99%;
    height: 45px;
    border: none;
    outline: none;
    text-decoration: none;
    border: 1px solid #fff;
}
label.esign {
    font-weight: bold;
    float: left;
    color: #FFBF00;
    text-align: center;
    padding: 10px 14px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}
img.esign {
    width: 70%;
    height: 95%;
    padding: 0;
    margin: 0;;
}
h1.esign {
    padding: 10px;
    font-size: 14px;
}
button.esign {
    background-color: #fff;
    color: #fff;
    border:none;
    outline: none;
    text-decoration: none;
}
button.esign:hover {
    color: black;
    background-color: lightgray;
}
.bold {
    font-weight: bold;
}
.bg-gray {
    background-color: lightgray;
}
.bg-yellow {
    background-color: yellow;
}
.borderless {
    /*border:normal !important; 
    border-width: 0px; */
    border: none;
}
.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.header2 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.inner_header1 {
    flex-grow: 1;
    margin: auto 0;
}
.inner_header2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-grow: 3;
    text-align: center;
}
.inner_header_flat {
    width: 100%;
    text-align: center;
    padding: 15px 0;
}
.vh1 {
    font-size: 16px;
    padding-top: 5px;
}
.vh2 {
    font-size: 16px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.vh3 {
    font-size: 14px;
    padding-bottom: 5px;
}
.max_width {
    width: 50%;
}
.flag {
    padding-top: 10px;
}
.sign_box {
    height: 60px;
    width: 150px;
    display: inline-block;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    position: relative;
    vertical-align: bottom;
}
.rotated_text {
    transform: rotate(270deg); /* Rotate by 90 degrees */
    /*display: inline-block; /* Essential for transform to work correctly on inline elements */
    padding: 0px;
    margin: 0px;
}
.rectangle {
    width: 100%;
    height: 25px;
    display: inline-block;
    cursor: pointer;
    font-size: 0px;
    position: absolute;
    bottom: 0;
    overflow: hidden;
}
.rectangle:hover {
	border-style:solid;
	border-color:#bbb #888 #666 #aaa;
	border-width:3px 4px 4px 3px;
    font-size: 14px;
	background:#ccc;
	color:#333;
	text-decoration:none;
	font-weight:normal;
}
button.removeesign {
    width: 55%;
    height: 25px;
    color: #333;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    opacity: 0;
}
button.removeesign:hover {
    opacity: 1;
}
.signdate_container {
    vertical-align: bottom;
    bottom: 0;
}
.esign-upload-container {
    margin: 5px 0;
    padding: 20px;
    background-color: #ccc;
}
.invisible {
    opacity: 0;;
}
.visible {
    opacity: 1;
}
.manage_users_inner_box {
    width: 70%;
    margin: 5px auto;
}
.profile_inner_box {
    width: 75%;
    margin: 5px auto;
}
.boldpadding {
    padding-bottom: 5px;
}
.leftdiv {
    display: flex;
    justify-content: left;
    align-items: left;
    vertical-align: middle;
}
.disabled_link {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    float: none;
    color: gray;
    text-decoration: none;
    text-align: left;
    display: block;
    font-size: 14px;
    font-weight: bold;
    background-color: #f9f9f9;
    margin: 0;
    padding: 12px 14px;
}
.disabled_link:hover {
    cursor: default;
}
.attachment_container {
    margin: 0 5px;
    overflow: hidden;
}
.attachmentselect {
    border: none;
    outline: none;
    background-color: lightgray;
    padding: 5px 5px;
    overflow-y: auto;
}
.attachmentlist {
    color: black;
    white-space: nowrap;
    overflow: hidden;
}
.attachmentBtn {
    cursor: pointer;
}
.top_inner_box_open {
    width: 70%;
    margin: 5px auto;
}
.top_inner_box_esign {
    width: 70%;
    margin: 5px auto;
}
.linkPAFlist {
    padding-right: 40px;
}
.a4 {
    width: 21cm; /* A4 width in cm */
    height: 29.693cm; /* A4 height in cm -- IMPORTANT: don't change this number, it needs to be exact*/
    display: none;
    margin: 0px auto;
    text-align: center;
    /*border-top: 1px solid black; */
}
img.imgA4 {
    padding: 60px 30px 30px 30px; 
}
.hiddenBox {
    width: 50px;
    margin-right: 5px;
}
.shadow_frame {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    text-align: center;    
}
.printicon_container {
    flex-grow: 1;
}
.printicon_btn {
    position: relative; /* or relative */
    top: 0%;
}
.mytooltip {
    position: relative; 
    display: inline-block; 
    width: 100%;
    text-align: right;
  }
.mytooltip .mytooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}
.mytooltip:hover .mytooltiptext {
    visibility: visible;
}
.behind {
    z-index: -1;
}
.sidebar_subcontainer {
    margin-top: 50px;
}
.label_text {
    color: red;
    padding-bottom: 10px;
}
.user_icon {
    width: 20px;
    height: 20px;
    background-image: url('images/user-yellow.svg'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}
.user_icon:hover {
    background-image: url('images/user-dark.svg'); /* Initial background image */
}

.bg-white {    background-color: white; }
.bg-yellow {    background-color: yellow; }
.bg-cyan {    background-color: cyan; }
.bg-green {    background-color: green; }
.bg-purple {    background-color: purple; }
.bg-lgray {    background-color: lightgray; }
.bg-blue {    background-color: blue; }
.w_20 { width: 20%; }
.w_30 { width: 30%; }
.w_40 { width: 40%; }
.w_60 { width: 60%; }
.w_70 { width: 70%; }
.w_80 { width: 80%; }
.w_90 { width: 90%; }
.pl_10 { padding: 0 0 0 10px; }
.pl_15 { padding: 0 0 0 15px; }
@media screen and (max-width: 768px)  {
.columns {
    flex-direction: column; /* Vertical alignment for smaller screens */
    align-items: center; /* Center items horizontally when stacked vertically */
  }
.leftpane, .rightpan {
    margin: 0;
    padding: 0;
  }
}