.main{
	position: fixed;
	transition: margin-left 0.5s;
	height: 94%;
	margin-left: 0;
	overflow-y: auto;
	scroll-behavior: smooth;
	top: 58px; /*60 before*/
	background-image: url("../img/bg.webp");
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: center; 


}

.main_unfixed{
	transition: margin-left 0.5s;
	/*height: 94%;*/
	margin-left: 0;
	overflow-y: auto;
	scroll-behavior: smooth;
	top: 58px; /*60 before*/
	background-image: url("../img/bg.webp");
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: center; 

}

.navbar {
	width: 100%;
	font-family: 'Nunito', sans-serif;
	font-size: 20px;
	
}
.sin{
	font-family: 'Noto Serif Sinhala', serif;
}

.carousel, .pgfooter{
	margin: -4px -10.5px 0px -10.5px;
}

/*in home page background images*/
.home_image{
    background-position: center;
    background-repeat: no-repeat;
    height: 50vh;
}
.section_div_m{
	background: rgba(255, 255, 255, 0.26);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0);

}
.section_div{
	margin-top: 10px;
	background-color: whitse;
	/*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
	background: rgba(255, 255, 255, 0.67);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	-ms-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0);

}
.section_div h2, .section_div h3, .section_div h4, .section_div h5, .section_div h6{
	font-family: 'Hammersmith One', sans-serif;
}
.section_div h4{
	margin-top: 10px;
}
.section_div h2{
	margin-top: 5px;
}
.maintitles{
	text-align: center;
	font-family: 'Lexend', sans-serif;
}
.admin-sections{
	margin-top: 10px;
	background-color: whiteds;
	background: rgba(255, 255, 255, 0.67);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	-ms-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0);
}
.bg-w{
	background-color: white;
}
#site-main{
	margin-bottom: 150px;
}
pre{
	max-height: 300px;
	max-width: 100%;
	overflow: scroll;
	padding: 10px 20px 10px 20px;
	user-select: text;
	white-space: pre-wrap;
	/*background: rgba(255, 255, 255, 0.7);*/
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(8.4px);
	-webkit-backdrop-filter: blur(8.4px);
	border: 1px solid rgba(108, 108, 108, 1);
}


 /* Custom CSS for the CodeMirror text areas */
 .CodeMirror {
   
   border: 1px solid #ccc;
   border-radius: 5px;
   font-family: "Courier New", Courier, monospace;
 }
 .CodeMirror-selected { background: #d9d9d9; }
 .CodeMirror-line-numbers { width: 40px; background-color: #333; color: #fff; }

.mwidth{
	width: 80%;
}
.tryit , .copyButton{
	margin-bottom: 10px;
}

.tryitsmall{
	font-weight: bolder;
	font-size: 10px;
	margin-bottom: 10px;
	margin-top: 4px;

}

.fstalert{
	margin-top: 10px;
}

.b{
	font-weight: bolder;
}

.code_element {
	width: 100%;
	border-radius: 5px;
	color: rgb(255, 0, 0);
	background-color:rgb(192,192,192);
	padding: 1px 6px 2px 6px;
	font-size: 16px;
}

kbd{
	width: 100%;
}
.note{
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
background: #457fca;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #5691c8, #457fca);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #5691c8, #457fca); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.top50{
	top: 50%;
}

.ths{
	text-align: center;
}
/*-----------------------------------------------------------------------------------------------*/
.pointer{
	cursor: pointer;
}
.nonselect{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}
.selecttext{
    -webkit-touch-callout: text; /* iOS Safari */
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* Internet Explorer/Edge */
	user-select: text;
}
.selectall{
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
	user-select: all;
}
/*-----------------------------------------------------------------------------------------------*/

@media (max-width: 575.98px) {
	#body2{
		top: 56px;
	}
	.dpnone{
		display: none;
	}
	.carousel{
		display: none;
	}
}
@media (max-width: 768px) { 
	.created_at{
		display: none;
	}
	#site-main{
	margin-bottom: 200px;
}
	
}

/* table pre element width set start */	

@media (max-width: 1250.98px) {
	.mobilewidthpre{
		width: 1100px;
	}
}
@media (max-width: 1200.98px) {
	.mobilewidthpre{
		width: 1050px;
	}
}
@media (max-width: 1150.98px) {
	.mobilewidthpre{
		width: 1000px;
	}
}
@media (max-width: 1100.98px) {
	.mobilewidthpre{
		width: 950px;
	}
}
@media (max-width: 1050.98px) {
	.mobilewidthpre{
		width: 900px;
	}
}
@media (max-width: 1000.98px) {
	.mobilewidthpre{
		width: 850px;
	}
}
@media (max-width: 950.98px) {
	.mobilewidthpre{
		width: 800px;
	}
}
@media (max-width: 900.98px) {
	.mobilewidthpre{
		width: 750px;
	}
}
@media (max-width: 850.98px) {
	.mobilewidthpre{
		width: 700px;
	}
}
@media (max-width: 800.98px) {
	.mobilewidthpre{
		width: 650px;
	}
}
@media (max-width: 750.98px) {
	.mobilewidthpre{
		width: 600px;
	}
}
@media (max-width: 700.98px) {
	.mobilewidthpre{
		width: 550px;
	}
}
@media (max-width: 650.98px) {
	.mobilewidthpre{
		width: 500px;
	}
}
@media (max-width: 600.98px) {
	.mobilewidthpre{
		width: 450px;
	}
}
@media (max-width: 550.98px) {
	.mobilewidthpre{
		width: 400px;
	}
}
@media (max-width: 500.98px) {
	.mobilewidthpre{
		width: 350px;
	}
}
@media (max-width: 450.98px) {
	.mobilewidthpre{
		width: 300px;
	}
}
@media (max-width: 400.98px) {
	.mobilewidthpre{
		width: 250px;
	}
}
@media (max-width: 350.98px) {
	.mobilewidthpre{
		width: 200px;
	}
}
@media (max-width: 300.98px) {
	.mobilewidthpre{
		width: 150px;
	}
}

/* table pre element width set end */	


@media (min-width: 320.98px){
	.imgmobilewidth{
		max-width: 300px;
	}
}
@media (min-width: 475.98px){
	.imgmobilewidth{
		max-width: 430px;
	}
}

@media (min-width: 575.98px){
	.imgmobilewidth{
		max-width: 500px;
	}
}
@media (min-width: 768px) { 
	.imgmobilewidth{
		max-width: 700px;
	}
	


}

@media (min-width: 992px) {
.imgmobilewidth{
		max-width: 800px;
	}
}


@media (min-width: 1200px) {
	.imgmobilewidth{
		max-width: 1100px;
	}
}


@media (min-width: 1400px) {
.imgmobilewidth{
		max-width: 1300px;
	}
}
.custom-abbr::after {
  font-size: 24px; /* Change this value to your desired font size */
}


.m-top-10{
	margin-top: 10px;
}
.t-title{

  background-color: red;
}

.defenetion{
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	background: #457fca;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #5691c8, #457fca);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #5691c8, #457fca); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	margin-bottom: 10px;
}

.def-content{
	background-color: rgba(127,126,126,0.46);
}
/*
.min-w{
	min-width: 500px;
}
*/
/*this is site purple color */
.site-theme{
	color: #6d27d6;
}

.site-theme-bg{
	background-color: #6d27d6;
}

.site-theme-bg-gradient{
	background: rgb(76,0,145);
	background: -moz-linear-gradient(90deg, rgba(76,0,145,1) 0%, rgba(109,39,214,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(76,0,145,1) 0%, rgba(109,39,214,1) 100%);
	background: linear-gradient(90deg, rgba(76,0,145,1) 0%, rgba(109,39,214,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c0091",endColorstr="#6d27d6",GradientType=1); 
}
/*--------------------------*/

.c-w{
	color: white;
}
.icn:hover{
	color: gray;
}
/* thois is for forms in log in & sign up*/

.font-size-20{
	font-size: 20px;
}
.font-size-40{
	font-size: 40px;
}
.font-size-12{
	font-size: 12px;
}

/* this is for navigation */
.dropdown-item:hover{
	background-color: gray;
}

.dropdown-item{
	font-size: 20px;
}

.min-width-500{
 	min-width: 500px;
 }
 .min-width-300{
 	min-width: 400px;
 }
/*
.scrollable-table {
    max-height: 400px;
    overflow-y: auto;
    display: block;
  }
.scrollable-tbody {
    max-height: 300px; 
    overflow-y: auto;  
}


.scrollable-thead {
    background-color: #f8f9fa;
    position: sticky;
}
*/
.table-container {
    max-height: 500px; /* Set a maximum height for the table container */
    overflow-y: auto; /* Enable vertical scrolling */
}

.categories{
	padding: 60px;
	margin: 5px;
	font-size: 25px;
	text-decoration: none;
	color: black;
	background: rgba(255, 255, 255, 0.57);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}

.categories:hover{
	
	color: white;
	background: rgba(85, 82, 82, 0.57);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}

.tryit, .copyButton{
	font-family: 'Noto Serif Sinhala', serif;
}
.login_form, .signup_form, .user_edit_form{
	background: rgba(255, 255, 255, 0.40);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	-ms-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.75);
}

.dashboard_user{
	background: rgba(255, 255, 255, 0.44);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	-ms-backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.75);
}
.tdn{
	text-decoration: none;
}
/* google icon*/ 
.fa-google {
  background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.fa-google:hover{
	color: red;
}
/* google icon*/ 
/* bootstrap mods */

.alert-success{
	color: black;
	background: rgba(15, 63, 39, 0.58);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	-ms-backdrop-filter: blur(20px);
	border: 1px solid rgba(15, 63, 39, 0.75);
}

.alert-primary{
	color: black;
	background: rgba(22, 58, 169, 0.58);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	-ms-backdrop-filter: blur(20px);
	border: 1px solid rgba(15, 63, 39, 0.75);
}

.alert-danger{
	color: black;
	background: rgba(184, 0, 0, 0.40);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	-ms-backdrop-filter: blur(20px);
	border: 1px solid rgba(15, 63, 39, 0.75);
}


/* ------------- */
/*--- prism line numbers --*/
.line-numbers .line-numbers-rows {
      counter-reset: linenumber; /* Initialize line numbers counter */
    }
    .line-numbers-rows .line-numbers-row {
      counter-increment: linenumber; /* Increment line numbers counter */
      color: #999; /* Change line number color */
    }
    .line-numbers-rows .line-numbers-row::before {
      content: counter(linenumber); /* Display line number */
      position: absolute;
      left: -2em; /* Adjust the position of line numbers */
    }
/*--- prism line numbers --*/
.ytvideo{
	max-width: 600px;
}

/*---------------------------------*/

.blur{

	background: rgba(255, 255, 255, 0.44);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3px);
	-ms-backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);

}