@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap');
.title-background {
    width: auto;
    height: auto;
    background: #0E62E3;
}

.button {
    /* border: 2px solid #f7f7f7; */
    border: 2px solid #0E62E3;
    background-color: white;
    /* text-transform: uppercase; */
    position: relative;
    transition: 0.3s;
    text-align: center;
    display: block;
    width: auto;
    height: auto;
    border-radius: 10px;
    margin-top: 10px;
    /* border: 2px solid #73AD21; */
}

.button:after {
    position: absolute;
    transition: 0.3s;
    content: "";
    width: 0;
    left: 50%;
    bottom: 0;
    height: 2px;
    background: #0E62E3;
}

.button:hover {
    box-shadow: inset 0px 0px 0px 2px #0E62E3;
}

.proceed-button {
    background-color: #003399;
    color: #fff;
    display: block;
    border-radius: 4px;
    border: 1px solid;
    width: 100%;
    margin-top: 10px;
}

.jpjFooter-button{
	background-color: #FFFFFF;
    color: #fff;
    display: block;
    border-radius: 4px;
    border: 1px solid;
    width: 100%;
    margin-top: 10px;
}

.jpjHomeImg{
	width:180px;
	height:60px;
}

.bottom-Div{
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
}

@media (max-width: 1080px) {
    .container-POS .form-floating .form-select{
        padding-top: 2.625rem;
    }
    .container-POS .form-floating input{
        height: calc(4.5rem + 10px);
        width: calc(100% + 10px);
    }
    .container-POS .custom-validation input{
        height: calc(4.5rem + 10px);
        width: calc(100% + 10px);
    }

    .container-POS .form-floating select{
        height: calc(100% + 80px);
        width: calc(100% + 20px);
    }

    .container-POS .col-lg-9{
        width: 90%;
    }
    
    .container-POS * {
        /* font-size: 10px; */
    }
    
    .container-POS .block-container .row{
		padding-right: 5%;
	}
    
    .modal *{
   		/* font-size: 10px; */
    }
    
    .container-POS-Payment .container-POS-Payment-MarginTop{
    	margin-top: 30%;
    }
    
    .container-POS-Payment .form-floating .form-select{
        padding-top: 2.625rem;
    }
    .container-POS-Payment .form-floating input{
        height: calc(4.5rem + 10px);
        width: calc(100% + 10px);
    }
    .container-POS-Payment .custom-validation input{
        height: calc(4.5rem + 10px);
        width: calc(100% + 10px);
    }

    .container-POS-Payment .form-floating select{
        height: calc(100% + 80px);
        width: calc(100% + 20px);
    }

    .container-POS-Payment .col-lg-9{
        width: 90%;
    }
    
    .container-POS-Payment * {
        /* font-size: 10px; */
    }
    
    .modal.show .modal-dialog {
    	max-width: 75%;
    	min-width: 75%;
    	margin-left: 15%;
    	margin-right: 15%;
    }
    
    .modal-title{
    	font-size: 25px;
    	
    }
    
    .modal-body{
    	font-size: 20px;
    }
    
    p{
    	/* font-size: 10px; */
    }
    
    .form-floating>.form-control{
	    font-weight: 700;
	}

	.form-floating>label{
	    font-weight: 700;
	}
	
	body {
		 font-weight: 700;
	}
	
	.form-select {
		font-weight: 700;
	}
	
	button {
		 font-weight: 700;
	}
	
	#jpjFooterNavigation * {
	    /* font-size: 6px; */
	}
}


@media (min-width: 1080px) {
	#CustomErrMsg p {
		font-size: 29px;	
	}
	
	#CustomErrMsg .modal-title{
		font-size: 36px;	
	}
	#CustomErrMsg .modal-lg {
		min-height: calc(100% - 1.5rem);
		max-width: 75%;
	    min-width: 75%;
	}
	
	.form-floating>.form-control{
	    font-weight: 700;
	}

	.form-floating>label{
	    font-weight: 700;
	}
	
	body {
		 font-weight: 700;
	}
	
	.form-select {
		font-weight: 700;
	}
	
	button {
		 font-weight: 900;
	}
}

 /* Custom styles */
  #footerToggleBtn {
      position: fixed;
      width: 15%;
      left: 91%;
      transform: translateX(-50%);
      padding: 2px 15px;
      font-size: 0.8rem;
      border-radius: 20px 20px 0 0;
      z-index: 1000;
      box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  }
  #footerToggleBtn .bi {
      transition: transform 0.3s ease;
  }
  .footer-hidden #footerToggleBtn .bi {
      transform: rotate(180deg);
  }
  .bottom-Div {
      background-color: #f8f9fa;
      padding: 15px 0;
      border-top: 1px solid #dee2e6;
      transition: all 0.3s ease;
  }

/* For the toggle button */
#divFooterToggle {
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1000;
    transition: bottom 0.3s ease; /* Smooth position changes */
}
/* When footer is hidden */
.footer-hidden .bottom-Div {
    transform: translateY(100%);
}

/* Adjust toggle button icon when footer is hidden */
.footer-hidden #footerToggleBtn .bi-chevron-down {
    transform: rotate(180deg);
}