*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			html{
				font-size: 62.50%; 
				letter-spacing: .11rem;
				font-family: 'Poppins', sans-serif;
				height: -webkit-fill-available;
				/*	++++ PREVENT SELECT Start*/
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				/*	++++ PREVENT SELECT End*/
/*				transition: 5s ease;*/
			}
			a {
				text-decoration: none;
			}
			li {
				list-style: none;
			}
			h1 {
				font-weight: 600;
				font-size: 1.5rem;
			}
			body {
				height: -webkit-fill-available;
				max-width:100%;
				overflow-x: hidden;
			}
			.errormsg_box{
				margin: 1rem;
			/*	margin-left: 50%;*/
			/*	height: fit-content;*/
				/*text-align: center;
				position: absolute;*/
			}
			.errormsg{
				margin: .2rem auto;
				border-radius: .5rem;
				background-color: #0A4902;
				border: .1rem solid #117803;
				color: #fff;
				text-align: left;
				padding: .3rem 1rem;
				font-size: 1.6rem;
			}
			.wrapper {
				display: flex;
				flex-direction: column;
				height: 100%;
/*				position: relative;*/
			}
			#btn_flag{
				display: none;
			}
			.top_hdr{
				background-color: #0e2238;
				color: #fff;
				justify-content: center; 
				text-align: center; 
				font-size: 3.2rem;
				top: 0;
				left: 0;
				position: fixed;
				width: 100vw;
				z-index: 7;
			}
			.logo{
				width: 5.5rem;
				margin: .05rem 0;
				margin-right: .7rem;
				cursor: pointer;
			}
			.ss_brand{
				font-family: 'Permanent Marker', cursive;
				color: #fff;
				letter-spacing: .2rem;
				padding: .4rem 0;
				padding-left: .2rem;
				font-size: 3rem;
				text-decoration: none;
				display: inline-block; 
				text-shadow: .2rem .2rem .12rem #111;;
			}
			.ss_brand span{
				font-size: 3rem;
				font-family: 'Permanent Marker', cursive;
				color: #e84e36;
			}
			.main_sec{
				height:100vh;
				width: 100%;
				overflow-x: hidden;
				overflow-y: auto;
				transition: all 1s ease-in-out;
				display: flex;
/*				position: relative;*/
			}
			.lft_bar{
				height:100%;
				width: 6.5rem;
				min-width: 6rem; 
				z-index: 1000;
				background-color: #0e2238;
				transition: all 1s ease-in-out;
				position: fixed;
				top:6.3rem;
				display: flex;
				flex-direction: column;
				overflow-y: auto;
				overflow-x: hidden;
			}
			.lft_bar::-webkit-scrollbar{display: none}
			.lft_bar.expand {
				width: 26rem;
				min-width: 26rem; 
				transition: 1s;
			}
			.lft_bar.expand .sidebar-link span {
				visibility: visible;
			    opacity: 1;
			    transition: all 1s linear;
			}
			.lft_bar.expand .toggle-btn span {
				visibility: visible;
			    opacity: 1;
			    transition: all 1s linear;
			}
			.rgt_bar{
				width: calc(100vw - 6rem); 
				height: -webkit-fill-available; 
				white-space: normal;
				padding: 2rem;
				position: absolute;
				left: 6.04rem; 
				right: 2%;
				top: 6.42rem;
				overflow-y: auto;
				overflow-x: hidden;
				transition: all 1s ease-in-out;
			}
			.rgt_bar::-webkit-scrollbar{display: none}
			.rgt_bar.changed {
				width: calc(100vw - 26rem);
				left: 26rem;
				transition: 1s;
			}
			.log_info{
				position: absolute;
				width: 100%;
				top: 0;
				left: 0; 
				padding: .5rem 5rem .5rem 0;
				display: flex;
				justify-content: right;
			}
			.log_info span{
				font-size: 1.8rem;
				font-weight: 400;
				text-transform: capitalize;
			}
			hr {
  				border : 0;
  				height: .7rem;
  				background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(50, 111, 242, 0.95));
			}
			.cont_area{
/*				position: relative;*/
				margin-top: 2rem;
/*				z-index: -5;*/
			}
			.toggle-btn {
				background-color: transparent;
				cursor: pointer;
				border: 0;
				padding: 1.8rem 2rem;
			}
			.toggle-btn i {
				font-size: 2rem;
				color: #FFF;
			}
			.toggle-btn span{
				padding: 2.2rem 2.5rem;
				color: #FFF;
				font-size: 2.2rem;
				font-weight: 600;
				letter-spacing: .12rem;
			}
			.toggle-btn::before{
				content: '';
			    display: block;
			    position: relative;
			    width: 12%;
				border: .1rem solid #E42217;
    			margin-bottom: .8rem; 
			}
			.toggle-btn::after{
				content: '';
			    display: block;
			    position: relative;
			    width: 12%;
				border: .1rem solid #E42217;
    			margin-top: .8rem; 
			}
			.sidebar-nav {
				/*margin-top: 6rem;
				padding: 3rem 1rem;
				flex: 1 1 auto;*/
				padding: 2rem 1rem;
				flex: 1 1 auto;
			}
			.sidebar-link{
				padding: 1.8rem 1.2rem;
				color: #FFF;
				display: block;
				font-size: 1.8rem;
				white-space: nowrap;
				border-left: .3rem solid transparent;
			}
			.sidebar-footer {
				padding: 0 1rem;
				margin-bottom: 5rem;
			}
			.sidebar-link i {
				font-size: 1.8rem;
				margin-right: .75rem;
			}
			.sidebar-link:hover {
				background-color: rgba(255, 255, 255, .075);
				border-left: .3rem solid #3b7ddd;
			}
			#logoutlink:hover {
				background-color: rgba(255, 255, 255, .075);
				border-left: .3rem solid #E42217;
			}
			.lft_bar:not(.expand) .sidebar-link span, .lft_bar:not(.expand) .toggle-btn span{
				visibility: hidden;
  				opacity: 0;
  				transition: all 1s linear;
			}								
			.rgt_bar p{
				font-size: 1.4rem;
			}
			.sidebar-link .tooltiptext, .toggle-btn .tooltiptext{
				font-size: 1.2rem;
				letter-spacing: .05rem;
				padding: 1rem 2rem;
				border-radius: .6rem;
				background-color: #111; 
				color: orange;
				position: absolute;
				left: 7rem;
				transform-origin: left;
				visibility: hidden;
				opacity: 0;
				transform: translateY(-50%);
				transition: opacity 0.15s ease, transform 0.15s ease;
			}
			.sidebar-link:hover .tooltiptext, .toggle-btn:hover .tooltiptext{
				visibility: visible;
				opacity: 1;
			}
			.sidebar-link .tooltiptext::before, .toggle-btn .tooltiptext::before{
				content: "";
				position: absolute;
				width: 1.4rem;
				height: 1.4rem;
				border-radius: .2rem;
				background-color: inherit;
				left: 0;
				top: 50%;
				transform: translate(-40%, -50%) rotate(45deg);
			}
			.form_card{
				width: 100%;
				height: 100%;
				display: flex; 
				flex-direction: column;
				align-items: center;
				text-align: center;
				justify-content: center;
				background-color: #fff;
				border-radius: 2rem;
				box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
				padding: 2rem 5rem 1rem 5rem;
				margin: auto;
			}
			.form_card h2{
				color: #047239 ;
				text-transform: uppercase;
				font-size: 3rem;
				padding: 0;
				text-shadow: .3rem .4rem .5rem rgba(0,0,0, .4); 
			}
			.form_card label{
				background-color: transparent;
				border: none;
				margin-right: 1rem;
				justify-content: center;
				align-items: center;
				font-size: 1.6rem;
				color: blue;
			}


			.form_card textarea{
				/*margin: 1rem 0;*/
				font-size: 1.8rem; max-width: 100% !important; /* Fix for cols="100" */
			}

			.form_card input, select{
				/*margin: 1rem 0;*/
				font-size: 1.8rem; max-width: 100% !important; /* Fix for cols="100" */
				background-color: transparent;
			}

			.input-group p{
				padding-top: 2rem;
			}

			.card-header{
				margin-top: 5rem;
			}

			#NoticeForm , #editNoticeForm{
				padding-bottom: 0!important;
			}

			#NoticeForm .form-control, #editNoticeForm .form-control{
				font-size: 1.6rem;
				color: #111;
			}

			#NoticeForm .form-label, #editNoticeForm .form-label{
				font-size: 1.6rem;
				color: #A6A09B;
			}

			#cid{
/*				margin: 0 5rem;*/
			border: .1rem solid #111;
			border-radius: .8rem; 
			}
			#idbtn{
				text-transform: uppercase;
				border: .1rem solid #111;
				color: #111;
				padding: 0 1.5rem;
				border-radius: .8rem;
			}
			#idbtn:hover{
				background-color: #DEE8FA;
			}
			hr {
  				border : 0;
  				height: .7rem;
  				background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(50, 111, 242, 0.95));
			}

			

			.data_div{
				border: .01rem solid #111;
				border-radius: 1.5rem;
				padding: .5rem .5rem 0 .5rem;
				text-align: center;
				align-items: center;
				margin: .8rem 0;
			}
			.hdng_text{
/*				font-size: 5rem;*/
				margin: 0 0 0 1rem;
				text-transform: capitalize;
				text-align: left;
			}
			.binfo_text{
/*				font-size: 3rem!importqnt;*/
				color: blue;
				font-weight: bold;
				margin: 0 1rem 0 1.6rem;
				text-transform: uppercase;
				text-align: left;
				padding: 2rem 0;
			}



			.container-fluid {
            padding: 2rem;
        }
        
        
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-size: 2rem;
            color: white;
            border-radius: 1.5rem 1.5rem 0 0 !important;
            padding: 1.5rem .5rem;
        }

        .table {
            border-radius: 1rem;
            overflow: hidden;
        }
        
        .table th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-size: 1.5rem;
            color: white;
            border: none;
            font-weight: 600;
        }
        
        .table td {
            border: none;
            padding: 1rem;
            vertical-align: middle;
            font-size: 1.5rem;
        }
        
        /*.table tbody tr:nth-child(even) {
            background-color: rgba(102, 126, 234, 0.05);
        }*/
        
        .btn-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 2.5rem;
            padding: 0.6rem 1.5rem;
            font-size: 2rem;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-gradient:hover {
            transform: translateY(-.2rem);
            box-shadow: 0 .5rem 1.5rem rgba(102, 126, 234, 0.4);
            color: white;
        }
        
        #viewModal, #noticeModal, #editModal, #deleteModal{
        	/*z-index: 5100000;*/
        }

        .modal-dialog {
			margin-top: var(--bs-navbar-height, 6rem); /* fallback 80px */ 
		}

		.modal-body {
    word-wrap: break-word;
    overflow-x: hidden;
}


        .modal-content {
            border-radius: 1.5rem;
            border: none;
        }
        
        .modal-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 1.5rem 1.5rem 0 0;
        }

        .modal-footer{
        	background: linear-gradient(135deg, #9F9FA9 0%, #FFFBEB 100%);
            border-radius: 0 0 1.5rem 1.5rem; 
        }

        .modal-footer button{
        	border: none;
        	border-radius: 5rem;
        	padding: .6rem 1rem;
        	font-size: 1.6rem;
        	letter-spacing: .05rem;
        	font-family: 'Poppins', sans-serif;
        }

        #saveBtn{
        	padding: .7rem 1rem; 
        	font-family: 'Poppins', sans-serif;
        }

        #NoticeForm input, #editNoticeForm input{
        	font-size: 1.5rem;
        }
        
        .form-control {
            border-radius: 10px;
            border: .2rem solid #e9ecef;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .alert {
            border-radius: 1rem;
            border: none;
        }

        #modalSec{
        	background: linear-gradient(45deg, #FADCF0 77%,#FA98F3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }

        
      /*================TinyMCE===============*/

      	.tox-tinymce-aux,
		.tox-dialog-wrap,
		.tox-dialog,
		.tox-menu,
		.tox-collection,
		.tox-pop {
			z-index: 999999 !important;
		}

		/* Force modal to adapt width on small devices */
		.modal-dialog {
		  max-width: 95% !important;
		  width: auto !important;
		  margin: 1rem auto; /* center */
		}

		/* Make TinyMCE editor scale properly inside modal */
		.tox.tox-tinymce {
		  width: 100% !important;
		  max-width: 100% !important;
		  /*height: auto !important;*/
		}

		.tox .tox-edit-area__iframe {
		  width: 100% !important;
		  min-height: 300px;   /* Adjust as needed */
		  /*height: auto !important;*/
		}

      /*=================TinyMCE===============*/


			/*//Responsive design*/
@media(max-width:1564px){
	html{
		font-size: 67%;
	}
	#content_heading h1{
		font-size: 9.5rem;
		line-height: 47rem;
	}
	.sidebar-nav {
		margin-top: 4.6rem;
		padding: 2.6rem 1rem;
		flex: 1 1 auto;
	}
@media(max-width:1200px){
	html{
		font-size: 60%;
	}
	.sidebar-nav {
		margin-top: 4.2rem;
		padding: 2.2rem 1rem;
		flex: 1 1 auto;
	}
}
@media(max-width:998px){
	html{
		font-size: 55%;
	}
	.form_card{
			padding: 2rem 1rem 1rem 1rem;
			/*margin: auto;*/
		}
	#noticeTable th, #noticeTable td {
	    width: auto !important;   /* reset custom widths */
	    white-space: nowrap;
	    overflow-x: scroll;
	}
	  #noticeTable tr {
	    table-layout: auto !important;
	}
	.table-responsive {
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  }
  .table-responsive table {
    min-width: 70rem; /* 👈 Force horizontal scroll if screen < table width */
    white-space: nowrap;
  }
}
@media (max-width: 768px){
	html{
		font-size:45%;
	}
	.lft_bar{
		top:6.3rem;
		height: calc(100% - 6.3rem);
	}
	.sidebar-nav {
		margin-top: 4rem;
		padding: 2rem 1rem;
		flex: 1 1 auto;
	}

}
@media screen and (max-width: 500px){
	html{
		font-size:42%;
	}
	.sidebar-nav {
		margin-top: 3.7rem;
		padding: 1.8rem 1rem;
		flex: 1 1 auto;
	}
}