@charset "utf-8";
/* CSS Document */
body {
  overflow-y: auto !important; /* Hide vertical scroll bar */
}

h1 {
  font-family: 'Arial Bold', sans-serif; /* Font type */
  font-size: 42px; /* Font size */
  font-weight: 800; /* Font weight (e.g., bold */
  line-height: 1.1;
}
h2 {
  font-family: 'Arial', sans-serif; /* Font type */
  font-size: 15px; /* Font size */
  font-weight: 500; /* Font weight (e.g., bold */
  line-height: 1.3;

}

h3 {
  font-family: 'logo', sans-serif; /* Font type */
  font-size: 42px; /* Font size */
  font-weight: 800; /* Font weight (e.g., bold */
  line-height: 1.1;
}

h5 {
  font-family: 'logoB', sans-serif; /* Font type */
  font-size: 42px; /* Font size */
  font-weight: 800; /* Font weight (e.g., bold */
  line-height: 1.1;
}

.redirect_company_logo {
  height: 24px;
  position:absolute;
	  display: flex;
  left: 360px;
   top:267px;
	z-index: 80000;
}


.redirect_35_logo {
  height: 40px;
  position:absolute;
	  display: flex;
  left: 20px;
   top:260px;
	z-index: 80000;
}

.redirect-check-form-group {
display: flex;
 justify-content: center;
	margin-top: -90px;
}
.redirect-check-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}

.redirect-submit-btn  {
	text-align: center;
   width: 135px;
  height: 40px;
  border-color:#FFFFFF;
  display: flex;
  font-family: "ARIAL";
  font-size: 15px;
  color: #FFFFFF;
  background-color: #11A800;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 19020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15); /* Drop shadow */
 
}
.redirect-submit-btn:hover {
	  z-index: 19020;
  width: 135px;
  height: 40px;
 
  cursor: pointer;
  display: flex;
  font-family: "ARIAL";
  font-size: 15px;
  color: #FFFFFF;
  background-color: #096000;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;

  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
}

.modal-content-redirect {
  background-color: #FFFFFF;
  text-align: center;
  padding-top: 5px;
 width: 900px;
  align-content: center;
	align-items: center;
  position: relative;
  border: 1px solid #373737;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  height: 580px
}

:root{
    --uc-bg:#ffffff;
    --uc-br:#ffffff;
    --uc-text:#000000;
    --uc-muted:#6b7280;
    --uc-shadow:0 8px 28px rgba(0,0,0,.08);
  }

  .upgrade-card{
	 align-items: center;
	  align-content: center;
     width: 860px;
    margin: 24px auto;
    padding: 24px 26px;
    background: var(--uc-bg);
    border: 1px solid var(--uc-br);
    border-radius: 0px;
    text-align: center;
     font-family: "ARIALB";
    color: var(--uc-text);
  }

  .try-it-today{
	 align-items: center;
	  align-content: center;
     width: 860px;
   position: absolute;
	  top: 160px;
    ;
    border-radius: 0px;
    text-align: center;
     font-family: "ARIALB";
    color: var(--uc-text);
  }

  .try-it-today h2{
	  color: #212121;
	 text-align: center;
    margin:0 24px   4px 24px;
    font-size: 22px;
	  font-weight: 800;
    letter-spacing: -0.01em;
  }
  .try-it-today p{ 
	 
	  color:#000000;
	  line-height: 19px; 
	  font-family: "ARIAL";
	  font-size: 14px;
	  text-align: center;
	   margin:1px   100px     0px  100px;
}





  .uc-head h2{
	  font-family: "ARIALB";
	 text-align: center;
    margin:0 18px   4px 24px;
    font-size: 30px;
	  font-weight: 800;
    letter-spacing: -0.05em;
  }
  .uc-head p{ 
	 
	  color:#000000;
	  line-height: 19px; 
	  font-family: "ARIAL";
	  font-size: 14px;
	  text-align: center;
	   margin:1px   100px     0px  100px;
}

  .uc-body{ margin-top:18px 
}


  .uc-kicker{ 
	  text-align: center;

	  margin:30px 0 10px 0px; 
	  font-weight:600 ;
		   font-family: "ARIAL";
	  font-size: 18px;
}

  .uc-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:16px;
    margin-top:80px;
	  margin-bottom: 125px;
	  
  }

.uc-item{
	
  display: flex;             /* override any grid/flex combo above */
  flex-direction: column;    /* logo on top, text below */
  align-items: flex-start;   /* left edge alignment */
  gap: 8px;                  /* space between logo and text */
  text-align: left;          /* keep text left even if parent is centered */
  /* keep your existing padding/border/background/width/margins */
  /* padding:12px 14px; border:0; background:#FFF; width:350px; margin-left:22px; */
}
.uc-item { grid-template-columns: unset; }

.uc-logo{
	
	margin-left: 60px;
  display: block;            /* images shouldn’t be flex containers */
  width: 100px;              /* keep your fixed width */
  height: 34px;              /* keep your height */
  object-fit: contain;
  /* optional: add a little breathing room under the logo */
 margin-bottom: -12px;
}

  .uc-title{ font-weight:700; margin-bottom:4px }

.uc-title{
  margin: 0 0 4px 0;
  font-weight: 700;
  text-align: left;
}
 .uc-sub{
  text-align: left;          /* force left within centered parents */
  margin-left: 60px;
	 margin-bottom: 30px;/* align directly under logo (remove indent) */
  color:#030303;
  font-size:12px;
  font-family:"ARIAL";
	 width: 300px;
	
}

/* Fix invalid 5-value margin shorthand that could cause layout quirks */
.uc-closer{
  margin: 38px 0 30px 0;     /* top right bottom left */
  text-align: center;
}

  .uc-footer{
    margin-top:44px;
    padding-top:16px;
    border-top:1px solid var(--uc-br);
    font-size:10px;
    color:var(--uc-muted);
    text-align:center;
  }

  @media (max-width: 640px){
    .uc-grid{ grid-template-columns: 1fr }
    .uc-logo{ height:28px }
  }




#demo_sig_3 {
  position: absolute;
  top:  305px;
  left: 180px;
  transform: translate(-50%, -50%); /* Center the modal */
  padding: 20px;
  border-radius: 0px;
  font-family: Arial, sans-serif;
  align-items: center;
  z-index: 80001;
  display: flex; /* Hidden by default */
  height: 35px;
}

#demo_sig_2 {
  position: absolute;
  top:  430px;
  left: 210px;
  transform: translate(-50%, -50%); /* Center the modal */
  padding: 20px;
  border-radius: 0px;
  font-family: Arial, sans-serif;
  align-items: center;
  z-index: 80001;
  display: flex; /* Hidden by default */
  height: 25px;
}

.contract {
  position: absolute;
	
  top: 220px;
  left:  140px;
  transform: translate(-50%, -50%);
	
  z-index: 5000;
}
.contract img {
  height: 260px;
 box-shadow: 0 8px 8px rgba(0.2, 0.2, 0.2, 0.3);
  z-index: 5000;
  opacity: 0.7;
}


.check {
  position: absolute;
	 
  top: 410px;
  left:  140px;
  transform: translate(-50%, -50%);
  z-index: 5000;
}
.check img {
  height: 90px;
box-shadow: 0 8px 8px rgba(0.2, 0.2, 0.2, 0.3);
  z-index: 5000;
  opacity: 0.7;
}


.truSign-modal-content {
background: linear-gradient(to bottom, #ffffff 0%, #F4F4F4 50%, #E3E3E3 100%);
	
	
  padding: 20px;
  width: 800px;
  height: 500px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 46000;
}

.fade-flex {
  display: none;          /* hidden by default */
  opacity: 0;             /* invisible */
  transition: opacity 0.3s ease-in;
}

.fade-flex.show {
  display: flex;          /* show */
}

.fade-flex.visible {
  opacity: 1;             /* fade in */
}

.expand-on-load {
  width: 50%;
  height: 50%;
  background: #3498db;
  opacity: 0;
  animation: expandFade 1s ease forwards;
}

@keyframes expandFade {
  0% {
    width: 50%;
    height: 50%;
    opacity: 0;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
}

	.error_svg  {
	display: flex;
	width: 100%;
	height: 40px;
	top:30px;
			justify-content: center;
      align-items: center;
			position: absolute;
			
}

		.error_svg button {
	display: flex;
	
	
	top:10px;
			justify-content: center;
      align-items: center;
			position: absolute;
			margin-top: -20px;
			
}

		.error_svg img {
	display: flex;
	
	height: 50px;
	top:80px;
			justify-content: center;
      align-items: center;
			position: absolute;
			margin-bottom: -40px;
			
}
	
			.error_svg h6 {
	color: #CB0000;
	top:20px;
	width: 100%;
	font-size: 16px;
	font-weight: 400;
	z-index: 1005;
	font-family: Arial, sans-serif;
	line-height: 8px;
			position: absolute;
				text-align: center;
				
}

.vertical-line {
	position: absolute;
  width: 2px;                 /* thickness of the line */
  height: 200px;              /* height of the line */
  background-color: #ccc;     /* color of the line */
  margin: 0 20px;  
	top:70px;
	left:430px;/* horizontal spacing */
}

.vertical-line-screen {
	position: absolute;
  width: 2px;                 /* thickness of the line */
  height: 240px;              /* height of the line */
  background-color: #ccc;     /* color of the line */
  margin: 0 20px;  
	top:140px;
	left:250px;/* horizontal spacing */
}


#aiCheck-sms-submit-btn  {
   width: 105px;
  height: 32px;
  position: absolute;
  top: 220px;
  left: 190px;
  display: flex;
  font-family: "ARIAL";
  font-size: 13px;
  color: #FFFFFF;
  background-color: #11A800;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 19020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); /* Drop shadow */
 
}
#aiCheck-sms-submit-btn:hover {
	  z-index: 19020;
  width: 105px;
  height: 34px;
  position: absolute;
 top: 220px;
  left: 190px;
  cursor: pointer;
  display: flex;
  font-family: "ARIAL";
  font-size: 12px;
  color: #FFFFFF;
  background-color: #096000;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
}

#truSign-sms-submit-btn  {
   width: 105px;
  height: 32px;
  position: absolute;
  top: 220px;
  left: 190px;
  display: flex;
  font-family: "ARIAL";
  font-size: 13px;
  color: #FFFFFF;
  background-color: #11A800;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 19020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); /* Drop shadow */
 
}
#truSign-sms-submit-btn:hover {
	  z-index: 19020;
  width: 105px;
  height: 34px;
  position: absolute;
 top: 220px;
  left: 190px;
  cursor: pointer;
  display: flex;
  font-family: "ARIAL";
  font-size: 12px;
  color: #FFFFFF;
  background-color: #096000;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
}

.years {
  height: 45px;
  position: absolute;
  top:  7px;
  left: 1140px;
  text-align: left;
  display: flex;
  font-size: 16px;
  z-index: 17500;
}

.years:hover {
 
}

.submitBtn:hover {
                background: linear-gradient(to bottom, #007bff, #0056b3);
                cursor: pointer;
            }
            .submitBtn:disabled {
                background-color: #aaa;
                cursor: not-allowed;
                opacity: 0.5;
            }
            .submitBtn:hover:not(:disabled) {
                background-color: #aaa;
            }
            .clearBtn {
                padding: 10px 15px;
                font-size: 14px;
                color: #FFFFFF;
                display: block;
                position: absolute;
                height: 40px;
                text-align: center;
                left: 5px;
                width: 70px;
                text-decoration: none;
                text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
                background: linear-gradient(to bottom, #838383 0%, #1B1B1B 100%);
                border: 1px solid #262626;
                border-radius: 5px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
                transition: all 0.3s ease;
            }
            .clearBtn:hover {
                background: #6F6F6F;
                cursor: pointer;
            }
            .clearBtn:disabled {
                background-color: #aaa;
                cursor: not-allowed;
                opacity: 0.5;
            }
            .clearBtn:hover:not(:disabled) {
                background-color: #aaa;
            }

  .button-group {
                padding: 10px 15px;
            }


   .button-group button {
                padding: 8px 14px;
                font-size: 0.25em;
}
            
   .content {
                flex-direction: row;
                flex: 1;
            }

            .terms-section {
                padding: 5px 0px 0px;
                font-size: 9px;
                display: block;
				height: 80px;
            }
            .terms-checkbox {
				font-size: 8px;
                
                font-weight: 500;
                top: 165px;
                margin-left: 15px;
                margin-right: 10px;
                position: absolute;
            }
            .terms-text {
                width: 150px;
                display: block;
                top: 95px;
                font-size: 8px;
                max-height: 180px;
                height: 80px;
				
                position: absolute;
                margin-left: 15px;
                margin-right: 25px;
                text-align: left;
            }
            .canvas-container {
				background-color: #E4F4F7;
                justify-content: center;
                display: block;
                top: 185px;
				width:150px;
				height: 75px;
                position: absolute;
                margin-left: 15px;
                margin-right: 10px;
				
            }
            #signatureCanvas {
                width: 85vw;
                height: 150px;
                border-width: 1px;
                background-color: #E8F2FD;
            }

.aiCheck-form-group {
  height: 100px;
margin-top:  0px;
 width: 300px;
z-index: 19000;
 
	top: 140px;
	position: absolute;
	left:140px;
	
}
.aiCheck-form-group label {
	
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 10px;
	 text-align: left;
	left: 0px;
	width: 280px;
	color: #000000
}
.aiCheck-form-group input {
	display: block;
		left: 0px;
  width: 210px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.aiCheck-form-group input:focus {
  outline: none;
  border-color: #007bff;
}


.truCheck-modal-content {
 background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 50%, #F3F3F3 100%);
  padding: 20px;
  width: 800px;
  height: 450px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 46000;
	
}



.aiCheck-modal-content {
 background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 50%, #F3F3F3 100%);
  padding: 20px;
  width: 800px;
  height: 450px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 46000;
	
}

.aiCheck-modal-email h13 {
	position: absolute;
   color: #000000; 
   width: 240px;
  font-family: "ARIALB";
  font-size: 18px;
	top:65px;
}
.aiCheck-modal-email h14 {
	top:90px;
	position: absolute;
     
	 width: 240px;
  font-weight: normal;
  font-size: 14px;
  font-family: "ARIAL";
}
.aiCheck-modal-email {
 align-items: center;
	align-content: center;
  border-radius: 5px;
  width: 240px;
  height: 220px;
  position: absolute;
  text-align: center;
	
  top: 130px;
	left: 370px;
	 
}

.aiCheck-modal-sms h13 {
	  width: 240px;
 	position: absolute;
   color: #000000; 
    
  font-family: "ARIALB";
  font-size: 18px;
	top:65px;
}
.aiCheck-modal-sms h14 {
	top:90px;
	position: absolute;
       
	   width: 240px;
  font-weight: normal;
  font-size: 14px;
  font-family: "ARIAL";
}
.aiCheck-modal-sms {
   align-items: center;
	align-content: center;
  border-radius: 5px;
  width: 240px;
  height: 220px;
  position: absolute;
  text-align: center;
	
  top: 130px;
	left: -40px;
	 
}

.aiCheck-modal-subhead h15 {
	 position: absolute;
	top:70px;
	left:50px;
   color: #000000; 
  line-height: 1.2;
  font-family: "ARIALB";
  font-size: 18px;
}

.aiCheck-modal-subhead h16 {
	top:100px;
	left:40px;
	 position: absolute;
   color: #000000; 
  line-height: 1.4;
  font-family: "ARIAL";
  font-size: 13px;
	margin-top: -10px;
	margin-left: 12px;
	
}


.aiCheck-modal-subhead {
  align-items: center;
  border-radius: 5px;
  width: 680px;
  height: 100px;
  position: absolute;
  text-align: left;
  top: 36px;
	left: 15px;
color: #000000; 
}

 #matrix {
	 position: absolute;
      width: 180px;
      height: 340px;
      background: #000;
      overflow: hidden;
   border-radius: 10px;
	  
      box-shadow: 0 0 12px #0f0;
    }

    canvas {
		border-radius: 15px;
      display: flex;
		width: 180px;
      height: 340px;
		left: 15px;
		z-index:27500;
    }


    .camera-text {
      display: inline-block;
      transform: rotate(90deg); /* Change the degree as needed */
      font-size: 14px;
      height: 340px;
		width: 190px;
		position: absolute;
		top: -12px;
		right: 85px;
		color: #FFFFFF;
    }


    .capture-button {
      width: 30px;
      height: 30px;
      background: #ffffff;
      border: 3px solid #cccccc;
      border-radius: 50%;
      cursor: pointer;
      position: absolute;
      z-index: 10;
      transition: transform 0.2s;
		left: 73px;
		top: 295px;
    }

    .capture-button:active {
      transform: scale(0.9);
    }


    

.phone-outline {
      width: 210px;
      max-height: 440px;
      border: 3px solid #333;
      border-radius: 20px;
      position: relative;
      background: #f9f9f9;
      box-shadow: 0 0 10px rgba(0,0,0,0.15);
    }

    .speaker-slot {
      width: 60px;
      height: 8px;
      background: #444;
      border-radius: 4px;
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
    }




.div-portrait button {
	padding: 7px 15px;
	font-size: 10px;
	
	color: #FFFFFF;
	
	left: 52px;
	
	
	position: absolute;
	top: 270px;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
	background: linear-gradient(to bottom, #4facfe, #007bff);
	border: 1px solid #007bff;
	border-radius: 3px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
	
	
	transition: all 0.3s ease;
}
.div-portrait button:hover {
	background: linear-gradient(to bottom, #007bff, #0056b3);
	cursor: pointer;
}

.div-portrait-header {
	width: 80%;
	height: 20px;
	font-family: Arial, sans-serif;
	font-size: 10px;
	color: #000000;
	position: absolute;
	top: 0px;
	opacity: 1;
	
}
.div-portrait-footer {
	width: 100%;
	height: 20px;
	font-family: Arial, sans-serif;
	font-size: 7px;
	color: #000000;
	position: absolute;
	top: 320px;
	opacity: 1;
	z-index: 1;
	left: 0px;
	text-align: center;
	
}

.div-SMS-info {
	width: 220px;
	height: 450px;
	font-family: Arial, sans-serif;
	font-size: 24px;
	 line-height: .1;
	top: 95px;
	text-align: left;
	opacity: 1;
	position: absolute;
	
	left: 5px;
	 
 
}

.div-SMS-message {
	column-count: 1;
	width: 100%;
	 display: grid;
	max-height: 22px;
	left: 5px;
	position: absolute;
	top: 80px;
	opacity: 1;
	line-height: normal;
	text-align: 10px;
}

.div-portrait h11 {
	color: #000000;
	position: absolute;
	top: 55px;
	font-size: 14px;
	text-align: left;
	left: 15px;
	width: 300px;
}


.div-portrait h8 {
	color: #000000;
	position: absolute;
	top: 90px;
	
	font-size: 11px;
	text-align: left;
	left: 15px;
	width: 300px;
}
.spacer {
	height: 1px; /* Set exact height */
}

.div-portrait  h9 {
	color: #000000;
	margin-left: 10px;
	width: 90%;
	height: 8px;
	font-size: 9px;
	font-weight: 300;
	z-index: 1005;
	 letter-spacing: -.1px;
	line-height: 9px;
	text-align: left;
	top: 30px;
	position: absolute;
}
.div-portrait h10 {
	color: #0033F9;
	margin-left: 10px;
	max-width: 150px;
	font-size: 10px;
	font-weight: 400;
	z-index: 1005;
	display: flex;
	line-height: 10px;
	position: absolute;
	top: 25px;
}

.div-portrait-info {
	width: 220px;
	height: 450px;
	font-family: Arial, sans-serif;
	font-size: 10px;
	 line-height: .1;
	top: 95px;
	text-align: left;
	opacity: 1;
	position: absolute;
	
	left: 5px;
	
}




.div-portrait-message {
	column-count: 1;
	width: 100%;
	 display: grid;
	max-height: 22px;
	left: 5px;
	position: absolute;
	top: 60px;
	opacity: 1;
	line-height: normal;
	text-align: 10px;
}
.div-portrait h1 {
	color: #000000;
	position: absolute;
	top: 35px;
	font-size: 12px;
	text-align: left;
	left: 15px;
	width: 300px;
}
.spacer {
	height: 1px; /* Set exact height */
}

.div-portrait  h7 {
	color: #000000;
	margin-left: 10px;
	width: 90%;
	height: 8px;
	font-size: 8px;
	font-weight: 300;
	z-index: 1005;
	 letter-spacing: -.1px;
	line-height: 9px;
	text-align: left;
	
}
.div-portrait h2 {
	color: #000000;
	margin-left: 10px;
	width: 75%;
	font-size: 8px;
	font-weight: 400;
	z-index: 1005;
	display: flex;
	line-height: 8px;
	
	
}
.div-portrait p {
	color: #000000;
	width: 80%;
	margin-left: 10px;
	font-size: 9px;
	z-index: 1005;
	font-weight: bold;
	display: flex;
	line-height: 01px;
}


.screen-banner {
  width: 95%; /* Full width of the parent div */
  height: 0px; /* Fixed height */
  border-top: 3px solid var(--banner-border-color, #949494);;
  content: '';
  color: white;
  display: block;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 25px;
  left: 2.55%;
  z-index: 10; /* Ensure it stays above other content */
}

.screen-banner::before  {
	display: block;
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 8px solid transparent; /* Left side of the triangle */
  border-right: 8px solid transparent; /* Right side of the triangle */
  border-top: 8px solid  var(--banner-before-border-color, #949494); /* Base of the triangle (red color) */ 
}

  .camera-container {
      display: flex;
		top:50px;
      	 background-color: #4B4B4B; 
      position: absolute;
      margin: 50px auto;
     height: 340px;
		width:  180px;
		z-index: 10500;
		left: 60px;
		
		box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    }

 .camera-pic {
      display: flex;
		top:-10px;
      	 background-color: #FFFFFF; ;
      position: absolute;
      margin: 50px auto;
     height: 245px;
		width:  120px;
		z-index: 10500;
	border-radius: 8px;
		left: 25px;
		
		box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    }


    .screen-container {
      display: flex;
		top:50px;
      	 background-color: #FFFFFF; ;
      position: absolute;
      margin: 50px auto;
     height: 340px;
		width:  180px;
		z-index: 10500;
		left: 60px;
		
		box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    }


    .progress-container {
      display: flex;
		top:375px;
      justify-content: space-between;
      position: relative;
      margin: 50px auto;
      max-width: 400px;
		z-index: 12600;
    }

    /* Line connecting the steps */
    .progress-container::before {
      content: '';
      background-color: #e0e0e0;
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 4px;
      z-index: -1;
      transform: translateY(-50%);
    }

    /* Progress fill line */
    .progress {
      background-color: #23C567;
      position: absolute;
      top: 50%;
      left: 0;
      height: 4px;
      width: 0%;
      z-index: -1;
      transition: width 0.4s ease;
      transform: translateY(-50%);
    }

    /* Individual step circles */
    .step {
      background-color: #fff;
      border: 2px solid #e0e0e0;
      border-radius: 50%;
      height: 30px;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.4s ease;
      position: relative;
      cursor: pointer;
    }

    /* Completed step styling */
    .step.completed {
      border-color: #23C567;
    }

    /* Step labels */
    .step-label {
		font-family: "ARIAL";
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 12px;
      color: #666;
    }

.expandable-div {
            width: 80%;
            margin: 20px auto;
            background-color: lightblue;
            overflow: hidden; /* Hide content when collapsed */
            height: 0; /* Initial collapsed state */
            transition: height 0.5s ease; /* Smooth expansion */
            padding: 0 20px; /* Padding for when expanded */
            box-sizing: border-box;
        }

        .expandable-div.expanded {
            height: auto; /* Expand to full content height */
            padding: 20px; /* Adjust padding if needed */
        }


.modal-close {
  position: absolute;
  top: 5px;
  right: 05px;
  background: none;
  border: none;
  font-size: 36px;
  color: #C8C8C8;
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1;
  
	display: flex;
}

.modal-close:hover {
  color: #ff4d4d;
}

.modal-close:focus {
  outline: none;
  color: #ff4d4d;
}



.main_entry_title_sig {
  position: relative;
  top: 25px;
  width: 750px;
  letter-spacing: -.8px;
  z-index: 5000;
  font-family: "ARIALB";
  font-size: 26px;
  color: #030303;
  align-items: center;
  align-content: center;
  text-align: left;
	left: 030px;
}

.micrhigh {
  position: absolute;
  top: 250px;
  left: 260px;
  transform: translate(-50%, -50%);
  z-index: 5000;
}
.micrhigh img {
  height: 50px;
  max-width: 480px;
  top: 280px;
  z-index: 5000;
  opacity: 0.7;
}

.micrhigh h1 {
	  width: 300px;
	   position: absolute;
  top: 55px;
  left: 35px;
	
    font-family: 'Permanent Marker', cursive;
    font-size: 18px;
    color: #000000;
  }

.sighigh {
  position: absolute;
  top: 160px;
  left: 465px;
  transform: translate(-50%, -50%);
  z-index: 5000;
}
.sighigh img {
  height: 80px;
  max-width: 160px;
  top: 260px;
  z-index: 5000;
  opacity: 0.7;
}

.sighigh h1 {
	  width: 300px;
	   position: absolute;
  top: 65px;
  left: 110px;
	
    font-family: 'Permanent Marker', cursive;
    font-size: 18px;
    color: #000000;
  }

.namehigh {
  position: absolute;
  top: 30px;
  left: 90px;
  transform: translate(-50%, -50%);
  z-index: 5000;
}


.namehigh img {
  height: 85px;
  max-width: 200px;
  top: 240px;
  z-index: 5000;
  opacity: 0.7;
}

.namehigh h1 {
	  width: 300px;
	   position: absolute;
  top: -45px;
  left: 20px;
	
    font-family: 'Permanent Marker', cursive;
    font-size: 18px;
    color: #000000;
  }


.main_entry_check_image_sig {
  position: absolute;
  top: 10px;
  left: 10px;
  
  z-index: 5000;
}
.main_entry_check_image_sig img {
  width: 600px;
  
  top: 300px;
  z-index: 5000;
  opacity: 0.7;
}
.main_entry_check_image_sig check_firstname {
  font-family: "ARIALB";
  font-size: 11px;
  color: #030303;
  position: absolute;
  top: 15px;
  left: 25px;
  z-index: 5000;
}
.main_entry_check_image_sig check_firstname_2 {
  font-family: "ARIALB";
  font-size: 11px;
  color: #030303;
  position: absolute;
  top: 28px;
  left: 25px;
  z-index: 5000;
}
.main_entry_check_image_sig check_Street {
  font-family: "ARIAL";
  font-size: 10px;
  color: #030303;
  position: absolute;
  top: 40px;
  left: 25px;
  z-index: 5000;
}

.main_entry_check_image_sig check_csz {
  font-family: "ARIAL";
  font-size: 10px;
  color: #030303;
  position: absolute;
  top: 52px;
  left: 25px;
  z-index: 5000;
}

.main_entry_check_image_sig check_your_name {
  font-family: "Courier", "Courier New", monospace;
  font-size: 12px;
  color: #030303;
  position: absolute;
  top: 150px;
  left: 35px;
  z-index: 5000;
}

.main_entry_check_image_sig check_your_street {
  font-family: "Courier", "Courier New", monospace;
  font-size: 12px;
  color: #030303;
  position: absolute;
  top: 165px;
  left: 35px;
  z-index: 5000;
}

.main_entry_check_image_sig check_your_csz {
  font-family: "Courier", "Courier New", monospace;
  font-size: 12px;
  color: #030303;
  position: absolute;
  top: 180px;
  left: 35px;
  z-index: 5000;
}



.main_entry_check_image_sig check_pto {
  font-family: "ARIAL";
  font-size: 6px;
  color: #030303;
  position: absolute;
  top: 82px;
  left: 32px;
  z-index: 5000;
	line-height: 8px;
}







.main_entry_check_image_sig check_payee {
  font-family: "Courier", "Courier New", monospace;
  font-size: 18px;
	font-weight: bold;
  color: #030303;
  position: absolute;
  top: 80px;
  left: 80px;
  z-index: 5000;
}
.main_entry_check_image_sig check_routing {
  font-family: 'MICRE13B';
  font-size: 14px;
  color: #030303;
  position: absolute;
  top: 238px;
  left: 60px;
  z-index: 5000;
}
.main_entry_check_image_sig check_amount {
  font-family: "courier-prime";
  font-size: 20px;
  color: #000000;
  position: absolute;
  top: 110px;
  left: 25px;
  z-index: 5000;
}
.main_entry_check_image_sig check_amount_numeric {
  font-family: "ARIAL";
  font-size: 13px;
  color: #000000;
  position: absolute;
  top: 80px;
  right: 10px;
  width: 165px;
  height: 14px;
  z-index: 5000;
  padding: 8px;
  text-align: right;
}
.main_entry_check_image_sig check_debitdate {
  font-family: "ARIAL";
  font-size: 11px;
  color: #030303;
  position: absolute;
  top: 35px;
  right: 15px;
  z-index: 5000;
}
.main_entry_check_image_sig check_check {
  font-family: "ARIAL";
  font-size: 14px;
  color: #D80003;
  position: absolute;
  top: 14px;
  right: 15px;
  z-index: 5000;
}
.main_entry_check_image_sig check_memo {
  font-family: "ARIAL";
  font-size: 9px;
  color: #030303;
  position: absolute;
  top: 173px;
  left: 25px;
  z-index: 5000;
}
.main_entry_check_image_sig check_ref {
  font-family: "ARIAL";
  font-size: 9px;
  color: #030303;
  position: absolute;
  top: 160px;
  left: 25px;
  z-index: 5000;
}
.main_entry_check_image_sig check_signature {
  font-family: "ARIAL";
  font-size: 10px;
  color: #030303;
  position: absolute;
  top: 185px;
  left: 390px;
  text-align: left;
  z-index: 5000;
  width: 180px;
  border-top: 1px solid #000000;
}
.main_entry_check_image_sig check_bankname {
  font-family: "ARIAL";
  font-size: 10px;
  color: #030303;
  position: absolute;
  top: 15px;
  left: 10px;
  text-align: center;
  z-index: 5000;
  width: 560px;
}
.main_entry_check_image_sig check_transaction {
  font-family: "ARIAL";
  font-size: 9px;
  color: #030303;
  position: absolute;
  top: 30px;
  text-align: center;
  z-index: 5000;
  width: 560px;
	left: 10px;
}
.main_entry_check_image_sig check_esig {
  font-family: "SigFont";
  font-size: 22px;
  font-weight: bold;
  color: #0009BD;
  position: absolute;
  top: 150px;
  left: 420px;
  text-align: left;
  z-index: 5000;
  width: 560px;
  cursor: pointer;
  visibility: hidden;
}
.main_entry_check_image_sig check_esig1 {
  font-family: "ARIAL";
  font-size: 12px;
  font-weight: 300;
  color: #C80003;
  position: absolute;
  top: 172px;
  left: 463px;
  text-align: left;
  z-index: 5000;
  width: 560px;
  cursor: pointer;
  visibility: hidden;
}
#demo_sig_1 {
  position: absolute;
  top:  180px;
  left: 490px;
  transform: translate(-50%, -50%); /* Center the modal */
  padding: 20px;
  border-radius: 0px;
  font-family: Arial, sans-serif;
  align-items: center;
  z-index: 80001;
  display: flex; /* Hidden by default */
  height: 80px;
}



#demo_sig {
  position: fixed;
  top: 425px;
  left: 865px;
  padding: 20px;
  border-radius: 0px;
  font-family: Arial, sans-serif;
  align-items: center;
  z-index: 80001;
  display: flex; /* Hidden by default */
  height: 70px;
}
.demo_check {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, sans-serif;
  z-index: 80001;
  display: flex; /* Hidden by default */
  max-height: 300px;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
  display: none; /* Hidden by default */
  z-index: 80000;
}
/* Modal container */
#file-watcher-1 {
  top: 75px;
  left: 28px;
  position: absolute;
	  display: flex;
}
#file-watcher {
  top: 435px;
  left: 840px;
  position: fixed;
  padding: 20px;
  border-radius: 0px;
  font-family: Arial, sans-serif;
  margin-left: 115px;
  margin-top: 50px;
  align-items: center;
  gap: 10px;
  z-index: 80001;
  display: none; /* Hidden by default */
  min-width: 200px;
}
/* Spinner */
.spinner {
  width: 40px;
            height: 40px;
            border: 6px solid #f3f3f3; /* Light grey */
            border-top: 6px solid #3498db; /* Blue */
            border-radius: 50%;
            animation: spin 1s linear infinite;
  display: inline-block;
	
}
.spinner.hidden {
  display: none;
}
.status {
	
  font-size: 16px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@keyframes slideInLeft {
  from {
    transform: translateX(-100%); /* Start off-screen to the LEFT */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* End at original position */
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(100%); /* Start off-screen to the RIGHT */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* End at original position */
    opacity: 1;
  }
}
.remote-check-instruct-modal-123 {
  display: block;
  line-height: 2;
  font-weight: bold;
  font-size: 30px;
  width: 780px;
  height: 340px;
  position: absolute;
  font-family: "ARIALB";
  top: 30px;
  z-index: 6000;
  text-align: center;
  color: #222222;
}

.signature-check-modal-bg {
  background-color: #FFFFFF;
  top:200px;
	left:75px;
  width: 620px;
  height: 275px;
  position: absolute;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 5000;
}



.print-demo-submit-btn {
  width: 100px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
z-index: 7500;
	top: 30px;
	left:75px;
	position: absolute;
 
}
.print-demo-submit-btn:hover {
  background-color: #016B18;
}


.signature-check-print {
 
  top:50px;
	left:720px;
  width: 250px;
  height: 120px;
  position: absolute;
  text-align: center;
margin-top: 30px;
  z-index: 15000;
	font-size: 18px;
}


.signature-check-preview {
  visibility: hidden;
  top:190px;
	left:730px;
  width: 250px;
  height: 350px;
  position: absolute;
  
  z-index: 5000;
	font-size: 13px;
}



.signature-check-modal-content {
background: linear-gradient(to bottom, #ffffff 0%, #F4F4F4 50%, #E3E3E3 100%);
	
	
  padding: 20px;
  width: 800px;
  height: 500px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 46000;
}
.signature-check-modal-instructions {
	
	text-align: center;
	display: flex;
  border-radius: 5px;
  width: 400px;
  height: 300px;
  position: absolute;
 left: 100px;
  top: 170px;
  z-index: 12000;
}
.signature-check-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.signature-check-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.signature-check-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.signature-check-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.signature-check-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.signature-check-form-group {
  margin-bottom: 15px;
  margin-left: -5px;
  text-align: left;
}
.signature-check-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.signature-check-form-group input {
  width: 240px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.signature-check-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.signature-check-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.signature-check-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.signature-vmodal-content {
  background-color: #FFFFFF;
  padding: 20px;
  width: 280px;
  height: 400px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 46000;
}
.signature_check-company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.PasswordReset-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.PasswordReset-modal-header h5 {
  margin: 0;
  top: 55px;
  left: 30px;
  font-size: 14px;
  font-family: "ARIAL";
  display: block;
  width: 400px;
  text-align: left;
  position: absolute;
  font-weight: 300;
}
.PasswordReset-submit-btn {
  width: 150px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 125px;
  margin-right: 125px;
}
.submit-btn:hover {
  background-color: #218838;
}
.PasswordReset-modal-content {
  background-color: #FFFFFF;
  ;
  padding-top: 5px;
  width: 90%;
  max-width: 400px;
  position: relative;
  border: 1px solid #373737;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  height: 260px
}
.api-instruct-banner {
  width: 100%; /* Full width of the parent div */
  height: 0px; /* Fixed height */
  border-top: 6px solid #BF6B00;
  color: white;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it stays above other content */
}
.api-instruct-banner::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #BF6B00; /* Base of the triangle (red color) */
}
.signature-instruct-banner {
  width: 100%; /* Full width of the parent div */
  height: 0px; /* Fixed height */
  border-top: 6px solid #23B300;
  color: white;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it stays above other content */
}
.signature-instruct-banner::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #23B300; /* Base of the triangle (red color) */
}

.truSign-banner {
  width: 100%; /* Full width of the parent div */
  height: 0px; /* Fixed height */
  border-top: 6px solid #00568b;
  color: white;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it stays above other content */
}
.truSign-banner::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #00568b; /* Base of the triangle (red color) */
}


.aiCheck-banner {
  width: 100%; /* Full width of the parent div */
  height: 0px; /* Fixed height */
  border-top: 6px solid #2b835c;
  color: white;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it stays above other content */
}
.aiCheck-banner::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #2b835c; /* Base of the triangle (red color) */
}

.remote-instruct-banner {
  width: 100%; /* Full width of the parent div */
  height: 0px; /* Fixed height */
  border-top: 6px solid #0712DB;
  color: white;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it stays above other content */
}
.remote-instruct-banner::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #0712DB; /* Base of the triangle (red color) */
}
.echeckdemo-modal-logo {
  height: 24px;
  position: absolute;
  left: 840px;
  top: 25px;
  z-index: 7000;
  color: #FFFFFF;
  text-align: center;
  font-size: 11px;
}
.echeckdemo-modal-data_entery_tab {
  background-color: #524E4E;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  width: 90px;
  height: 20px;
  position: absolute;
  left: 30px;
  top: 20px;
  z-index: 7000;
  color: #FFFFFF;
  text-align: center;
  font-size: 11px;
  padding-top: 10px;
  border-bottom: 3px solid #FFCE00;
}
.echeckdemo-modal-data_entery_tab::before {
  content: ''; /* Required for pseudo-element */
  position: absolute;
  top: 31px;
  left: 0px; /* Position the rule 20px from the left edge */
  width: 2px; /* Thickness of the vertical rule */
  height: 1px; /* Span the full height of the div */
  background: #DFDFDF; /* Black rule to match border */
}
.echeckdemo-modal-data_entery_tab::after {
  content: ''; /* Horizontal rule */
  position: absolute;
  top: 31px; /* Position 50px from the top */
  left: 0;
  width: 860px; /* Span full width of the div (160px) */
  height: 2px; /* Thickness of the horizontal rule */
  background: #DFDFDF; /* Black rule to match border and vertical rule */
}
.echeckinstruct-banner {
  width: 100%; /* Full width of the parent div */
  height: 0px; /* Fixed height */
  border-top: 6px solid #cc1c22;
  color: white;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it stays above other content */
}
.echeckinstruct-banner::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #cc1c22; /* Base of the triangle (red color) */
}
.signatureinstruct-submit-btn {
  width: 120px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 80px;
  margin-right: 80px;
  top: 220px;
  position: relative;
}
.signatureinstruct-submit-btn:hover {
  background-color: #218838;
}

.enter-instruct-submit-btn {
  width: 120px;
  padding: 10px;
  top: 340px;
   

  cursor: pointer;
 
  
  height: 40px;
  position: absolute;
  
  left: 260px;
  display: flex;
  font-family: "ARIAL";
  font-size: 13px;
  color: #FFFFFF;
  background-color: #11A800;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  z-index: 5020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  border-color: white;
	
}
.enter-instruct-submit-btn:hover {
	
	
	 transform: translate(-.5px, .5px); /* Slight lift effect */
  
  background: linear-gradient(145deg, #388e3c, #2e7d32); 
	

}



.echeckinstruct-submit-btn {
  width: 120px;
  padding: 10px;
  font-family: "ARIAL";
  font-size: 13px;
  color: #FFFFFF;
 
 
  cursor: pointer;
margin-top: 25px;
 
 /* Lighter green gradient for depth */
  background: linear-gradient(145deg, #26D52E, #00AD07); /* Lighter green shades */
  border: 1px solid #388e3c; /* Slightly darker border for 3D effect */
  border-radius: 8px; /* Rounded corners for modern look */
  
  /* 3D shading with drop shadow */
  box-shadow: 
    -3px 3px 6px rgba(0, 0, 0, 0.3), /* Subtle drop shadow (bottom-left) */
    inset 2px 2px 4px rgba(255, 255, 255, 0.2), /* Inner highlight for 3D */
    inset -2px -2px 4px rgba(0, 0, 0, 0.4); /* Inner shadow for depth */
  
  /* Smooth transition for hover effects */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
	
}
.echeckinstruct-submit-btn:hover {
	
	
	 transform: translate(-.5px, .5px); /* Slight lift effect */
  box-shadow: 
    -5px 5px 10px rgba(0, 0, 0, 0.4), /* Stronger drop shadow */
    inset 1px 1px 3px rgba(255, 255, 255, 0.3), /* Brighter highlight */
    inset -1px -1px 3px rgba(0, 0, 0, 0.5); /* Deeper inner shadow */
  background: linear-gradient(145deg, #388e3c, #2e7d32); 
	
	
  background-color: #218838;
}

       .div-portrait-message-sig {
                width: 300px;
                height: auto; /* Adjusted to auto */
                line-height: 1.2;
                font-family: Arial, sans-serif;
                font-size: 7px;
                color: #000000;
                position: absolute;
                top: 60px;
                opacity: 1;
                left: 15px;
                text-align: left;
            }
	
	
.echeckinstruct-modal-123 {
  display: block;
  line-height: 2;
  left: 40px;
  font-size: 26px;
  width: 430px;
  height: 200px;
  position: absolute;
  font-family: "ARIALB";
  top: 28px;
  z-index: 6000;
  text-align: left;
  color: #222222;
}
.remote-instruct-modal-123 {
  display: block;
  line-height: 2;
  font-weight: bold;
  font-size: 24px;
  width: 220px;
  height: 50px;
  position: absolute;
  font-family: "ARIALB";
  top: 20px;
  z-index: 1000;
	left: 50px;
  text-align: center;
  color: #000000;
}



.qr-image {
   border-radius: 0px;
  position: absolute;
  height: 140px;
   width: 140px;

  top: 145px;
	 left: 175px;
	z-index: 17500;
	 transform: rotate(90deg);
}


.div-portrait h20 {
	font-family: "ARIAL";
  font-size: 14px;
   border-radius: 0px;
	letter-spacing: -.2px;
  left: 55px;
  height: 160px;
  position: absolute;
width: 190px;
  top: 310px;
	display: flex;
	z-index: 17500;
	text-align: center;
}



.camera-check img {
  font-family: "ARIAL";
  font-size: 12px;
  height: 240px;
  z-index: 17500;
  position: absolute;
  top: 0px;
	
}

.camera-check {
   border-radius: 0px;
  left: 70px;
  height: 270px;
  position: absolute;

  top: -100px;
	display: flex;
	z-index: 17500;
	 transform: rotate(90deg);
}


.aicheck img {
  font-family: "ARIAL";
  font-size: 12px;
  height: 45px;
  z-index: 9500;
  position: absolute;
  top: 0px;
}

.aicheck {
   border-radius: 0px;
  width: 10px;
  height: 300px;
  position: absolute;
  right: 140px;
  top: 385px;
	display: none;
	
}


.echeckinstruct-modal-screen1 img {
  font-family: "ARIAL";
  font-size: 12px;
  height: 360px;
  z-index: 9500;
  position: absolute;
  top: 0px;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.20); /* Drop shadow */
}

.echeckinstruct-modal-screen1 {
   border-radius: 0px;
  width: 160px;
  height: 300px;
  position: absolute;
  left: 80px;
  top: 95px;
	 box-shadow: 4px 2px 4px rgba(0, 0, 0, 0.10); /* Drop shadow */
}

.echeckinstruct-modal-screen1 h1{
 position: absolute;
  display: block;
  font-weight: bold;
	font-family: "ARIAL";
  font-size: 16px;
	width: 158px;
	color: #0038BB;
	letter-spacing: .02em;
	 line-height: 1;
	top:-35px;
	
	text-align: center;
}

.echeckinstruct-modal-screen2 h1{
 position: absolute;
  display: block;
  font-weight: bold;
	font-family: "ARIAL";
  font-size: 16px;
	width: 158px;
	color: #0038BB;
	letter-spacing: .02em;
	 line-height: 1;
	top:-35px;
	
	text-align: center;
}

.echeckinstruct-modal-screen3 h1{
 position: absolute;
  display: block;
  font-weight: bold;
	font-family: "ARIAL";
  font-size: 16px;
	width: 158px;
	color: #0038BB;
	letter-spacing: .02em;
	 line-height: 1;
	top:-35px;
	
	text-align: center;
}

.echeckinstruct-modal-screen2 {

  border-radius: 0px;
  width: 260px;
  height: 260px;
  position: absolute;
  left: 280px;
  top: 180px;
	
}
.echeckinstruct-modal-screen2 img {
  font-family: "ARIAL";
  font-size: 12px;
  height: 300px;
  z-index: 95000;
  position: absolute;
  top: 0px;
}

.echeckinstruct-modal-screen3 {
 
  border-radius: 0px;
  width: 160px;
  height: 290px;
  position: absolute;
  left: 500px;
  top: 180px;
	
}
.echeckinstruct-modal-screen3 img {
  font-family: "ARIAL";
  font-size: 12px;
  height: 300px;
  z-index: 95000;
  position: absolute;
  top: 0px;
}

.echeckinstruct-modal-screen4 {
 
  border-radius: 0px;
  width: 160px;
  height: 260px;
  position: absolute;
  left: 550px;
  top: 200px;
	
}
.echeckinstruct-modal-screen4 img {
  font-family: "ARIAL";
  font-size: 12px;
  height: 380px;
  z-index: 95000;
  position: absolute;
  top: 0px;
}


.echeckinstruct-modal-tryit {
 
  border-radius: 0px;
  width: 300px;
  height: 590px;
  position: absolute;
  left: 740px;
  top: 0px;
	background-color: #0038BB;
	text-align: left;
	align-items: left;
	display: block;
}
.echeckinstruct-modal-tryit h1 {
		text-align: left;
  display: block;
  line-height: 2.2;
  font-family: "ARIAL";
  font-size: 14px;
	
margin-left: 30px;

	margin-top:  20px;
	color: #FFFFFF;
	letter-spacing: .1em;
}
.echeckinstruct-modal-tryit h2 {
		text-align: left;
  display: block;
  font-weight: bold;
	font-family: "ARIALB";
  font-size: 20px;
	letter-spacing: .05em;
	color: #FFFFFF;
	margin-left: 25px;
	 line-height: 1;
	margin-top:  80px;
	
}

.echeckinstruct-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 260px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 360px;
}
.echeckinstruct-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-family: "ARIAL";
  font-size: 11px;
}
.echeckinstruct-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 16px;
}
.echeckinstruct-modal-data h1 {
  display: block;
  line-height: 1.2;
  font-family: "ARIAL";
  font-size: 19px;
}
.echeckinstruct-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 15px;
  font-family: "ARIAL";
}
.echeckinstruct-modal-data {
 
  border-radius: 5px;
  width: 220px;
  height: 100px;
  position: absolute;
  text-align: left;
  top: 70px;
	left: 55px;
	
}


.enter-instruct-modal-data h1 {
  display: block;
  line-height: 1.2;
  font-family: "ARIAL";
  font-size: 18px;
	margin-bottom: -4px;
}
.enter-instruct-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 14px;
  font-family: "ARIAL";
}
.enter-instruct-modal-data {
 
  border-radius: 5px;
  width: 480px;
  height: 100px;
  position: absolute;
  text-align: left;
  top: 85px;
	left: 60px;
	
}


.echeckinstruct-modal-payee {
  padding-left: 10px;
  border-radius: 5px;
  width: 340px;
  height: 380px;
  position: absolute;
  text-align: left;
  top: 60px;
	left:340px;
	background: #EBE9E9;
}



.echeckinstruct-modal-payee label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.echeckinstruct-modal-payee input {
  width: 240px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.echeckinstruct-modal-payee input:focus {
  outline: none;
  border-color: #007bff;
}

.echeckinstruct-modal-first label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.echeckinstruct-modal-first input {
  width: 240px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.echeckinstruct-modal-first input:focus {
  outline: none;
  border-color: #007bff;
}

.echeckinstruct-modal-last label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.echeckinstruct-modal-last input {
  width: 240px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.echeckinstruct-modal-last input:focus {
  outline: none;
  border-color: #007bff;
}

.echeckinstruct-modal-address label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.echeckinstruct-modal-address input {
  width: 240px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.echeckinstruct-modal-address input:focus {
  outline: none;
  border-color: #007bff;
}

.echeckinstruct-modal-city label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.echeckinstruct-modal-city input {
  width: 240px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.echeckinstruct-modal-city input:focus {
  outline: none;
  border-color: #007bff;
}

.echeckinstruct-modal-state label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.echeckinstruct-modal-state input {
  width: 240px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.echeckinstruct-modal-state input:focus {
  outline: none;
  border-color: #007bff;
}

.echeckinstruct-modal-zip label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.echeckinstruct-modal-zip input {
  width: 240px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.echeckinstruct-modal-zip input:focus {
  outline: none;
  border-color: #007bff;
}








.echeckinstruct-form-group {
  margin-bottom: 15px;
}
.echeckinstruct-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.echeckinstruct-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.echeckinstruct-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.echeckinstruct-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.echeckinstruct-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.echeckinstruct-modal-content {
  
	background: linear-gradient(to bottom, #ffffff 0%, #F4F4F4 50%, #E3E3E3 100%);
  padding: 20px;
  width: 620px;
  height: 400px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 46000;
	align-content: center;
	
	align-items: center;
	text-align: center;
}
.echeckinstruct_company_logo {
  height: 24px;
  position: absolute;
  top: 300px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.main_div {
  width: 1200px;
  height: 900px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}
.eCheckmodal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Overlay */
  justify-content: center;
  align-items: center;
  z-index: 6000;
  animation: fadeIn 0.3s ease forwards;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Overlay */
  justify-content: center;
  align-items: center;
  z-index: 72000;
  animation: fadeIn 0.3s ease forwards;
}
.modal-error-content {
  background-color: #FFFFFF;
  ;
  padding-top: 5px;
  width: 90%;
  max-width: 400px;
  position: relative;
  border: 1px solid #373737;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  height: 190px
}
.modal-content {
  background-color: #FFFFFF;
  ;
  padding-top: 5px;
  width: 90%;
  max-width: 400px;
  position: relative;
  border: 1px solid #373737;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  height: 280px
}
.echeckdemo-modal-data_entery {
  
  top: 25px;
  left: 0px;
  width: 980px;
  
  height: 630px;
  position: absolute;
  z-index: 6001;
}
.echeckdemo-modal-content {
  background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 50%, #F3F3F3 100%);
  padding: 20px;
  width: 980px;
  
  height: 680px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 6001;
}
.payment_div {
  width: 900px;
  margin: 0 auto;
  top: 18px;
  position: absolute;
  z-index: 1;
  left: -130px;
  background: #FFFFFF;
}
.button_spacer {
  height: 20px;
}
/* CSS */
.button_sidebar_nav {
  background-color: #607D8B;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  border: none;
  color: #F0F1F5;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  margin-top: 3px;
  margin-bottom: 3px;
  opacity: 1;
  transition: 0.1s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  width: 40px;
  height: 35px;
  font-family: "ARIAL";
}
.button_sidebar_nav:hover {
  background-color: #37474F;
  font-family: "ARIALB";
  font-size: 13px;
  color: #FFC600;
}
.button_sidebar {
  background-color: #607D8B;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  border: none;
  color: #F0F1F5;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  margin-top: 3px;
  margin-bottom: 3px;
  opacity: 1;
  transition: 0.1s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  width: 85px;
  height: 35px;
  font-family: "ARIAL";
}
.button_sidebar:hover {
  background-color: #37474F;
  font-family: "ARIALB";
  font-size: 13px;
  color: #FFC600;
}
.main_entry_check_info {
  width: 100px;
  height: 140px;
  position: absolute;
  top: 310px;
  left: 860px;
  z-index: 65000;
}
.main_entry_check_info check_pages {
  font-family: "ARIAL";
  font-size: 11px;
  color: #030303;
  position: absolute;
  top: 10px;
  left: 10px;
  text-align: center;
  z-index: 5000;
  width: 140px;
}
.main_entry_check_info check_total {
  font-family: "ARIAL";
  font-size: 11px;
  color: #030303;
  position: absolute;
  top: 30px;
  left: 10px;
  text-align: center;
  z-index: 5000;
  width: 140px;
}
.main_entry_check_stats {
  width: 560px;
  height: 30px;
  position: absolute;
  top: 385px;
  left: 190px;
  z-index: 5000;
}
.main_entry_check_stats check_enteredby {
  font-family: "ARIAL";
  font-size: 11px;
  color: #030303;
  position: absolute;
  top: 0px;
  text-align: left;
  z-index: 5000;
  width: 560px;
}
.main_entry_check_stats check_enteredtime {
  font-family: "ARIAL";
  font-size: 11px;
  color: #030303;
  position: absolute;
  top: 00px;
  text-align: left;
  z-index: 5000;
  width: 560px;
}
.main_entry_check_image {
  width: 840px;
  height: 390px;
  position: absolute;
  top: 390px;
  left: 110px;
  z-index: 5001;
}
select:disabled {
  opacity: 1;
}

.signature-check-modal-bg-1 {
  background-color: #FFFFFF;
  top:-10px;
	left: -5px;
  width: 570px;
  height: 260px;
  position: absolute;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 2000;
}



.singnature_demo_img_1 {
  font-family: "ARIAL";
  font-size: 12px;
 
  position: absolute;
  height: 180px;
  z-index: 95000;
  top: 120px;
}


.main_entry_check_image img {
  width: 560px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
  position: absolute;
  z-index: 5000;
  opacity: 0.7;
}
.singnature_demo_img img {
  font-family: "ARIAL";
  font-size: 12px;
  z-index: 95000;
  margin-left: 110px;
  margin-top: 60px;
}
.singnature_demo_img {
  font-family: "ARIAL";
  font-size: 12px;
  display: flex;
  position: absolute;
  z-index: 95000;
}
.main_entry_check_image check_firstname {
  font-family: "ARIAL";
  font-size: 12px;
  color: #030303;
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 5000;
}
.main_entry_check_image check_company {
  font-family: "ARIAL";
  font-size: 10px;
  color: #030303;
  position: absolute;
  top: 40px;
  left: 25px;
  z-index: 5000;
}
.main_entry_check_image check_payee {
  font-family: "ARIAL";
  font-size: 14px;
  color: #030303;
  position: absolute;
  top: 90px;
  left: 40px;
  z-index: 5000;
}
.main_entry_check_image check_routing {
  font-family: 'MICRE13B';
  font-size: 12px;
  color: #030303;
  position: absolute;
  top: 230px;
  left: 80px;
  z-index: 5000;
}
.main_entry_check_image check_amount {
  font-family: "courier-prime";
  font-size: 19px;
  color: #000000;
  position: absolute;
  top: 120px;
  left: 40px;
  z-index: 5000;
}
.main_entry_check_image check_amount_numeric {
  font-family: "ARIAL";
  font-size: 13px;
  color: #000000;
  position: absolute;
  top: 80px;
	text-align: right;
  right: 305px;
  width: 65px;
  height: 14px;
  z-index: 5000;
  padding: 8px;
  background-color: #FBFBFB;
}
input[type=date]::-webkit-calendar-picker-indicator {
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 88px;
  position: absolute;
  right: 0;
  top: 19px;
  width: 16px;
}
.main_entry_check_image check_debitdate {
  font-family: "ARIAL";
  font-size: 12px;
  color: #030303;
  position: absolute;
  top: 45px;
  right: 305px; 
  z-index: 5000;
}
.main_entry_check_image check_check {
  font-family: "ARIAL";
  font-size: 14px;
  color: #D80003;
  position: absolute;
  top: 20px;
  right: 305px;
  z-index: 5000;
}
.main_entry_check_image check_memo {
  font-family: "ARIAL";
  font-size: 9px;
  color: #030303;
  position: absolute;
  top: 173px;
  left: 25px;
  z-index: 5000;
}
.main_entry_check_image check_ref {
  font-family: "ARIAL";
  font-size: 9px;
  color: #030303;
  position: absolute;
  top: 160px;
  left: 25px;
  z-index: 5000;
}
.main_entry_check_image check_bankname {
  font-family: "ARIAL";
  font-size: 10px;
  color: #030303;
  position: absolute;
  top: 25px;
  text-align: center;
  z-index: 5000;
  width: 560px;
}
.main_entry_check_image check_transaction {
  font-family: "ARIAL";
  font-size: 10px;
  color: #030303;
  position: absolute;
  top: 40px;
  text-align: center;
  z-index: 5000;
  width: 560px;
}
.main_entry_check_image check_esig {
  font-family: "SigFont";
  font-size: 22px;
  font-weight: bold;
  color: #0009BD;
  position: absolute;
  top: 150px;
  left: 420px;
  text-align: left;
  z-index: 5000;
  width: 560px;
  cursor: pointer;
  visibility: hidden;
}
.main_entry_check_image check_esig1 {
  font-family: "ARIAL";
  font-size: 12px;
  font-weight: 300;
  color: #C80003;
  position: absolute;
  top: 172px;
  left: 463px;
  text-align: left;
  z-index: 5000;
  width: 560px;
  cursor: pointer;
  visibility: hidden;
}


.signature_demo_small_head_div {
	font-family: "ARIALB";
	color: #000000;
  font-size: 18px;
 
	
	line-height: 1.6;
	
  width: 460px;
  height: 380px;
  position: absolute;
  top: 125px;
  left: 295px;
  z-index: 11500;
}




.signature_demo_button_div {
	font-family: "ARIAL";
	color: #000000;
  font-size: 14px;
  
	padding: 0px;
	line-height: 1.4;
	
  width: 380px;
  height: 380px;
  position: absolute;
  top: 165px;
  left: 300px;
  z-index: 11500;
}
.main_entry_button_div {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 80px;
  left: 800px;
  z-index: 11500;
}
.main_entry_text_phone {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 130px;
  left: 50px;
  z-index: 20;
}
.main_entry_text_phone label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_phone input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 110px;
}
.main_entry_text_address {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 130px;
  left: 180px;
  z-index: 20;
}
.main_entry_text_address label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_address input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 200px;
}
.main_entry_text_last {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 75px;
  left: 250px;
  z-index: 20;
}
.main_entry_text_last label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_last input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 180px;
}
.main_entry_text_first {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 75px;
  left: 50px;
  z-index: 20;
}
.main_entry_text_first label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_first input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 180px;
}
.main_entry_text_company {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 75px;
  left: 450px;
  z-index: 20;
}
.main_entry_text_company label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_company input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 260px;
}
input:focus {
  border: 1px solid #1670BE;
  box-shadow: 0 0 3px #1670BE;
  outline-offset: 0px;
  outline: none;
  background-color: #F4FBFF;
}
.main_entry_text_city {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 130px;
  left: 400px;
  z-index: 20;
}
.main_entry_text_city label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_city input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 130px;
}
.main_entry_text_state select {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 70px;
  height: 28px;
}
.main_entry_text_state {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 130px;
  left: 550px;
  z-index: 20;
}
.main_entry_text_state label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_zip input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 80px;
}
.main_entry_text_zip {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 130px;
  left: 630px;
  z-index: 20;
}
.main_entry_text_zip label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_payee select {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 260px;
  height: 28px;
}
.main_entry_text_payee {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 225px;
  left: 50px;
  z-index: 20;
}
.main_entry_text_payee label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_idnumber input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 120px;
}
.main_entry_text_idnumber {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 225px;
  left: 320px;
  z-index: 20;
}
.main_entry_text_idnumber label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_memo input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 250px;
}
.main_entry_text_memo {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 225px;
  left: 460px;
  z-index: 20;
}
.main_entry_text_memo label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_routing input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 80px;
}
.main_entry_text_routing {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 320px;
  left: 50px;
  z-index: 20;
}
.main_entry_text_routing label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_bank_account input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 160px;
}
.main_entry_text_bank_account {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 320px;
  left: 150px;
  z-index: 20;
}
.main_entry_text_bank_account label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_check input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 90px;
}
.main_entry_text_check {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 320px;
  left: 330px;
  z-index: 20;
}
.main_entry_text_check label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_amount input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 70px;
}
.main_entry_text_amount {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 320px;
  left: 440px;
  z-index: 5000;
}
.main_entry_text_amount label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_debit_date input {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 5px;
  text-decoration: none;
  width: 80px;
}
.main_entry_text_debit_date {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 320px;
  left: 530px;
  z-index: 15000;
}
.main_entry_text_debit_date label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.main_entry_text_check_type select {
  margin-top: 3px;
  border-width: thin;
  display: block;
  font-family: "ARIAL";
  font-size: 14px;
  padding: 1px;
  text-decoration: none;
  width: 90px;
  height: 28px;
}
.main_entry_text_check_type {
  width: 100px;
  height: 80px;
  position: absolute;
  top: 320px;
  left: 630px;
  z-index: 6000;
}
.main_entry_text_check_type label {
  display: block;
  font-family: "ARIAL";
  font-size: 10px;
  color: black;
  text-align: left;
}
.signature-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 70px;
}
.signature-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.signature-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.signature-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.signature-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.signature-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.signature-form-group {
  height: 100px;
margin-top:  0px;
 width: 220px;
z-index: 5000;
  text-align: left;
}
.signature-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
	 text-align: left;
	
	width: 280px;
	color: #000000
}
.signature-form-group input {
	
  width: 210px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.signature-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.signature-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.signature-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.signature-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  width: 280px;
  height: 400px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
.signature_company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.api-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 70px;
}
.api-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.api-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.api-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.api-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.api-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.api-form-group {
  margin-bottom: 15px;
}
.api-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.api-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.api-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.api-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.api-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.api-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  width: 280px;
  height: 450px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 46000;
}
.api_company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.remote-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 70px;
}
.remote-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.remote-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.remote-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.remote-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.remote-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.remote-form-group {
  margin-bottom: 15px;
}
.remote-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.remote-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.remote-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.remote-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.remote-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.remote-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  width: 280px;
  height: 300px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  z-index: 46000;
}



.remote_company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.echeckdemo-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 70px;
}
.echeckdemo-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.echeckdemo-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.echeckdemo-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.echeckdemo-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.echeckdemo-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.echeckdemo-form-group {
  margin-bottom: 15px;
}
.echeckdemo-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.echeckdemo-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.echeckdemo-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.echeckdemo-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.echeckdemo-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.echeckdemo_company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.main_desription_payment_info {
  width: 840px;
  height: 40px;
  position: absolute;
  top: 190px;
  left: 40px;
  z-index: 20;
}
data_description {
  padding-top: 8px;
  padding-left: 2px;
  position: absolute;
  font-family: "ERASBD";
  font-size: 13px;
  left: 0px;
  height: 25px;
  width: 320px;
  color: #576063;
  z-index: 500;
}
.save_amount {
  width: 100%;
  position: absolute;
  top: -10px;
  font-family: Arial, sans-serif;
  font-size: 44px;
  color: #009703;
  z-index: 9000;
  text-align: center;
}
.save_title {
  width: 100%;
  position: absolute;
  top: 25px;
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #000000;
  z-index: 9000;
  text-align: center
}
.save_foot {
  width: 100%;
  position: absolute;
  top: 175px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #000000;
  z-index: 9000;
  height: 14px;
  text-align: center
}
.caculator-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 180px;
  position: absolute;
  left: 40px;
  top: 10px;
}
.caculator-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.caculator-modal-instructions h2 {
  display: block;
  font-weight: bolder;
  font-size: 72px;
  font-family: "ERASBD";
}
.caculator-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.caculator-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.caculator-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.caculator-form-group {
  margin-bottom: 15px;
}
.caculator-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.caculator-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.caculator-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.caculator-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.caculator-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.main_desription_personal_info {
  width: 240px;
  height: 400px;
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 20;
}
.caculator-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  border: 1px solid #373737;
  width: 330px;
  height: 160px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.caculator {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.caculator_company_logo {
  height: 20px;
  position: absolute;
  top: 380px;
  left: 220px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.form-group_big {
  margin-bottom: 15px;
}
.form-group_big label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.form-group_big input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 18px;
}
.form-group_big input:focus {
  outline: none;
  border-color: #007bff;
}
.error-banner {
  width: 100%; /* Full width of the parent div */
  height: 0px; /* Fixed height */
  border-top: 6px solid #B60000;
  color: white;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it stays above other content */
}
.error-banner::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #B60000; /* Base of the triangle (red color) */
}
.banner {
  width: 100%; /* Full width of the parent div */
  height: 0px; /* Fixed height */
  border-top: 6px solid #00B609;
  color: white;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it stays above other content */
}
.banner::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #00B609; /* Base of the triangle (red color) */
}
.banner h1 {
  display: block;
  line-height: .5;
  top: 15px;
  left: 25px;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  color: #000000;
}
.pricing_caculator {
  width: 940px;
  height: 105px;
  left: 50px;
  top: 270px;
  display: block;
  border-top: 3px solid #6B6B6B;
  background-color: #FFFDEB;
  position: absolute; /* To position the triangle relative to this div */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.pricing_caculator::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 0px solid transparent; /* Left side of the triangle */
  border-right: 0px solid transparent; /* Right side of the triangle */
  border-top: 0px solid #6B6B6B; /* Base of the triangle (red color) */
}
.pricing-inputs {
  width: 320px;
  height: 500px;
  position: absolute;
  top: 250px;
  left: 70px;
  text-align: left;
  display: flex;
  font-size: 15px;
  color: #4E4E4E;
  line-height: 1.5;
  letter-spacing: 0px;
}
.footer-container copyright {
  width: 300px;
  height: 40px;
  position: absolute;
  top: 75px;
  left: 50px;
  font-family: "ARIAL";
  font-size: 11px;
}
.footer_company_logo {
  height: 24px;
  position: absolute;
  bottom: 10px;
  left: 1020px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.develop-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 70px;
}
.develop-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.develop-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.develop-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.develop-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.develop-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.develop-form-group {
  margin-bottom: 15px;
}
.develop-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.develop-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.develop-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.develop-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.develop-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.develop-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  border: 1px solid #373737;
  width: 600px;
  height: 300px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.develop_company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.pricing-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 70px;
}
.pricing-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.pricing-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.pricing-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.pricing-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.pricing-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.pricing-form-group {
  margin-bottom: 15px;
}
.pricing-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.pricing-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.pricing-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.pricing-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.pricing-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.pricing-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  border: 1px solid #373737;
  width: 600px;
  height: 300px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.pricing_company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.product-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 70px;
}
.product-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.product-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.product-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.product-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.product-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.product-form-group {
  margin-bottom: 15px;
}
.product-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.product-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.product-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.product-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.product-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.product-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  border: 1px solid #373737;
  width: 600px;
  height: 300px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.product_company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.affiliate-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 70px;
}
.affiliate-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.affiliate-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.affiliate-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.affiliate-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.affiliate-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.affiliate-form-group {
  margin-bottom: 15px;
}
.affiliate-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.affiliate-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.affiliate-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.affiliate-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.affiliate-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.affiliate-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  border: 1px solid #373737;
  width: 600px;
  height: 300px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.affiliate_company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.contact_company_logo {
  height: 24px;
  position: absolute;
  top: 18px;
  left: 450px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.contact-submit-btn {
  width: 200px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  left: 520px;
  top: 400px;
  position: absolute;
}
.contact-submit-btn:hover {
  background-color: #218838;
}
.contact-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 40px;
  top: 70px;
}
.contact-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.contact-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 14px;
}
.contact-modal-data h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 11px;
}
.contact-modal-data h2 {
  display: block;
  font-weight: normal;
  font-size: 14px;
}
.contact-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.contact-form-group {
  margin-bottom: 15px;
}
.contact-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.contact-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.contact-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.contact-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.contact-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.contact-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  border: 1px solid #373737;
  width: 600px;
  height: 300px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.scale-element {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  border-radius: 10px; /* Rounded corners for modern look */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; /* Multiple transitions */
  cursor: pointer; /* Indicates interactivity */
  opacity: 0.9;
}
.scale-element:hover {
  transform: scale(1.3); /* Scales to 130% */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds shadow for depth */
  opacity: 1; /* Full opacity on hover */
}
/* Responsive design */
@media (max-width: 600px) {
  .scale-element {
    width: 100px;
    height: 100px;
    font-size: 14px;
  }
}
.compare input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 26px;
}
/* Classes for the slide-in effects */
.slide-in-top {
  transform: translateY(-50%); /* Initial state */
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.slide-in-left {
  transform: translateX(-60%); /* Initial state */
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.slide-in-right {
  transform: translateX(30%); /* Initial state */
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
/* Active state when element is visible */
.slide-in-top.visible, .slide-in-left.visible, .slide-in-right.visible {
  transform: translateX(0);
  opacity: 1;
}
.collapsible {
  max-height: 30px;
  overflow: hidden;
  transition: max-height 0.0s ease-out;
  background-color: #2FBFE4;
}
.collapsible.active {
  width: 100%;
  height: 950px;
  position: relative;
  padding-top: 600px;
  background-color: #E42F32;
}
.data_entry {
  width: 50px;
  height: 600px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
}
.data_entry p {
  position: absolute;
  top: 140px;
  right: -90px;
  font-family: "ERASBD";
  font-size: 70px;
  background: -webkit-linear-gradient(#EDEDED, #E3E3E3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  writing-mode: vertical-rl;
}
.city_input {
  max-width: 250px;
  display: flex;
  position: absolute;
  top: 170px;
}
.state_input {
  max-width: 50px;
  display: flex;
  position: absolute;
  top: 170px;
  left: 280px;
}
.zip_input {
  max-width: 80px;
  display: flex;
  position: absolute;
  top: 170px;
  left: 340px;
}
.select_input {
  max-width: 260px;
  display: flex;
  position: absolute;
  top: 240px;
}
.revenue_input {
  max-width: 130px;
  display: flex;
  position: absolute;
  top: 240px;
  left: 290px;
}
.city_label {
  max-width: 240px;
  display: flex;
  position: absolute;
  top: 150px;
}
.state_label {
  max-width: 60px;
  display: flex;
  position: absolute;
  top: 150px;
  left: 280px;
}
.zip_label {
  max-width: 50px;
  display: flex;
  position: absolute;
  top: 150px;
  left: 340px;
}
.select_label {
  max-width: 180px;
  display: flex;
  position: absolute;
  top: 220px;
}
.revenue_label {
  max-width: 200px;
  display: flex;
  position: absolute;
  top: 220px;
  left: 290px;
}
.progress_1_green {
  background-color: #08CD00;
  width: 190px;
  height: 3px;
  position: absolute;
  left: 25px;
  bottom: 20px;
  z-index: 7500;
}
.progress_2_green {
  background-color: #08CD00;
  width: 190px;
  height: 3px;
  position: absolute;
  left: 225px;
  bottom: 20px;
  z-index: 7500;
}
.progress_3_green {
  background-color: #08CD00;
  width: 190px;
  height: 3px;
  position: absolute;
  left: 425px;
  bottom: 20px;
  z-index: 7500;
}
.progress_4_green {
  background-color: #08CD00;
  width: 190px;
  height: 3px;
  position: absolute;
  left: 625px;
  bottom: 20px;
  z-index: 7500;
}
.progress_1_gray {
  background-color: #D9D9D9;
  width: 190px;
  height: 3px;
  position: absolute;
  left: 25px;
  bottom: 20px;
  z-index: 7500;
}
.progress_2_gray {
  background-color: #D9D9D9;
  width: 190px;
  height: 3px;
  position: absolute;
  left: 225px;
  bottom: 20px;
  z-index: 7500;
}
.progress_3_gray {
  background-color: #D9D9D9;
  width: 190px;
  height: 3px;
  position: absolute;
  left: 425px;
  bottom: 20px;
  z-index: 7500;
}
.progress_4_gray {
  background-color: #D9D9D9;
  width: 190px;
  height: 3px;
  position: absolute;
  left: 625px;
  bottom: 20px;
  z-index: 7500;
}
.progress_1_green:hover {
  transition: background-color 0.3s;
  cursor: pointer;
  background-color: #0A9300;
}
.progress_2_green:hover {
  transition: background-color 0.3s;
  cursor: pointer;
  background-color: #0A9300;
}
.progress_3_green:hover {
  transition: background-color 0.3s;
  cursor: pointer;
  background-color: #0A9300;
}
.progress_4_green:hover {
  transition: background-color 0.3s;
  cursor: pointer;
  background-color: #0A9300;
}
.progress_1_gray:hover {
  transition: background-color 0.3s;
  cursor: pointer;
  background-color: #949494;
}
.progress_2_gray:hover {
  transition: background-color 0.3s;
  cursor: pointer;
  background-color: #949494;
}
.progress_3_gray:hover {
  transition: background-color 0.3s;
  cursor: pointer;
  background-color: #949494;
}
.progress_4_gray:hover {
  transition: background-color 0.3s;
  cursor: pointer;
  background-color: #949494;
}
.billing-submit-btn {
  width: 200px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  left: 520px;
  top: 400px;
  position: absolute;
}
.billing-submit-btn:hover {
  background-color: #218838;
}
.billing-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 400px;
  position: absolute;
  left: 35px;
  top: 80px;
}
.billing-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 24px;
  font-style: italic;
}
.billing-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.billing-modal-data {
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  height: 300px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.billing-form-group {
  margin-bottom: 15px;
}
.billing-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.billing-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.billing-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.billing-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.billing-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.billing-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  width: 800px;
  height: 500px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.payee-submit-btn {
  width: 200px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  left: 520px;
  top: 400px;
  position: absolute;
}
.payee-submit-btn:hover {
  background-color: #218838;
}
.payee-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 400px;
  position: absolute;
  left: 35px;
  top: 80px;
}
.company-modal-instructions_1_off {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 200px;
  height: 20px;
  position: absolute;
  left: 25px;
  top: 495px;
  z-index: 8000;
}
.company-modal-instructions_1_off h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 14px;
  font-style: italic;
  color: #D9D9D9;
}
.company-modal-instructions_1_off h1:hover {
  cursor: pointer;
  color: #929292;
}
.company-modal-instructions_2_off {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 200px;
  height: 30px;
  position: absolute;
  left: 225px;
  top: 495px;
  z-index: 7000;
}
.company-modal-instructions_2_off h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 14px;
  font-style: italic;
  color: #D9D9D9;
}
.company-modal-instructions_2_off h1:hover {
  cursor: pointer;
  color: #929292;
}
.company-modal-instructions_3_off {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 200px;
  height: 20px;
  position: absolute;
  left: 425px;
  top: 495px;
  z-index: 8000;
}
.company-modal-instructions_3_off h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 14px;
  font-style: italic;
  color: #D9D9D9;
}
.company-modal-instructions_3_off h1:hover {
  cursor: pointer;
  color: #929292;
}
.company-modal-instructions_4_off {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 200px;
  height: 20px;
  position: absolute;
  left: 625px;
  top: 495px;
  z-index: 8000;
}
.company-modal-instructions_4_off h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 14px;
  font-style: italic;
  color: #D9D9D9;
}
.company-modal-instructions_4_off h1:hover {
  cursor: pointer;
  color: #929292;
}
.company-modal-instructions_1_on {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 200px;
  height: 20px;
  position: absolute;
  left: 25px;
  top: 495px;
  z-index: 8000;
}
.company-modal-instructions_1_on h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 14px;
  font-style: italic;
}
.company-modal-instructions_1_on h1:hover {
  cursor: pointer;
}
.company-modal-instructions_2_on {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 200px;
  height: 20px;
  position: absolute;
  left: 225px;
  top: 495px;
  z-index: 8000;
}
.company-modal-instructions_2_on h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 14px;
  font-style: italic;
}
.company-modal-instructions_2_on h1:hover {
  cursor: pointer;
}
.company-modal-instructions_3_on {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 200px;
  height: 20px;
  position: absolute;
  left: 425px;
  top: 495px;
  z-index: 8000;
}
.company-modal-instructions_3_on h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 14px;
  font-style: italic;
}
.company-modal-instructions_3_on h1:hover {
  cursor: pointer;
}
.company-modal-instructions_4_on {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 200px;
  height: 20px;
  position: absolute;
  left: 625px;
  top: 495px;
  z-index: 8000;
}
.company-modal-instructions_4_on h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 14px;
  font-style: italic;
}
.company-modal-instructions_4_on h1:hover {
  cursor: pointer;
}
.payee-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.payee-modal-data {
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  height: 300px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.payee-form-group {
  margin-bottom: 15px;
}
.payee-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.payee-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.payee-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.payee-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.payee-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.payee-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  width: 800px;
  height: 500px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.user-submit-btn {
  width: 200px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  left: 520px;
  top: 400px;
  position: absolute;
}
.user-submit-btn:hover {
  background-color: #218838;
}
.user-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 400px;
  position: absolute;
  left: 35px;
  top: 80px;
}
.user-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 24px;
  font-style: italic;
}
.user-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.user-modal-data {
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  height: 300px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.user-form-group {
  margin-bottom: 15px;
}
.user-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.user-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.user-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.user-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.user-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.user-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  width: 800px;
  height: 500px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.code-submit-btn {
  width: 130px;
  padding: 10px;
  margin-left: 135px;
  margin-right: 135px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  top: 90px;
  position: relative;
	z-index: 75000;
}
.code-submit-btn:hover {
  background-color: #218838;
}
.code-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 400px;
  height: 180px;
  position: absolute;
  top: 30px;
}
.code-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 16px;
}
.code-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.code-modal-data {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 220px;
  height: 220px;
  position: absolute;
  left: 400px;
  top: 70px;
}
.code-form-group {
  margin-bottom: 15px;
	
}
.code-modal-instructions label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
  margin-left: 125px;
  margin-right: 125px;
  width: 150px;
}
.code-modal-instructions input {
  margin-left: 135px;
  margin-right: 135px;
  width: 130px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 24px;
  text-align: center;
}
.code-modal-instructions input:focus {
  outline: none;
  border-color: #007bff;
}
.code-modal-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.code-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.code-modal-content {
  background-color: #FFFFFF;
  width: 400px;
  height: 200px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  align-content: center;
  text-align: center;
	
}
.company-submit-btn {
  width: 160px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  left: 60px;
  top: 200px;
  position: absolute;
}
.company-submit-btn:hover {
  background-color: #218838;
}
.company-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 280px;
  height: 400px;
  position: absolute;
  left: 35px;
  top: 80px;
}
.company-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 24px;
  font-style: italic;
}
.company-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.company-modal-data {
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  height: 300px;
  position: absolute;
  left: 340px;
  top: 70px;
}
.company-form-group {
  margin-bottom: 10px;
}
.company-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.company-form-group input {
  width: 400px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.company-form-group select {
  width: 400px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.company-form-group select:focus {
  outline: none;
  border-color: #007bff;
}
.company-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.company-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.company-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.company-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  width: 800px;
  height: 500px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#ex1 P {
  font-size: 14px !important;
  font-family: "ARIALB";
  color: #000000;
  top: 5px;
}
#ex1 input {
  font-size: 26px !important;
  font-family: "ARIAL";
  color: #1A1A1A;
  height: 30px;
  width: 25px;
  border-radius: 5px;
  border-color: #3E3E3E;
  border-width: thin;
  text-align: center;
  left: 10px;
  position: inherit;
}
#ex1 {
  background-color: #FFFFFF;
  height: 160px;
  width: 550px;
}
#ex3_circle {
  background: #B30000;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 7px;
  opacity: .4;
  cursor: pointer;
}
#ex3_circle:hover {
  background: #830101;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 7px;
  opacity: .8;
  cursor: pointer;
}
#ex3 {
  border-left: 5px solid #B30000;
  background-color: #FFFFFF;
  height: 70px;
  width: 400px;
  z-index: 75000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#ex3_close {
  border-top-right-radius: 8px solid #000000;
  background-color: #C5C5C5;
  height: 25px;
  width: 25px;
  right: 0px;
  top: 0px;
  position: absolute;
  font-family: "ARIALB";
  color: #E5E5E5;
}
.rcircle {
  position: relative;
}
.txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 15px !important;
  font-family: "ARIALB";
  color: #FCFCFC;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ex3 txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 15px !important;
  font-family: "ARIALB";
  color: #FCFCFC;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ex3_close:hover {
  font-size: 15px !important;
  border-top-right-radius: 8px solid #000000;
  background-color: #2B2B2B;
  height: 25px;
  width: 25px;
  right: 0px;
  top: 0px;
  position: absolute;
  cursor: pointer;
}
#ex3:after {
  content: "";
  border-color: transparent transparent transparent #B30000;
  border-style: solid;
  border-width: 10px;
  width: 0;
  height: 0;
  position: absolute;
  bottom: 25px;
  left: -2px
}
#ex3 P {
  font-size: 15px !important;
  font-family: "ARIAL";
  color: #212121;
  position: absolute;
  top: 11px;
  left: 25px;
}
.bannerxx {
  width: 100%; /* Full width of the parent div */
  height: 50px; /* Fixed height */
  background-image: linear-gradient(to right, #EF2E31, #393939);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: absolute; /* Fix to top of container */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it stays above other content */
}
.echeck-demo-submit-btn {
  width: 200px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  left: 520px;
  top: 400px;
  position: absolute;
}
.echeck-demo-btn:hover {
  background-color: #218838;
}
.signup-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 400px;
  position: absolute;
  left: 40px;
  top: 80px;
}
.signup-submit-btn {
  width: 200px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  left: 520px;
  top: 400px;
  position: absolute;
}
.signup-submit-btn:hover {
  background-color: #218838;
}
.signup-modal-instructions {
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 300px;
  height: 400px;
  position: absolute;
  left: 40px;
  top: 80px;
}
.bannerxxx h1 {
  display: block;
  line-height: .5;
  top: 15px;
  left: 25px;
  font-weight: bold;
  font-size: 18px;
  position: absolute;
}
.signup-modal-instructions h1 {
  display: block;
  line-height: .5;
  font-weight: bold;
  font-size: 14px;
}
.signup-modal-instructions h2 {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
.signup-modal-data {
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 5px;
  width: 360px;
  height: 300px;
  position: absolute;
  left: 330px;
  top: 70px;
}
.signup-form-group {
  margin-bottom: 15px;
}
.signup-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
.signup-form-group input {
  width: 360px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.signup-form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.signup-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.signup-modal-header h5 {
  margin: 0;
  font-size: 20px;
}
.signup-modal-content {
  background-color: #FFFFFF;
  padding: 20px;
  border: 1px solid #373737;
  width: 800px;
  height: 500px;
  position: relative;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.toggle-password {
  position: absolute;
  right: 30px;
  top: 160px;
  cursor: pointer;
  user-select: none;
}

.products-container {
  top: 20px;
  width: 100%;
  height: 1450px;
  position: relative;
  display: flex;
}
.pricing-container {
  top: 0px;
  width: 100%;
  height: 500px;
  position: relative;
}
.affiliate-container {
  top: 0px;
  width: 100%;
  height: 500px;
  position: relative;
}
.footer-container {
  top: 0px;
  width: 100%;
  height: 80px;
  position: relative;
}
.api-container {
  top: 0px;
  width: 100%;
  height: 500px;
  position: relative;
}
.products-echeck-container {
  z-index: 1000;
  top: 60px;
  width: 950px;
  left: 60px;
  height: 1200px;
  position: absolute;
  display: block;
}

.vertical-line-easypay {
	position: absolute;
  width: 2px;                 /* thickness of the line */
  height: 130px;              /* height of the line */
  background-color: #ccc;     /* color of the line */
  margin: 0 20px;  
	top:90px;
	left:370px;/* horizontal spacing */
}


.products-remote-container {
  top: 400px;
  width: 950px;
  left: 60px;
  height: 300px;
  position: absolute;
  display: block;
  ;
}
.products-signature-container {
  top: 740px;
  width: 950px;
  left: 60px;
  height: 300px;
  position: absolute;
  display: block;
}
.products-api-container {
  top: 1080px;
  width: 950px;
  left: 60px;
  height: 300px;
  position: absolute;
  display: block;
}
@keyframes shake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-3px, 0);
  }
  50% {
    transform: translate(3px, 0);
  }
  75% {
    transform: translate(-3px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.products-api-headline {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 40px;
  left: 430px;
  text-align: left;
  font-family: "ARIALB";
  font-size: 24px;
  color: #373737;
  line-height: 1;
  letter-spacing: -1px;
}
.products-api-image {
    height: 60px;
  position: absolute;
  z-index: 1001;
  top: 70px;
  left: 90px;
display: flex;
	width: 280px;
	
}
.products-api-text {
  width: 460px;
  height: 500px;
  position: absolute;
  top: 70px;
  left: 430px;
  text-align: left;
  font-size: 15px;
  color: #4E4E4E;
  line-height: 1.5;
  letter-spacing: 0px;
}
.products-signature-headline {
  width: 500px;
  height: 200px;
  position: absolute;
  top: 40px;
  left: 430px;
  text-align: left;
  font-family: "ARIALB";
  font-size: 24px;
  color: #373737;
  line-height: 1;
  letter-spacing: -1px;
}
.products-signature-image {
    height: 60px;
  position: absolute;
  z-index: 1001;
  top: 70px;
  left: 90px;
display: flex;
	width: 280px;
}
.products-signature-text {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 70px;
  left: 430px;
  text-align: left;
  font-size: 15px;
  color: #4E4E4E;
  line-height: 1.5;
  letter-spacing: 0px;
}
.products-remote-headline {
  width: 480px;
  height: 200px;
  position: absolute;
  top: 40px;
  left: 430px;
  text-align: left;
  font-family: "ARIALB";
  font-size: 24px;
  color: #373737;
  line-height: 1;
  letter-spacing: -1px;
}
.products-remote-image {
    height: 60px;
  position: absolute;
  z-index: 1001;
  top: 70px;
  left: 90px;
display: flex;
	width: 280px;
}
.products-remote-text {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 70px;
  left: 430px;
  text-align: left;
  font-size: 15px;
  color: #4E4E4E;
  line-height: 1.5;
  letter-spacing: 0px;
}
.products-checks-headline {
  width: 500px;
  height: 200px;
  position: absolute;
  top: 40px;
  left: 430px;
  text-align: left;
  font-family: "ARIALB";
  font-size: 24px;
  color: #373737;
  line-height: 1;
  letter-spacing: -1px;
}
.products-checks-image {
    height: 60px;
  position: absolute;
  z-index: 1001;
  top: 70px;
  left: 90px;
display: flex;
	width: 280px;
}
.products-checks-text {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 70px;
  left: 430px;
  text-align: left;
  font-size: 15px;
  color: #4E4E4E;
  line-height: 1.5;
  letter-spacing: 0px;
}
.products-headline {
  width: 800px;
  height: 200px;
  position: absolute;
  top: 40px;
  left: 40px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 32px;
  color: #151515;
  line-height: 1;
  letter-spacing: -1px;
}
.all-products-headline {
  width: 900px;
  height: 200px;
  position: absolute;
  top: 25px;
  left: 40px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 34px;
  color: #000000;
  line-height: 1;
  letter-spacing: -1px;
}
.echeck-products-headline {
  width: 800px;
  height: 200px;
  position: absolute;
  top: -28px;
  left: 15px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 20px;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -.2px;
}

.echeck-demo-label {
  width: 800px;
  height: 200px;
  position: absolute;
  top: 170px;
  left: 20px;
  text-align: left;
  display: flex;
  font-family: "ARIAL";
  font-size: 12px;
  color: #000000;
  line-height: 1;
  letter-spacing: .2px;
}



.remote-pay-products-headline {
  width: 800px;
  height: 200px;
  position: absolute;
  top: -28px;
  left: 15px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 20px;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -.2px;
}
.signature-products-headline {
  width: 800px;
  height: 200px;
  position: absolute;
  top: -28px;
  left: 15px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 20px;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -.2px;
}
.api-products-headline {
  width: 800px;
  height: 200px;
  position: absolute;
  top: -28px;
  left: 15px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 20px;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -.2px;
}
.products-text {
  width: 400px;
  height: 500px;
  position: absolute;
  top: 220px;
  left: 100px;
  text-align: right;
  display: flex;
  font-family: "ARIAL";
  font-size: 14px;
  color: white;
}
.pricing-headline {
  width: 800px;
  height: 200px;
  position: absolute;
  top: 40px;
  left: 40px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 30px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
  transform: translateX(-30%); /* Start off-screen to the left */
  transition: transform 0.4s ease-in-out; /* Smooth transition for sliding */
}
.pricing-sub-headline {
  width: 800px;
  height: 200px;
  position: absolute;
  top: 240px;
  left: 50px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 22px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.echeck-compare-headline {
  width: 200px;
  height: 200px;
  position: absolute;
  top: -35px;
  left: 5px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 20px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.echeck-compare-amount-head {
  width: 90px;
  height: 200px;
  position: absolute;
  top: 35px;
  left: 25px;
  display: flex;
  font-family: "ARIAL";
  font-size: 12px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.echeck-compare-amount-text {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 55px;
  left: 25px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 18px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.echeck-compare-trans-head {
  width: 90px;
  height: 200px;
  position: absolute;
  top: 105px;
  left: 25px;
  display: flex;
  font-family: "ARIAL";
  font-size: 12px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.echeck-compare-trans-text {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 125px;
  left: 25px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 18px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.echeck-compare-merchant-fee-head {
  width: 90px;
  height: 200px;
  position: absolute;
  top: 175px;
  left: 25px;
  display: flex;
  font-family: "ARIAL";
  font-size: 13px;
  color: #333333;
  line-height: 1;
}
.echeck-compare-merchant-fee-text {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 195px;
  left: 25px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 18px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.echeck-compare-total-head {
  width: 90px;
  height: 200px;
  position: absolute;
  top: 245px;
  left: 25px;
  display: flex;
  font-family: "ARIALB";
  font-size: 16px;
  color: #333333;
  line-height: 1;
}
.echeck-compare-total-text {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 265px;
  left: 25px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 26px;
  color: #027212;
  line-height: 1;
  letter-spacing: -1px;
}
.card-compare-headline {
  width: 200px;
  height: 200px;
  position: absolute;
  top: -35px;
  left: 5px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 20px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.card-compare-amount-head {
  width: 90px;
  height: 200px;
  position: absolute;
  top: 35px;
  left: 25px;
  display: flex;
  font-family: "ARIAL";
  font-size: 12px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.card-compare-amount-text {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 55px;
  left: 25px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 18px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.card-compare-trans-head {
  width: 90px;
  height: 200px;
  position: absolute;
  top: 105px;
  left: 25px;
  display: flex;
  font-family: "ARIAL";
  font-size: 12px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.card-compare-trans-text {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 125px;
  left: 25px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 18px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.card-compare-merchant-fee-head {
  width: 90px;
  height: 200px;
  position: absolute;
  top: 175px;
  left: 25px;
  display: flex;
  font-family: "ARIAL";
  font-size: 13px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.card-compare-merchant-fee-text {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 195px;
  left: 25px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 18px;
  color: #333333;
  line-height: 1;
  letter-spacing: -1px;
}
.card-compare-total-head {
  width: 90px;
  height: 200px;
  position: absolute;
  top: 245px;
  left: 25px;
  display: flex;
  font-family: "ARIALB";
  font-size: 16px;
  color: #333333;
  line-height: 1;
}
.card-compare-total-text {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 265px;
  left: 25px;
  text-align: left;
  display: flex;
  font-family: "ARIALB";
  font-size: 26px;
  color: #720101;
  line-height: 1;
  letter-spacing: -1px;
}
.pricing-text {
  width: 450px;
  height: 500px;
  position: absolute;
  top: 90px;
  left: 50px;
  text-align: left;
  display: flex;
  font-size: 15px;
  color: #4E4E4E;
  line-height: 1.5;
  letter-spacing: 0px;
}
.echeck_pricing {
  width: 180px;
  height: 350px;
  left: 690px;
  top: 100px;
  display: block;
  border-top: 3px solid #459200;
  background-color: #FFFFFF;
  position: absolute; /* To position the triangle relative to this div */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.echeck_pricing::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #459200; /* Base of the triangle (red color) */
}
.echeck_remote_pricing {
  width: 180px;
  height: 350px;
  left: 900px;
  top: 100px;
  border-top: 3px solid #B00808;
  background-color: #FFFFFF;
  position: absolute; /* To position the triangle relative to this div */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.echeck_remote_pricing::before {
  content: '';
  position: absolute;
  top: -2px; /* Position above the div */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 0;
  height: 0;
  border-left: 12px solid transparent; /* Left side of the triangle */
  border-right: 12px solid transparent; /* Right side of the triangle */
  border-top: 12px solid #B00808; /* Base of the triangle (red color) */
}
.rotated-gt {
  display: inline-block;
  transform: rotate(90deg); /* Rotates the > 90 degrees clockwise */
}
.slide-2-image {
  height: 440px;
  position: absolute;
  top: 0px;
  left: 00px;
  text-align: left;
  display: flex;
  font-size: 16px;
  color: white;
}
.sign-up-text {
  width: 260px;
  height: 30px;
  position: absolute;
  top: 451px;
  left: 840px;
  text-align: left;
  display: flex;
  font-family: "ARIAL";
  font-size: 14px;
  color: #000000;
  background-color: #FFFFFF;
   border: 1px solid #8E8E8E;
  z-index: 8500;
  border-radius: 5px;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.10); /* Drop shadow */
  padding-left: 15px;
}
.ECheck-demo-text {
  width: 260px;
  height: 29px;
  position: absolute;
  top: 189px;
  left: 20px;
  text-align: left;
  display: flex;
  font-family: "ARIAL";
  font-size: 14px;
  color: #000000;
  background-color: #FFFFFF;
  border: 1px solid #646464;
  z-index: 5000;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-left: 15px;
}





.echeck-demo-button {
  width: 80px;
  height: 34px;
  position: absolute;
  top: 188px;
  left: 260px;
  display: flex;
  font-family: "ARIAL";
  font-size: 13px;
  color: #FFFFFF;
  background-color: #11A800;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 5020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); /* Drop shadow */
}
.echeck-demo-button:hover {
  width: 80px;
  height: 34px;
  position: absolute;
  top: 188px;
  left: 260px;
  cursor: pointer;
  display: flex;
  font-family: "ARIAL";
  font-size: 12px;
  color: #FFFFFF;
  background-color: #096000;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 5020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
}
.caculate-button {
  width: 95px;
  height: 32px;
  position: absolute;
  top: 70px;
  left: 400px;
  display: flex;
  font-family: "ARIAL";
  font-size: 13px;
  color: #FFFFFF;
  background-color: #11A800;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 5020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); /* Drop shadow */
}
.caculate-button:hover {
  width: 95px;
  height: 32px;
  position: absolute;
  top: 70px;
  left: 400px;
  cursor: pointer;
  display: flex;
  font-family: "ARIAL";
  font-size: 12px;
  color: #FFFFFF;
  background-color: #096000;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 5020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
}
.sign-up-button {

  width: 155px;
  height: 45px;
  position: absolute;
  top: 445px;
  left: 690px;
  display: flex;
  font-family: "ARIAL";
  font-size: 15px;
  color: #FFFFFF;
  background-color: #11A800;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 8500;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); /* Drop shadow */
}
.sign-up-button:hover {
  width: 155px;
  height: 45px;
  position: absolute;
  top: 445px;
  left: 690px;
  cursor: pointer;
  display: flex;
  font-family: "ARIAL";
  font-size: 15px;
  color: #FFFFFF;
  background-color: #096000;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 8500;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
}
.sign_company_logo_code {
  height: 24px;
  position: absolute;
  top: 270px;
  left: 190px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.sign_company_logo {
  height: 24px;
  position: absolute;
  top: 22px;
  left: 650px;
  text-align: right;
  display: flex;
  font-size: 16px;
  color: white;
}
.company_logo {
  height: 24px;
  position: absolute;
  top: 27px;
  left: 20px;
  text-align: left;
  display: flex;
  font-size: 16px;
  color: white;
}
.slide-1-image-no-shadow {
  height: 600px;
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  display: flex;
  font-size: 16px;
  color: white;
}
.slide-2-image-no-shadow {
  height: 773px;
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  display: flex;
  font-size: 16px;
  color: white;
	transform: scaleX(-1);
}

.slide-1-text_background {
  height: 600px;
	width: 545px;
  position: absolute;
  top: 0px;
  left: 655px;
  text-align: left;
  display: flex;
  background-color: #FFFFFF;
  font-size: 16px;
 
	z-index: 2000;
}

.slide-1-image {
  height: 400px;
  position: absolute;
  top: 60px;
  left: 30px;
  text-align: left;
  display: flex;
  
  font-size: 16px;
  color: white;
}
.slide-1-logo {
  height: 60px;
  position: absolute;
  top: 460px;
  right: 80px;
  text-align: left;
  display: flex;
  
  font-size: 16px;
  color: white;
}
.slide-text {
  width: 420px;
  height: 500px;
  position: absolute;
  top: 220px;
  left: 700px;
  text-align: left;
  display: block;
  color: #FFFFFF;
	z-index: 5000;
}
.slide-text-2 {
  width: 420px;
  height: 500px;
  position: absolute;
  top: 220px;
  left: 700px;
  text-align: left;
  display: block;
  color: #222222;
	z-index: 7500;
	
}
.slide-text-3 {
  width: 440px;
  height: 500px;
  position: absolute;
  top: 220px;
  left: 700px;
  text-align: left;
  display: block;
  color: #222222;
	z-index: 7500;
}
.slide-text-4 {
  width: 410px;
  height: 500px;
  position: absolute;
  top: 210px;
  left: 700px;
  text-align: left;
  display: block;
  color: #000000;
	z-index: 7500;
}
.slide-headline {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
  font-weight: 700;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 60px;
  left: 700px;
  text-align: left;
  display: block;
  font-size: 50px;
	z-index: 3000;
  color: #FFFFFF;
}
.slide-headline-2 {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
  font-weight: 700;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 60px;
  left: 700px;
  text-align: left;
  display: block;
  font-size: 50px;
  color: #222222;
	z-index: 3000;
}
.slide-headline-3 {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
  font-weight: 700;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 60px;
  left: 700px;
  text-align: left;
  display: block;
  font-size: 50px;
  color: #222222;
	z-index: 3000;
}
.slide-headline-4 {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
  font-weight: 700;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 60px;
  left: 700px;
  text-align: left;
  display: block;
  font-size: 50px;
  color: #000000;
	z-index: 3000;
}
.products-details {
  width: 100%;
  height: 240px;
  position: absolute;
  top: 70px;
  transition: left 0.5s ease-in-out;
  display: block;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
  border-radius: 15px;
  box-shadow: inset 0 0 0 12px #8A8A8A; /* Thicker gold inner border */
}
/* Sliding Container Styles */
.slider-container {
  width: 100%;
  height: 600px;
  position: relative;
  overflow: hidden;
  margin-top: 0px; /* Offset for navbar */
}
.slide {
  width: 100%;
  height: 600px;
  position: absolute;
  top: 0;
  left: 100%;
  transition: left 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: white;
	z-index: 1000;
}
.slide.active {
	z-index: 1000;
  left: 0;
}
.slide:nth-child(1) {
  background-color: #3498db;
	z-index: 1000;
}
.slide:nth-child(2) {
  background-color: #FFFFFF;
}
.slide:nth-child(3) {
  background-color: #FFFFFF;
}
.slide:nth-child(4) {
  background-color: #FFFFFF;
}
.slide:nth-child(5) {
  background-color: #FFFFFF;
}
.slide:nth-child(6) {
  background-color: #FFFFFF;
}
/* Navigation Buttons */
.nav-buttons {
  top: 560px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
	z-index: 1000;
}
.nav-btn {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
.nav-btn.active {
  background-color: white;
}
body {
	z-index: 1000;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}
.container {
  text-align: center;
}
.btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  top: 200px;
}
.btn:hover {
  background-color: #09284A;
}
/* Modal Styling */
.modal-logo {
  display: block;
  position: absolute;
  top: 0px;
  left: -20px;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.modal-header h5 {
  margin: 0;
  top: 40px;
  font-size: 20px;
  display: block;
  width: 400px;
  text-align: center;
  position: absolute;
}
.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #A30002;
  visibility: hidden;
}
.close-btn:hover {
  color: #000;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
  margin-left: 30px;
}
.form-group input {
  width: 340px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
  margin-left: 30px;
  margin-right: 30px;
}
.form-group input:focus {
  outline: none;
  border-color: #007bff;
}
.submit-btn {
  width: 150px;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 125px;
  margin-right: 125px;
}
.submit-btn:hover {
  background-color: #218838;
}
.error-submit-btn {
  width: 100px;
  margin-left: 150px;
  margin-right: 150px;
  padding: 10px;
  background-color: #A72727;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  align-content: center;
  align-items: center;
  position: absolute;
  top: 80px;
  text-align: center;
}
.error-submit-btn:hover {
  background-color: #882121;
}
.error-message {
  color: #4E0000;
  text-align: center;
  top: 140px;
  position: absolute;
  width: 400px;
  height: 30px;
  font-size: 14px;
}
.error-message:hover {
  color: #C50000;
  text-align: center;
  top: 140px;
  position: absolute;
  width: 400px;
  cursor: pointer;
  z-index: 6000;
}
.login_modal_button_div {
  width: 100px;
  height: 20px;
  position: fixed;
  top: -45px;
  left: 545px;
  z-index: 11500;
  background-color: none;
  background: none;
}
.login_modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  z-index: 150000;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
}
.login_modal_text {
  position: absolute;
  top: 12px;
  left: 20px;
  font-family: "ARIAL";
  font-size: 14px;
  color: #212121;
}
.login_modal_headline_text {
  position: absolute;
  top: -28px;
  left: 20px;
  z-index: 20;
  font-family: "ERASBD";
  font-size: 14px;
  color: #D8D8D8;
}
.login_modal-content {
  position: absolute;
  top: 335px;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  padding: 1rem 1.5rem;
  width: 530px;
  height: 280px;
  border-radius: 0.5rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
  border-top: 45px solid;
  border-color: #1C7E00;
}
.user_options {
  width: auto;
  height: 60px;
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-right: auto;
  background-image: linear-gradient(to right, #1A1A1A, #393939);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
  z-index: 6000;
}
.sales-div {
  height: 20px;
  position: absolute;
  top: 30px;
  left: 900px;
  width: 150px;
  font-family: "ARIAL";
  font-size: 12px;
  color: #FFFFFF;
  align-content: center;
  letter-spacing: 1px;
  display: flex;
}
.sales-div:hover {
  cursor: pointer;
  font-size: 13px;
  color: #FFC600;
  transition: 0.3s;
}
.sign-in-div {
  letter-spacing: .5px;
  height: 28px;
  position: absolute;
  top: 22px;
  left: 1030px;
  width: 90px;
  font-family: "ARIAL";
  display: flex;
  font-size: 14px;
  color: #FFFFFF;
  background-color: #11A800;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 5020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); /* Drop shadow */
}
.sign-in-div:hover {
  cursor: pointer;
  width: 90px;
  height: 28px;
  position: absolute;
  top: 22px;
  left: 1030px;
  display: flex;
  font-family: "ARIAL";
  font-size: 13px;
  color: #FFFFFF;
  background-color: #096000;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 5020;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
}
.pricing-div {
  letter-spacing: 1px;
  height: 20px;
  position: absolute;
  top: 30px;
  left: 500px;
  width: 150px;
  font-family: "ARIAL";
  font-size: 12px;
  color: #FFFFFF;
  justify-content: center;
  display: none;
}
.pricing-div:hover {
  cursor: pointer;
  font-size: 13px;
  color: #FFC600;
  transition: 0.3s;
}
.affiliate-div {
  height: 20px;
  position: absolute;
  top: 30px;
  left: 750px;
  width: 150px;
  font-family: "ARIAL";
  font-size: 12px;
  color: #FFFFFF;
  justify-content: center;
  letter-spacing: 1px;
  display: none;
}
.affiliate-div:hover {
  cursor: pointer;
  font-size: 13px;
  color: #FFC600;
  transition: 0.3s;
}
.developers-div {
  height: 20px;
  position: absolute;
  top: 30px;
  left: 400px;
  width: 150px;
  font-family: "ARIAL";
  font-size: 12px;
  color: #FFFFFF;
  justify-content: center;
  letter-spacing: 1px;
  display: flex;
}
.developers-div:hover {
  cursor: pointer;
  font-size: 13px;
  color: #FFC600;
  transition: 0.3s;
}
.products-div {
  height: 20px;
  position: absolute;
  top: 30px;
  left: 300px;
  width: 150px;
  font-family: "ARIAL";
  font-size: 12px;
  color: #FFFFFF;
  justify-content: center;
  letter-spacing: 1px;
  display: none;
}
.products-div:hover {
  cursor: pointer;
  font-size: 13px;
  color: #FFC600;
  transition: 0.3s;
}
body {
  width: 100%;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #EFEFEF;
}
.main_div {
  width: 1200px;
  height: 3000px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}
.main_desription_bank_info {
  width: 840px;
  height: 40px;
  position: absolute;
  top: 285px;
  left: 40px;
  z-index: 500;
}
data_description {
  padding-top: 10px;
  padding-left: 10px;
  position: absolute;
  font-family: "ERASBD";
  font-size: 14px;
  left: 0px;
  height: 15px;
  width: 400px;
  color: #000000;
  z-index: 7500;
  cursor: pointer;
}