@import "./fonts/font.css";

/* .validation{
    display: block;
    margin-top: 3px;
    margin-bottom: 10px;
    color: #737373;
    position: relative;
    border-bottom: 1px dotted red;
    visibility: hidden;
    width: 500 px;
    background-color: #ff967c;
    color: #fff;
    text-align: center;
    padding: 3px 8px;
    border-radius: 6px;
   position: absolute;  
    z-index: 1;
    line-height: 19px;
    font-size: 14px;
} */

.validation,.validation_btn {
	
    display: block;
    margin-top: 3px!important;
    font-family: 'Raleway', sans-serif;font-feature-settings: "lnum";
    color: red!important; 
    visibility: hidden; 
    font-size: 12px!important;
    line-height: 19px!important;
    white-space: normal!important;
    word-wrap: break-word!important;
    max-width: 100%!important;
    overflow-wrap: break-word!important; 
    text-align: left!important;

   
    }
    

    .login-validate
    {
    max-width: 100%;
    width: 400px;
    }
    


.input-validation-error {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" fill-rule="evenodd"%3E%3Cg%3E%3Ccircle cx="12" cy="12" r="12" fill="%23FF7979"/%3E%3Crect x="11" y="6" width="2" height="9" rx="1" fill="%23FFF"/%3E%3Crect x="11" y="17" width="2" height="2" rx="1" fill="%23FFF"/%3E%3C/g%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    border: 1px solid red; /* Keep the red border */
}

.red-border {
    border:1px solid var(--shadepofred) !important;  
                     
}

.red-border-file {
	border: 2px solid var(--shadepofred) !important;
	border-radius: 18px !important;
	height: 145px !important;
	width: 145px !important;
	white-space: nowrap;
}

	input:focus {
	    outline: none; /* Remove default outline */
}

/* .validation_btn{
    display: block;
    margin-top: 22px;
    margin-bottom: 10px;
    color: #737373;
    position: relative;
    border-bottom: 1px dotted red;
    visibility: hidden;
    width: 500 px;
    background-color: #ff967c;
    color: #fff;
    text-align: center;
    padding: 3px 8px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    line-height: 19px;
    font-size: 14px;
} */


.validation_file{
    background-color: #ff967c;
   
}

.cursorP{
	cursor:pointer !important;
}
.user-exists-error{
	display: block;
    margin-top: 3px;
    margin-bottom: 10px;
    color: red; /* Set text color to red */
    visibility: hidden; /* Controlled by JavaScript */
    font-size: 14px;
    line-height: 19px;
}

 .overlay-loading {
  background-color: #EFEFEF;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  top: 0px;
  left: 0px;
  opacity: .5; 
  filter: alpha(opacity=50); 
  display: none;
  align-items: center;
  justify-content: center;
} 

.popuplogin-btn {
	background: var(--primary-color) !important;
	border-radius: 10px;
	width: 125px;
	color: var(--white-color) !important;
	text-transform: Captialize;
	height: 38px;
	line-height: 1;
	display: inline-block; /* Ensure the width and height take effect */
    text-align: center; /* Align text horizontally */
    vertical-align: middle; /* Align text vertically */
    padding: 10px 0; /* Optional: add padding to control the inner space */
    text-decoration:none;
    cursor:pointer;
    
}
/*spinner css start  */
/* Loader Body */
.loader-body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/* Loader Container */
.loader-container {
  position: relative;
  width: 100px;
  height: 140px; /* Increased height to fit the dots */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Logo */
.logo {
  position: absolute;
  width: 80px;
  height: auto;
  z-index: 2;
}

/* Pulsating Dots */
.dots {
  position: absolute;
  bottom: 20px; /* Moves dots below the logo */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.dots span {
  width: 9px;
  height: 9px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  animation: pulse-dots 1.5s infinite ease-in-out;
}

.dots span:nth-child(1) {
  animation-delay: 0s;
}

.dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* Keyframes for rotation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Keyframes for pulse effect */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}

/* Keyframes for pulsating dots */
@keyframes pulse-dots {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}
/*spinner css end  */
.dt-paging-button{
	padding: 0.1em 0.1em !important;
}

div.dt-container .dt-paging .dt-paging-button:hover{
	    border: 0px solid black !important;
}

.page-item:not(:first-child) .page-link {
    margin-left: calc(var(--bs-border-width)* -1);
}
.disabled>.page-link, .page-link.disabled{
	
	background-color:white!important;
	color:black!important;
	
}

.pagination li a {
    font-family: Roboto;
    line-height: 22px;
    text-align: center;
    border-color:black!important;
    color:black;
    border:0px!important;
    }
.pagination .active a{
	font-weight:800;
	
	
}
.pagination .page-item:hover{
	
	border:0px!important;
	
}
.page-link:focus{
	background-color:white!important;
}

.red-border-file1 {
    border: 2px solid var(--shadepofred) !important;
    border-radius: 18px !important;
}

.bootstrap-select .bs-searchbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

