/* CSS Document */
/*Variables*/
:root{
	--menu-lateral-size:200px;
	--radius:0.6em;
	--shadow:0px 0px 2px 0px #1D2A35;
	
	
	}
body{color:#333;
	background-color:#f7f7f7;}
body.dark{
	color:#e4e4e4;
	background-color:#18222b;

}


	/*replaced for js*/
/*@media (prefers-color-scheme: dark) {
 :root{
	 color:#e4e4e4;
	 background-color:#18222b;
	 
 }
}*/
/*end variables*/
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  .dark * {
    scrollbar-width: auto;
    scrollbar-color: #a3a3a3 #303030;
  }

  /* Chrome, Edge, and Safari */
  .dark *::-webkit-scrollbar {
    width: 14px;
  }

  .dark *::-webkit-scrollbar-track {
    background: #303030;
  }

  .dark *::-webkit-scrollbar-thumb {
    background-color: #a3a3a3;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
/*.Net field validator*//*Esconde os Asp.net validators*/
span[style*="visibility:hidden"]{   display:none !Important;}
span,b,strong,em,i,s {font:inherit;}
*{box-sizing: border-box; margin:0;padding:0; }
*{
	font-size: 16px;
	font-family: "Roboto", Verdana, Geneva, sans-serif;
	line-height: 1.7em;
	
}
b,strong{ font-weight: 600;}
a{	text-decoration: none; color:inherit;}
h1,h2,h3,h4,h5,h6{
	font-family: "Roboto", Verdana, Tahoma, Geneva, sans-serif;
	font-weight: 400;
	margin:0.7em 0em ;
	border-bottom:solid 1px rgba(204, 204, 204, 0.3)
}
h1{font-size:2.4em; padding:0.2em 0.5em 0.3em 0.0em; }
h2{font-size:1.8em; padding:0.3em 0.5em 0.3em 0.0em}
h3{font-size:1.4em; padding:0.3em 0.5em 0.3em 0.0em}
h4{font-size:1.2em; padding:0.3em 0.5em 0.3em 0.0em}
h5{font-size:0.8em; padding:0.3em 0.5em 0.3em 0.0em}
h6{font-size:0.8em; padding:0.3em 0.5em 0.3em 0.0em}
/*Text block that generally goes after a heading*/
/*TODO margin top only after headings*/
.lead{font-size: 1.3em;font-weight: 400; color: inherit; opacity: 0.8; margin-bottom: 1em; margin-top: -0.8em;}
table{
	border-collapse:collapse;	
	box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.1);
	margin: 0.4em 0;
}
table caption{
	font-weight: bold;
	}
table th,table td{
	border: 1px solid #CCC; padding:0.2em 0.4em;
}
table th{
	font-weight: bold;
}
table td{}
table tr{}
table tr:nth-of-type(odd){}

.table_row_noborder td,.table_row_noborder th{border-left:none ; border-right: none;}
.table_noborder th, .table_noborder td{border:none;}

/*pre{ line-height:1em}*/
pre code{line-height:1.5em; border:solid 1px rgba(204, 204, 204, 0.3) ; margin: 0.8em;;
}
pre code.hljs{ padding:0.5em !important}/*todo*/
/*style for code thats is not direct child of pre*/
:not(pre) > code{
	/*font-weight: 600;*/
	font-size: inherit;
	color: rgb(240, 0, 0);
	background-color: var(--light);
	padding: 0.1em 0.4em;
	border-radius: var(--radius);
}
.dark :not(pre) > code{ color: rgb(255, 94, 0);}
h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{font-size: inherit;  background-color:inherit !important; color: inherit;}

p a,span a,.callout a,.alert a, table a{
	text-decoration: underline;
}

.title,.subtitle{display: block; margin: 0; padding: 0;}
.title{ font-weight: 500; }
.subtitle{font-weight: 300; opacity: 0.8; }

.language-sql{}
.language-html{}
.language-css{}

header{
	position:fixed;
	overflow-y: hidden;
overflow-x: hidden;
	
	width:100%;
	
background: rgb(58,137,199);
background: linear-gradient(90deg, rgba(58,137,199,1) 0%, rgba(66,121,218,1) 100%);
z-index: 99999999999999;/*to not conflict with copy paste plugin*/


  }
header .logo{
	background-image: url(../images/Logo_BlueCodeAcademy_vertical_branco.png);
	background-repeat: no-repeat;
	height:55px;
	width: 350px;
	max-width: 350px;
	float: left;

	background-position: 10px 10px;
	background-size: 300px;	
	display: block;


}
header .logo img{}
header #googlesearch{ margin-top: 0.5em; border-radius: 1em; max-width: 150px;; ;}

header #toggleDarkMode{ display: block; float: right; padding: 0 0.5em; margin: 1em;  border-radius: var(--radius); background-color: rgba(0, 0, 0, 0.1); }
header #toggleDarkMode input{ display: none;}
header #toggleDarkMode span{ color: white;}
header #toggleDarkMode:hover{ cursor: pointer; background-color: rgba(0, 0, 0, 0.6);}

header menu{ 
overflow:auto;
width:100%;
background-color:#333;


 }
header menu a{padding:0.2em 0.4em; color:white;}
header menu a:hover{ background-color:#039;}

menu.reference{
	margin-top:80px;
	padding-bottom: 50px;;
	
position:fixed;  
float:left;
overflow-y: scroll;
overflow-x: hidden;

height:calc(100% - 60px);;
 width:var(--menu-lateral-size)}
menu.reference{ } 

menu.reference h1,menu.reference h2,menu.reference h3{ font-size: 1.2em; padding:0.4em 0.8em 0.4em 0.8em;}
menu.reference a{ font-size:0.9em; padding:0.4em 0.8em 0.4em 0.8em; margin: 0 0.2em; border-radius:var(--radius); display:block; clear:both; line-height: 1.2em;; }
menu.reference a:hover{	
	background-color:rgba(210, 234, 242, 0.2)
}
menu.reference a.active{  background-color:rgba(10, 172, 64, 0.6) }
menu.reference h6{}
menu.reference .submenu{display: none; margin-left: 0.5em;}
menu.reference .submenu a{border-left: 1px solid rgba(187, 187, 187, 0.603);}
menu.reference .submenu:has(a.active){display: block !important;}

menu.reference .active + .submenu{display: block !important;}

/*
@media (max-width: 990px) {
    menu.reference {
        overflow-y: scroll;
    }
}
*/

.main{ padding:0.4em 0.6em 0.4em 0.8em;padding-top:80px; padding-left:calc(var(--menu-lateral-size) + 1em); overflow: auto;   }
.main .content{
	/*width:calc(100% - var(--menu-lateral-size));*/
	max-width:800px; 

margin: auto;


}/*lateral space*/
@media (min-width: 1300px) {
	.main .content {
		float: left;
	}
  }

.main .content > h1:first-child,.main .content > h2:first-child{
	margin-top:0 ;
	}

	.main ul,.main ol{margin: 0.5em 2em;}

	.lateral_bar{   float: left; overflow: hidden;  }
	.bcjokes{ width: 100%; max-width: 300px;  float: left; }
	.bcjokes::before{ content: "Programmer Humor"; font-size: 0.7em;    }
	@media (max-width: 1300px) {
		.lateral_bar{float: right;  width: 100%; clear: both; margin-top:1em; border-top:solid 5px var(--light); }
		
	  }
	  .bcjokes .css_code{ font-size:1.2em;  }
	  .bcjokes .css_code pre{font-size:inherit; display: block;  }
	  .bcjokes .css_code code{ font-size:inherit ; padding: 1em !important; margin: 1em 0.5em; ; border: solid 2px; overflow: hidden; ; 
	
		
	}
	  .bcjokes .quote{
		width: 100%;
		overflow: auto;		
		font-size: 1.6em;
		margin: 1em 0.5em;
		background-color: rgba(20, 20, 20, 0.9);
		text-align: center;
	}
	.bcjokes .quote blockquote{ font-size: inherit; font-weight: 200; border: solid 5px rgba(255, 255, 255, 0.6); padding: 0.8em; margin: 0.8em;}
	
	  .bcjokes .quote blockquote cite {
		display: block;
		font-style: italic;
		text-align: right;
	  }
	  .bcjokes .quote blockquote cite:before {
		content: "- ";
	  }


	  .menu_block{overflow: auto;}
	  .menu_block a{ display: block; 
		float: left; 
		overflow: auto; border-radius: var(--radius); 
		margin: 0 0.5em 0.5em 0; padding: 0.5em; border: solid 1px var(--light); 
		}
	  .menu_block img, .menu_block svg{display: block; float: left; width: 50px; height: auto; margin:0.5em 1em 0.5em 0.5em; fill: currentColor; }
	  .menu_block div{display: block; float: left; max-width: 200px;}




.example{
	border:solid 1px #ccc; 
	border-left:solid 1px #ccc; 
	padding:0.6em 0.6em;
	border-radius: var(--radius);
	
	}
	.example legend{ font-weight: bold; }

	.form_flex{  display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;}
	.form_flex label{ float: left;min-width: 31%;   ;border-radius: var(--radius); border: solid 1px var(--light); padding: 0.5em; margin: 0 0.5em 0.5em 0;}
	.form_flex label span{ display: block; clear: both; }

	.form_table{ }
	.form_table label{overflow: auto; display: block; float: left; border-radius: var(--radius); border: solid 1px var(--light); padding: 0.5em; margin: 0 0.5em 0.5em 0;}
	.form_table label span{ display: block; float: left; margin-right: 0.5em; }


.group_code_result{ overflow: auto; clear: both;  
	 }
.group_code_result .group_code,.group_code_result .group_result{  margin: 0.2em; }
	.group_code_result .group_code{ }
	.group_code_result .group_result,.group_result{ float: left; padding: 1em; padding-top: 0.5em; border: solid 1px var(--light); border-radius: var(--radius);}
/*PLugin copypaste https://github.com/arronhunt/highlightjs-copy*/
.hljs-copy-wrapper{position:relative;overflow:hidden}.hljs-copy-wrapper:hover .hljs-copy-button,.hljs-copy-button:focus{transform:translateX(0)}.hljs-copy-button{position:absolute;transform:translateX(calc(100% + 1.125em));top:1em;right:1em;width:2rem;height:2rem;text-indent:-9999px;color:#fff;border-radius:.25rem;border:1px solid #ffffff22;background-color:#2d2b57;background-color:var(--hljs-theme-background);background-image:url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="white"/></svg>');background-repeat:no-repeat;background-position:center;transition:background-color 200ms ease,transform 200ms ease-out}.hljs-copy-button:hover{border-color:#ffffff44}.hljs-copy-button:active{border-color:#ffffff66}.hljs-copy-button[data-copied="true"]{text-indent:0;width:auto;background-image:none}@media(prefers-reduced-motion){.hljs-copy-button{transition:none}}.hljs-copy-alert{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}



/*GOOGLE SEARCH*/
#___gcse_0{top:-2000px; position: absolute;}/*esconde*/
.gsc-results-wrapper-overlay{top:15% !important;}