@import url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff);


fmhtml, td,p,tr,tbody{
	margin: 0px !important; 
  	padding:  0px !important; 
	border:  0px !important; 
	outline:  0px !important; 
	line-height: 1.3em;
	border-style: none;
	font-family: 'Open Sans', sans-serif;	
}

body{
  	margin: 0px !important;	
  	border:  0px !important; 
	outline:  0px !important; 
	line-height: 1.3em;
	border-style: none;
	font-family: 'Open Sans', sans-serif;	
	opacity: 1;
	//background-color:#FAE6B8;	
	background-image: url("../img/body_bg.png");
}
table th {  /*for table header*/
  position: sticky; /* Make the header sticky */
  top: 0; /* Stick to the top of its scroll container */

  background-color: #f2f2f2; /* Ensure the header's background covers content */
 // z-index: 2; /* Ensure the header stays above the table body */ 
	position: -webkit-sticky; 
}

.table_fixed_column {  /*for table header*/
  position: sticky; /* Make the header sticky */
  left: 0; /* Stick to the left of its scroll container */

 // background-color: #f2f2f2; /* Ensure the header's background covers content */
  z-index: 2; /* Ensure the header stays above the table body */ 
	position: -webkit-sticky; 
}

/***** Main Pane Table *******************/
.table_mainpane{	
	font-family: 'Open Sans', sans-serif;
	background-color: #FAE6B8;
	border-radius: 6px;	
//	box-shadow:6px 6px 6px 6px #ccc;
	border-width: 0px;
	border-color: white;
	display: table;
	height:550px;
	width: 100%;
	height:auto;
}
.td_mainpane{	
	font-family: 'Open Sans', sans-serif;
	background-color: #F9BB4D;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	height:30px;
	vertical-align: middle;
	border-width: 0px;
//	width:100%;
}

.row_mainpane{
	font-family: 'Open Sans', sans-serif;
	background-color: #FACC7A;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px; 
	height:25px;
	vertical-align: middle;
	border-width: 0px;
	text-decoration: none;
}
.submenu, .submenu_selected {
	font-family: 'Open Sans', sans-serif;
	background-color: #FACC7A;
	font-size: calc(13px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
	color: white;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	height:25px;
	vertical-align: middle;
	border-width: 0px;
	text-decoration: none;
}
.submenu:hover{background-color: #FF7722}
.submenu_selected{	
	background-color: #FF7722;	
}
// Used for google icon 
.material-symbols-outlined {
  font-variation-settings: 'wght' 100; /* Sets the weight to thin */
}
/******** table Scroll Down ************/
.scrolldown { 
	/*width: 100%;*/   
	display: block;       
    overflow-y: auto; 
	height:450px;	
}
.scroll_H  { 
  /* 	height: auto;*/
	width:100%; 
	max-width: calc(350px + (850 - 350) * ((100vw - 300px) / (1600 - 300)));	
 	display: inline-block;
    overflow-x: auto;
    white-space: nowrap;
	table-layout: fixed;
} 

/************Used for show few lines **************/
.truncate-text{
	white-space: nowrap;   	
  	overflow: hidden;
  	text-overflow: ellipsis;
}
.truncate-text:hover {
  overflow: visible;
}

/********* Fixing the header at the top  */
.fixed-header{
  	position: sticky;
	top: 0;	
	padding-top:0px;
	width: 100%;
	padding-bottom: 0px;
}


/*************** Fixing the footer at the bottom  */
.fixed-footer{
    position: fixed;
	bottom: 0px;
    padding-bottom: 0px;
	padding-top: 0px;   
	width:100%;
}


/************ header background  *****/
.header_bg{
/*background-color:#FAE6B8;		*/	
	background-image: url("../img/header_bg.png");
	background-size: cover;
}


/********* used in footer color ***********/
.footer_bg{
	background-color:#FF7722;	
}





/************* creating Span for large and small screen ********/
.large-view{ 
   display:inline-block;
	
}

.small-view{
   display:none;
	
}	




/*************** Round image used for logo **************/
.logo{
	height: calc(60px + (120 - 60) * ((100vw - 300px) / (1600 - 300)));	
	/*width:  calc(60px + (120 - 60) * ((100vw - 300px) / (1600 - 300)));	*/
}

/*************** Social Media image **************/
.social{
	height: calc(15px + (25 - 15) * ((100vw - 300px) / (1600 - 300)));	
//	width:  calc(15px + (25 - 15) * ((100vw - 300px) / (1600 - 300)));
}
/***************** Round image used for user profile *************/
.profileimage{
	height: calc(60px + (100 - 60) * ((100vw - 300px) / (1600 - 300)));	
	width:  calc(60px + (100 - 60) * ((100vw - 300px) / (1600 - 300)));	
	border-radius:calc(30px + (50 - 30) * ((100vw - 300px) / (1600 - 300)));	
	border-color: white;
	border:2px;
}
.largeprofileimage{
	height: calc(80px + (150 - 80) * ((100vw - 300px) / (1600 - 300)));	
	width:  calc(80px + (150 - 80) * ((100vw - 300px) / (1600 - 300)));	
	border-radius:calc(40px + (75 - 40) * ((100vw - 300px) / (1600 - 300)));	
	border-color: white;
	border:2px;
}
/********** Upi Image ***********/
.upi{
	height: calc(60px + (100 - 60) * ((100vw - 300px) / (1600 - 300)));		
	border-color: white;
}


/***********  TEXT CSS*****************************/
.H1{
	color: Black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(20px + (36 - 20) * ((100vw - 300px) / (1600 - 300)));;
	line-height:1;
	margin:0px;
	padding:0px;
} 

.H2{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(18px + (28 - 16) * ((100vw - 300px) / (1600 - 300)));	
	margin:0px;
	padding:0px;
}

.H3{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (1600 - 300)));	
	margin:0px;
	padding:0px;
}
.H4, .H4_W, .H4_R{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));	
	margin:0px;
	padding:0px;
}
.H5, .H5_W, .H5_R{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(13px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));	
	margin:0px;
	padding:0px;
}
.H6, .H6_R, .H6_W{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(11px + (13 - 10) * ((100vw - 300px) / (1600 - 300)));	
	margin:0px;
	padding:0px;
}
.H4_R, .H5_R, .H6_R{
	color: red;
}

.H4_W, .H5_W, .H6_W{
	color: white;
}

/************ for Login Popup************/

.overlay-container {
 	    display: none;
            position: fixed;			
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            justify-content: center;
            align-items: center;
            opacity: ;
            transition: opacity 0.3s ease;
			z-index: 9; 
        }

        .popup-box {
            background: #fff;
			position: fixed;
			padding-bottom: 20px;
			padding-top: 20px;
			padding-left: 4px;
			padding-right: 4px;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
            width: 320px;
            text-align: center;
            opacity: 0;
			z-index: 9; 
            transform: scale(0.8);
            animation: fadeInUp 0.5s ease-out forwards;
			
        }

        .form-container {
            display: flex;
            flex-direction: column;
			z-index: 9; 
			width:100%;
        }

        .form-label {
            margin-bottom: 10px;
            font-size: 16px;
            color: #444;
            text-align: left;
			z-index: 9; 
        }

        .form-input {
            padding: 10px;
			width:100%;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 16px;
            width: 100%;
            box-sizing: border-box;
			z-index: 9; 
        }

        .btn-submit,  .btn-close-popup {
            padding: 6px 6px;
            border: none;
			font-size: calc(13px + (15 - 12) * ((100vw - 300px) / (1600 - 300)));;
			width: 100%;
            border-radius:2px;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
			z-index: 9; 
        }

        .btn-submit {
            background-color: #459B45;
            color: #fff;
        }

        .btn-close-popup {
            margin-top: 12px;
            background-color: #e74c3c;
            color: #fff;
        }

        .btn-submit:hover,
        .btn-close-popup:hover {
            background-color: #4caf50;
        }

/* Keyframes for fadeInUp animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Animation for popup */
        .overlay-container.show {
            display: flex;
            opacity: 1;
        }





/******************BUTTONS**********************/

/*Login button used in header  */
.btn_login_header, .btn_logout_header {
  	background-color: #459B45; 
  	border-color: white;
 	border-width:0px;
	
 	color: white;
 	 padding: 6px 25px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(13px + (15 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:4px;	
}
 .btn_login_header:hover{background-color: #367A36}

.btn_logout_header {
  	background-color: #e74c3c;   	
}
 .btn_logout_header:hover{background-color: #367A36}

.btn_main_pane {
  	background-color: #459B45; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding: 6px 24px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(13px + (15 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:2px;	
}
 .btn_main_pane:hover{background-color: #367A36}



/************** Left Right TD for page ****************/
.side_pane_pic{ 
	background-size: cover;
	max-width: 275px;
}


.left_frame_pic{  
	width: 20%;	
	border-width: 0px;
//	background-image: url("../img/left.PNG");
	background-repeat: no-repeat; 
	background-size: cover;
//	filter: blur(8px); 
  //  -webkit-filter: blur(8px);
//	transform: scale(1.02);
	z-index: 1;
//	box-shadow:6px 6px 6px 6px #ccc;
}
.right_frame_pic{  
	width: 20%;	
//	background-image: url("../img/right.PNG");
	background-repeat: no-repeat; 
	background-size: cover;
//	filter: blur(8px); 
   // -webkit-filter: blur(8px);
	//transform: scale(1.02);
	z-index: 9;
//	box-shadow:6px 6px 6px 6px #ccc;
}

.middle_frame_pic{ 	
	background-image: url("../img/centre.png");
	background-size: cover;
  
}
/***********Text Box and Text Area ***********/

/* Used for text box covering entire TD */
.txtbox_full{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
	border-radius: 0px;
	height:25px;
	border-color: black;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	background-color:#FDFDFD;
	border-width:0px;	
	border-right-width: 0px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 1px;
	opacity: 1; 
	width:100%;
	outline: 0px solid #dddddd;
}
/* Used for text area covering entire TD */
.txtarea_full{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
	border-radius: 0px;
	height:50px;
	border-color: black;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	background-color:#FDFDFD;
	border-width:0px;	
	border-right-width: 0px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 1px;
	opacity: 1; 
	width:100%;
}

.dropdown_full{
	color: black;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
	border-radius: 0px;
	height:25px;
	border-color: black;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	background-color:#FDFDFD;
	border-width:0px;	
	border-right-width: 0px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 1px;
	opacity: 1; 
	width:100%;
	outline: 0px solid #dddddd;	
	min-height: 32px;
}

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

/***************** start of Alert CSS. It is used for alert popup*******************/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0); /* Black w/ opacity */
  border-radius :10px;
    
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  height: auto;	
  padding: 0;
  border: 0px solid #888;
  width: calc(300px + (500 - 300) * ((100vw - 300px) / (1600 - 300)));	
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: none;
  -webkit-animation-duration: 0.9s;
  animation-name: none;
  animation-duration: 0.9s;
  border-radius :10px
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
/*
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
*/

.modal-header {
  padding: 10px;
  background-color: transparent;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  min-height: 60px;
  vertical-align: bottom;
  text-align:center; 
}

.modal-title {
  padding: 10px;
  background-color: transparent;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  min-height: auto;
  vertical-align: bottom;
  text-align:center; 	
  font-size:calc(18px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));	
  font-family: 'Open Sans', sans-serif;	
}

.modal-body {
	padding: 10px;
	min-height: 30px;
	background-color: transparent;
	height:auto;
	align-content: center;
	text-align: center;
	font-size:calc(13px + (16 - 13) * ((100vw - 300px) / (1600 - 300)));	
    font-family: 'Open Sans', sans-serif;	
}

.modal-footer {	
	padding: 12px;
	min-height: 20px;
	background-color: transparent;
	height:auto;
	align-content: center;
	text-align: center;
	border-bottom-left-radius: 10px;
  	border-bottom-right-radius: 10px;	
	font-size:calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));	
    font-family: 'Open Sans', sans-serif;
	gap: 40px;
}

.modal_ok_button {
  	background-color: #6080f5; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 10px;
	padding-right:10px;
    padding-top: 10px;
	padding-bottom:10px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:2px;
	min-width:calc(80px + (150 - 80) * ((100vw - 300px) / (1600 - 300)));;	
}
 .modal_ok_button:hover{background-color: #0070C0}

.modal_yes_button {
  	background-color: #459B45; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 10px;
	padding-right:10px;
    padding-top: 10px;
	padding-bottom:10px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:2px;	
	min-width:calc(80px + (150 - 80) * ((100vw - 300px) / (1600 - 300)));;
}
.modal_yes_button:hover{background-color: #367A36}

.modal_no_button {
  	background-color:coral ;
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 10px;
	padding-right:10px;
    padding-top: 10px;
	padding-bottom:10px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:2px;	
	min-width:calc(80px + (150 - 80) * ((100vw - 300px) / (1600 - 300)));;	
}
 .modal_no_button:hover{background-color: red}

/***************** end of Alert CSS *************/
/******** Start of  ****************/
/* Create four equal columns */
/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
  text-align: center ;
 }

.column {
  flex: 10%;
  text-align: center ;
  display: inline-block;  
  text-align: center;
  background-color: transparent;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;	
/*font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));*/
  /*  vertical-align: text-bottom;*/
}


/******************************/

/************** For Smallar Screen *****************/

/* This is for screen size  */
@media only screen and (max-width: 600px) {		
	.left_frame_pic {	width: 0px;}
	.right_frame_pic {width: 0px;}
	.middle_frame_pic {width: 100%;}
	.scrolldown {height:100%}
	.large-view{ display:none;color: black;  }
    .small-view{display:inline-block;   }
	/*.row { flex-direction: column; }*/
	.column { flex: 50%; }
}

@media only screen and (max-width: 1000px) and (min-width: 600px) {	 
	.left_frame_pic {	width: 10%;}
	.right_frame_pic {width: 10%;}
	.middle_frame_pic {width: 70%;}
	.scrolldown {height:100%}
	.large-view{ display:none;color: black;  }
    .small-view{display:inline-block;  }
	.column { flex: 50%; }
	
}







/************** OJRKS ONLY ABOVE **************************/
/*====================================================*/