/* LOG IN PAGE MEMBER */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
/*	font-family: 'Dyuthi'; */
}
 
/* Dropdown container */
.dropdown {
	position: relative;
	width: 170px;
	font-family: 'Dyuthi-Regular';
}

/* Default selected item */
.dropdown-toggle { 
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: 'Dyuthi-Regular';
}

.dropdown-toggle i {
	margin-right: 10px;
}

/* Dropdown list */
.dropdown-menu {
	display: none;
	position: absolute;
	width: 100%;
	background: #005a9c;
	border: 1px solid #005a9c;
	border-radius: 5px;
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 100;
	font-family: 'Dyuthi-Regular';
}

.dropdown-menu li {
	padding: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-family: 'Dyuthi-Regular';
}

.dropdown-menu li:hover {
	color:red;
}

.dropdown-menu a {
	text-decoration: none;
	color: #fff;
	width: 100%;
	display: flex;
	align-items: center;
	font-family: 'Dyuthi-Regular';
}

.dropdown-menu i {
	margin-right: 10px;
}

/* REDFoxMenu MENU */
.REDFoxMenu { width: 200px; margin: 1px auto; overflow: hidden; font-size: 13px; background:#3498db; font-family: 'Dosis-SemiBold'; font-size: 15px;}
.REDFoxMenu-item { border-bottom: 1px solid #ddd; font-family: 'Dosis-SemiBold'; font-size: 15px; }
.REDFoxMenu-header { background: #3498db; color: white; padding: 7px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.REDFoxMenu-header.active { background: #2c80b4; font-family: 'Dosis-SemiBold'; font-size: 15px; }
.REDFoxMenu-content { display: none; padding: 10px 15px; background: unset;  }
.REDFoxMenu-content a { display: block; padding: 5px 0; color: #333; text-decoration: none; font-size: 13px; }
.REDFoxMenu-content a.active { font-weight: bold; color: #3498db; font-size: 13px;}
.REDFoxMenu-content a:hover { font-weight: bold; color: red; }

.REDFoxMenu-item a {color:#fff; font-weight: bold;}
.REDFoxMenu-item a.active { font-weight: bold; color:yellow; font-size: 13px; font-family: 'Dosis-SemiBold'; font-size: 15px;}
.REDFoxMenu-item a:hover { font-weight: bold; color:  #ff904d; }
.REDFoxMenu-item i {color:#fff}	



.main-content {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
	background-color: #ffffff;
}

.main-content h2 {
	font-size: 20px;
	margin: 20px 0px;
	font-family: Dosis-SemiBold;	
}

.main-content table {
	width: 40%;
	border-collapse: collapse;
	font-size: 14px;
    font-family: 'Dosis-SemiBold';
    color: #323949;
}

.main-content table th,
.main-content table td {
	text-align: left;
	padding: 4px;
	border: 1px solid #ddd;
}

.main-content table th {
	background-color: #f2f9ff;
}


.main-content tr:hover {
	background-color: #f0f0f0; 
	transition: 0.3s;
}



		
		
.loginbody {
	min-height: 100vh;
	background: url('https://crm.omnitechone.com/public/assets/admin/images/84409.png') no-repeat;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Dyuthi-Regular';
}
.login-container {
	width: 400px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 10px;
	padding: 40px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	font-family: 'Dyuthi-Regular';
}

.login-container h2 {
	text-align: center;
	margin-bottom: 30px;
	color: #333;
	font-family:Dyuthi-Regular;
	font-size:25px;
}
.LOGIN-form-group {
	margin-bottom: 20px;
	font-family: 'Dyuthi-Regular';
}

.LOGIN-form-group label {
	display: block;
	margin-bottom: 5px;
	color: #555;
	font-family: 'Dyuthi-Regular';
}

.LOGIN-form-group input {
	width: 100% !important;
	padding: 10px !important;
	border: 1px solid #ddd !important;
	border-radius: 5px !important;
	font-size: 16px !important;
	font-family: 'Dyuthi-Regular';
}

.LOGIN-form-group input:focus {
	outline: none;
	border-color: #007bff;
	font-family: 'Dyuthi-Regular';
}

.LOGIN-forgot-password {
	text-align: center;
	margin-top: 20px;
}

.LOGIN-forgot-password a {
	color: #007bff;
	text-decoration: none;
	font-family: 'Dyuthi';
}

.LOGIN-forgot-password a:hover {
	text-decoration: underline;
	font-family: 'Dyuthi';
}
.LOGIN-login-btn {
	width: 100%;
	padding: 12px;
	background: #007bff;
	border: none;
	border-radius: 5px;
	color: white;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.3s;
	font-family: 'Dyuthi';
}
.LOGIN-login-btn:hover {
	background: #0056b3;
	font-family: 'Dyuthi';
}
.LOGIN-error-message {
	color: #ff0000;
	text-align: center;
	margin-bottom: 20px;
	font-size: 14px;
	font-family: 'Dyuthi';
}
/* Client Account */
.breadcrumb {
	display: flex;
	align-items: center;
	font-family:FiraMono-Regular;
	font-size: 15px;
}
.breadcrumb a {
	color: #14b13f;
	text-decoration: none;
	margin-right: 10px;
	font-size: 15px;
	/* font-weight: bold; */
	font-family:FiraMono-Regular;
}
.breadcrumb a:hover {
	text-decoration: none;
	font-family:FiraMono-Regular;
}
.breadcrumb span {
	font-size: 15px;
	font-family:FiraMono-Regular;
}
.breadcrumb i {
	margin-right: 5px;
}







.DOM_container {
  display: flex;
/*  flex-wrap: wrap; */
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.DOM_box {
  width: 130px;
  padding: 15px;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
  font-family: 'Dosis-SemiBold';
}
.DOM_box:hover {
  transform: translateY(-5px);
}
.DOM_box i {
  font-size: 30px;
  color: #800080;
  margin-bottom: 10px;
}

.DOM_box span {
  display: block;
  font-size: 12px;
  color: #333;
}

























		body {
            margin: 0;
            font-family: Arial, sans-serif;
           /* background-color: #e6f0f8;*/
			background-color: #FFFFFF;
            color: #000;
        }

        

        .container {
            display: flex;
            height: calc(100vh - 50px);
        }
		
        .sidebar {
            background-color: #d9e9f5;
            width: 250px;
            border-right: 1px solid #ccc;
            overflow-y: auto;
            padding: 10px;
        }

        .sidebar h3 {
            margin: 10px 0;
            font-size: 16px;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar ul li {
            margin: 5px 0;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
        }

        .sidebar ul li:hover {
            background-color: #cce3f0;
            border-radius: 4px;
        }
		
		a {
            text-decoration: none;
            display: inline-block;
            color: black;
            border-radius: 5px;
        }

        a:hover {
            color: #005a9c;
        }

        a.active {
            color: red;
        }
		
		
        
		
		
		
		.80table {
            width: 80% !important;
            border-collapse: collapse;
			font-size: 12px;
        }
 
		
		
	.paybill_Mod h2 {
		font-size: 15.9px;
		margin-bottom: 13px;
		padding-left: 11px;
	}
	.paybill_Mod table {
    width: 100%;
    border-collapse: collapse;
    color: #19c2b3;
	}

	.paybill_Mod th, .paybill_Mod td {
		border: 0px solid #72aa94 !important;
		padding: 8px;
		text-align: left;
	}

	.paybill_Mod th {
		background: #333; /* Darker shade for header */
	}
	.paybill_Mod table tbody tr:hover {
		background: none; /* Disable hover background change */
	}
		
	.paybill_Mod button {
		background: transparent;
		border: 2px solid #0ff; /* Neon cyan border */
		color: #0ff; /* Neon cyan text */
		padding: 10px 20px;
		font-size: 16px;
		border-radius: 25px; /* Rounded edges */
		text-align: center;
		cursor: pointer;
		transition: 0.3s ease-in-out;
		position: relative;
		overflow: hidden;
	}

	.paybill_Mod button:hover {
		background: rgba(0, 255, 255, 0.2); /* Soft glow effect */
		box-shadow: 0 0 10px #0ff;
	}
	
	.paybill_Mod  .w3-teal {
		color: #fff !important;
		background-color: #005a9c !important;		 
	}
	
	.paybill_Mod .w3-container{
		padding: unset !important;
	}
	
	

	
	
		
		
		

        .device-image {
            text-align: center;
            margin: 20px 0;
        }

        .device-image img {
            max-width: 100%;
            height: auto;
        }
		
		
		
		
		
		
		
		
		
		
		
		
		
		
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                height: auto;
            }

            .main-content {
                padding: 10px;
            }
        }
		
		
		
		
		
		/* Button to Open Popup */
        .open-popup {
            padding: 4px 12px;
            font-size: 16px;
            background: #005a9c;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

        /* Popup Background */
        .popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s ease-in-out;
        }

        /* Popup Box */
        .popup-content {
            background: white;
            padding: 20px;
            width: 700px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            position: relative;
            text-align: left;
        }

        /* Popup Title (Left Aligned) */
        .popup-content h2 {
            margin: 0;
            font-size: 20px;
        }

        /* Close Button (Top Right Corner) */
        

        /* Show Popup when Checkbox is Checked */
        #popup-toggle:checked ~ .popup {
            opacity: 1;
            visibility: visible;
        }

        /* Hide the checkbox */
        #popup-toggle {
            display: none;
        }
		
		 
		
		.RFparent {
			  max-width: 100%; /* Optional: limit the overall width */
			  margin: 0 auto;    /* Center the layout */
			  border-radius: 5px;
			  display: flex;      /* Flexbox ensures side-by-side layout */
			  gap: 10px;          /* Spacing between the divs */
			}

			.RFleft {
			  width: 35%;         /* Fixed width of 25% */
			  color: #000;
			  text-align: center;
			  padding: 0px 20px 0px 0px;
			  border-radius: 5px;
			}

		.RFright {
		  width: 65%;         /* Fixed width of 75% */
		  color: #000;
		  text-align: center;
		  padding: 0px 20px 0px 0px;
		  border-radius: 5px;
		}
			
		
		
		
		.tooltip-container {
			position: relative;
			display: inline-block;
		  }

		  .tooltip-container .tooltip-text {
			visibility: hidden;
			background-color: black;
			color: #fff;
			text-align: center;
			padding: 5px 10px;
			border-radius: 5px;
			position: absolute;
			top: -30px;
			left: 50%;
			transform: translateX(-50%);
			white-space: nowrap;
			opacity: 0;
			transition: opacity 0.3s;
		  }

		  .tooltip-container:hover .tooltip-text {
			visibility: visible;
			opacity: 1;
		  }