@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Francois+One|Rajdhani|Teko');

body {
  	background-color: #009cff;
	background-image: url("images/bg blueprint.png");
 	background-repeat: repeat;
	max-width:1200px;
	margin: auto;
}
html > div[style] {
  display: none !important;
}
.page{
	width: 100%;
	background-color: hsla(0,0%,0%,0.19);
/*	border-style: solid;*/
}
.register_loading_icon{
    margin-left: 45%;
	animation: processing_rotate 1s ease-out 0s infinite;
}
@keyframes processing_rotate {
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.signup-beta{
	position: relative;
	top: 50px;
	font-family: "Rajdhani";
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	 
}
.signup_beta_msg{
	text-align: center;
	font-size: 20px;
	color: white;
	font-family: "Rajdhani";
	font-weight: 700;
	
	text-shadow: 3px 3px 4px rgba(0,0,0,1.0);
	
	line-height: 20px;
	height: auto;
}
.welcome_member_message{
	background-color: #62920C;
    border-radius: 10px;
	margin-top: 20px;
}
.welcome_member_message > div:nth-child(1){
    background-color: #2f4606;
    color: white;
    font-family: "Rajdhani";
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
    font-size: x-large;
    font-weight: 400;
}
.welcome_member_message > div:nth-child(2){
	font-family: "Rajdhani";
    padding: 10px;
	color: white;
}
.return_btn{
	background: #964c00;
    border-radius: 10px;
    text-align: center;
    width: max-content;
    margin: 0 auto;
    padding: 10px;
    color: white;
    font-weight: 900;
	transition: background 0.5s ease;
}
.return_btn:hover{
	background: #E47300;
	transition: background 0.1s ease;
}

.css_return_to_home{
	transition: padding-left 0.5s ease;
	padding-left: 0px;
}
.css_return_to_home:hover{
	transition: padding-left 0.1s ease;
	padding-left: 10px;
}
.signup_beta_confirm_msg{
	font-size: 20px;
	color: white;
	font-family: "Rajdhani";
	font-weight: 700;
	
	text-shadow: 3px 3px 4px rgba(0,0,0,1.0);
	
	line-height: 20px;
}

#top_msg{
	height: auto;
}



.css_text_apply{
	font-family: "Rajdhani";
}
.css_terms_checkbox{
/*	position: absolute;*/
    bottom: 5px;
    right: 61px;
}

.css_header{
    background-image: linear-gradient(#323232, #232323);
    width: 100%;
	position: relative;
    /* line-height: 0px; */
    margin-top: 10px;
/*     height: 58px; */
    box-shadow: 4px 4px 4px hsla(0,0%,0%,0.25);
	display: grid;
    grid-template-columns: max-content auto max-content min-content;
}
.css_header_title{
	font-family: "Teko";
    text-transform: uppercase;
    color: white;
    font-size: 60px;
    padding-left: 10px;
	

    /* bottom: 0px; */
    line-height: 54px;
    margin-top: 15px;
}

.menu_cat_buttons{
	display: inline-block;
/*	position: absolute;*/
	bottom:0px;
	padding-left: 10px;
}
.menu_cat_buttons ul { 
	list-style:none;
	margin: 0px 0px -5px 0px;
	padding: 0;
	position: absolute;
    bottom: 0px;
}


.menu_cat_buttons ul li{
	display:inline-block;
	
}
.menu_cat_buttons ul li:hover > ul{
	display: block; 
	opacity: 1;
	transition: opacity 1s ease-out;
}
.menu_cat_buttons ul li a{
	color:white;
	font-size: 30px;
	display: inline-block;
	position: relative;
	margin: 0px 10px 0px 0px;
	font-family: "Teko";
	text-decoration: none;
}
.menu_cat_buttons ul li a:hover{
	color:hsla(0,0%,100%,1.00);
	text-shadow: 0px 0px 5px white;
	text-decoration: none;
}






.menu_cat_buttons ul ul{
	position: absolute;
	top: 100%;
	display:none;
/*	z-index: 2000;*/

}
.menu_cat_buttons ul ul li{
	display:block;
	position: relative;
	background-color: rgba(0,0,0,0.75);
	padding:0px 10px 0px 10px;
	transition: padding 1s ease-out;
	z-index: 100;
}
.menu_cat_buttons ul ul li:hover{
	color: white;
	text-shadow: 0px 0px 2px white;
	padding:0px 0px 0px 20px;
	transition: padding 0.1s ease-out;
}
.menu_cat_buttons ul ul ul{ 
	left: 100%; 
	top: 100%;
}


.menu_cat_buttons ul li ul li a{
	color: hsla(0,0%,78%,1.00);
	font-size: 20px;
	padding: 0px 1px 0px 1px;
}
.menu_cat_buttons ul li ul li a:hover{
	color: white;
	text-shadow: 0px 0px 2px white;
}



.bean_counter{
/*	width: min-content;*/
	margin-right: 30px;
	position: relative;
}
.bean_line{
	background: white;
    width: min-content;
    padding: 0px 10px;
    border-radius: 50px 0px 0px 50px;
    float: right;
    transform: translate(0px, -50%);
    position: absolute;
    top: 50%;
    right: 10%;
    padding-right: 25px;
    font-family: "Teko";
    font-size: 29px;
    margin-right: 38px;
	transition: padding-right 0.9s ease;
}
.bean_counter:hover .bean_line{
	padding-right: 35px;
	transition: padding-right 0.1s ease;
}
.bean_circle{
background-color: white;
    padding: 9px;
    width: min-content;
    border-radius: 50px;
    transform: translate(0%, -50%);
    /* top: 50%; */
    position: absolute;
    /* float: right; */
    top: 50%;
    right: 0;
	transition: padding 0.9s ease;
}
.bean_counter:hover .bean_circle{
	padding: 5px;
	transition: padding 0.1s ease;
}

.bean{
	animation: bean-wiggle 2s infinite;
	transition: min-width 0.9s ease;
	min-width: 32px;
}
.bean_counter:hover .bean{
	min-width: 40px;
	transition: min-width 0.1s ease;
}

@keyframes bean-wiggle {
	0%   { transform: rotate(15deg)}
	50% { transform: rotate(-15deg)}
	100% { transform: rotate(15deg)}
}


/* #############################################################################################################*/
/* #############################################################################################################*/
/* #############################################################################################################*/
/* #############################################################################################################*/
/* #############################################################################################################*/
/* #############################################################################################################*/
/* #############################################################################################################*/
/* #############################################################################################################*/


.css_account_tab{
	display: inline-grid;
	float:right;
	margin: 7px 15px auto 0px;
	grid-template-areas:
    'username'
    'logout ';
}
.css_login_tab{
	display: inline-grid;
	float:right;
/*	 display: grid;*/
  	grid-template-areas:
    'login login'
    'password button'
	'forgot join';
	grid-gap: 1px;
	margin: 6px 5px 0px 0px;
	width: 190px;
}
.css_account_label{
    color: white;
    font-family: "Teko";
    font-size: 21px;
    line-height: 19px;
    padding-top: 5px;
}
.css_account_label:hover{
	color: hsla(202,100%,83%,1.00);
	cursor: pointer;
}
.css_login_fields{
	font-size: 10px;
    border-style: none;
    padding: 0px 0px 0px 0px;
    height: 17px;
    width: 100%;
    background-color: hsla(198,100%,75%,1.00);
	text-indent: 5px;
}
.css_login_button{
    border-style: none;
    font-size: 12px;
}
.css_forgot_pass{
	color: white;
	font-size: 12px;
}
.css_forgot_pass:hover{
	color: hsla(196,100%,85%,1.00); 
	cursor: pointer;
}
.recovery{
	border-style: solid;
	border-color: hsla(205,100%,50%,1.00);
}

.pass_requirements{
	font-family: "Rajdhani" !important;
	/* line-height: 16px; */
	font-size: 14px
}

.css_register_errors{
	font-family: "Rajdhani";
	font-size: 15px;
}

.css_free_lesson{
    padding-right: 10px;
	color: greenyellow;
	width: min-content;
}


.ts_tool_grid{
	display: grid;
	grid-template-columns: 50% 50%;
}
.ts_tool_vimeo_preview{
	width: -webkit-fill-available;
}
.ts_tool_course_name{
	padding: 10px;
    background-color: #324348;
    border-radius: 5px;
    color: white;
    margin-top: 10px;
}
.ts_tool_episode_name{
	margin-left: 25px;
    background: #bce5f3;
    padding: 3px 10px;
}
.ts_tool_timestamp_list{
	padding-left: 35px;
}
.ts_tool_single_timestamp{
	display: grid;
	grid-template-columns: 75px auto auto auto auto auto auto;
	grid-column-gap: 10px;
/*	background-color:  #4AB397;*/
	border-bottom: 1px solid lightblue;
	margin-bottom: 5px;
	padding: 5px;
	transition: background-color 0.4s ease;
}
.ts_tool_single_timestamp:hover{
	background-color:  #407F96;
	transition: background-color 0.1s ease;
	color: white;
}
.ts_tool_single_timestamp div {
	
}
.ts_tool_deny{
	background-color: crimson;
	border: none;
	border-radius: 5px;
}
.ts_tool_deny:hover{
	background-color: #870C24;
}
.ts_tool_accept{
	background-color: #2EDC13;
	border: none;
	border-radius: 5px;	
}
.ts_tool_accept:hover{
	background-color: #1C8A0B;
}








.under_construction{
    /* background-image: repeating-linear-gradient(45deg, #ffc800, #ff8d00 17px, #a53d00 16px, #a52100 39px) !important; */
    background-color: #ff7100;
    background-image: linear-gradient(0deg, #ff9249, transparent);
    text-shadow: 0px 0px 3px black, 0px 0px 5px black;
    color: #aee5ff !important;
    background-color: #8c0000 !important;
	/* line-height: 17px !important; */
    font-size: 19px !important;
    border-radius: 10px;
}


.newsletter_sub_button_new{
	color: white;
    background-color: #ff7100;
    /* padding: 0px; */
    /* margin: 0px; */
    text-align: center;
    /* border-radius: 10px; */
    margin-bottom: 2px;
    /* margin-top: 2px; */
    text-shadow: 0px 0px 4px black;
    box-shadow: 2px 2px 2px #0000004f;
    background-image: linear-gradient(0deg, #ff9249, transparent);
    /* line-height: 44px; */
    border: 2px dashed white;
}

.newsletter_sub_button_new:hover{
	background-color: #ffe031;
}
a{
	text-decoration: none;
}

.newsletter_invite{
	text-align: center;
	line-height: 51px;
	text-shadow: 2px 2px 5px black;
	margin-bottom: 10px;
}


/*Links Colors*/
.c_youtube:hover{	text-shadow: 0px 0px 4px  hsla(0,100%,53%,1.00) ; }
.c_twitter:hover{	text-shadow: 0px 0px 4px aqua;	}
.c_discord:hover{	text-shadow: 0px 0px 4px hsla(226,100%,70%,1.00);	}
.c_twitch:hover{	text-shadow: 0px 0px 4px hsla(270,100%,50%,1.00);	}
.c_newgrounds:hover{	text-shadow: 0px 0px 4px hsla(19,100%,50%,1.00);	} 
.c_patreon:hover{	text-shadow: 0px 0px 4px hsla(24,100%,50%,1.00);	} 


.css_forgot_pass_window{
	display:none;
	background-color: white;
	padding: 5px;
	position: absolute;
	    z-index: 100;
/*	width:200px;*/
	right:0px;
	box-shadow: 4px 4px 5px rgba(0,0,0,0.4);
	max-width: 270px;
}



.css_category_divider{
	font-family: "Teko";
	font-size: 30px; 
	background: hsla(0,0%,0%,0.68);
	color: white;
	padding: 3px 10px 0px 10px;
	
}


.css_category_divider_nobg{
	font-family: "Teko";
	font-size: 30px; 
	/* background: hsla(0,0%,0%,0.68); */
	color: white;
	padding: 3px 10px 0px 10px;
	
}


.css_courses_grid{
	width:100%;
	height:480px;
	display: grid;
/*	grid-gap: 10px;*/
	grid-template-columns: 25% 25% repeat(3, 16.5%);
    grid-template-rows: 25% 25% 22.5% auto;
  	grid-template-areas:
    'course_large course_large course_mid course_mid course_1'
    'course_large course_large course_mid course_mid course_2'
	'course_large course_large course_3 course_4 course_5'
	'course_6 course_7 course_8 course_9 course_10'; 
}
.css_courses_grid_v2{
	width:100%;
	display: grid;
/*	grid-gap: 10px;*/
	grid-template-columns: repeat(2, 50%);
	grid-template:
        "tabloid_1 tabloid_1 tabloid_1 tabloid_1 tabloid_2 tabloid_2"
        "tabloid_1 tabloid_1 tabloid_1 tabloid_1 tabloid_3 tabloid_3"
        "tabloid_4 tabloid_4 tabloid_4 tabloid_5 tabloid_5 tabloid_5"
        "tabloid_6 tabloid_6 tabloid_6 tabloid_7 tabloid_7 tabloid_7"
		"tabloid_8 tabloid_8 tabloid_9 tabloid_9 tabloid_10 tabloid_10"
		"tabloid_11 tabloid_11 tabloid_12 tabloid_12 tabloid_13 tabloid_13"
		"tabloid_14 tabloid_14 tabloid_15 tabloid_15 tabloid_16 tabloid_16"
}
.css_course_tabloid{
	background: hsla(0,0%,0%,0.30);
	background-size: 100% 100%;
	border-style: outset;
	border-width: 1px;
	border-color: hsla(0,0%,42%,0.69);
	position:relative;
	min-height: 220px;
	overflow: hidden;
}
.css_course_tabloid:hover{
	border-width: 1px;
	border-color: hsla(0,0%,86%,1.00);

}
.css_video_thumb{
	position: absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	object-fit: fill;
	z-index: 21;
	opacity:0;
	transition: opacity 0.2s ease-in;
}
.css_video_thumb:hover{
	opacity:1;
	transition: opacity 0.2s ease-in;
}

.css_course_tabloid_number_4, .css_course_tabloid_number_5, .css_course_tabloid_number_6, .css_course_tabloid_number_7{
	min-height: 325px;
}

.css_course_tabloid_image{
	width:100%;
	height:100%;
	/* object-fit: cover;	 */
	position: absolute;
}
.css_course_tabloid_field{
    position: absolute;
    top: 0;
    /* background-color: hsla(0,0%,0%,0.64); */
    width: 100%;
    z-index: 10;
    height: 30px;
    text-shadow: 2px 2px 4px black;
	background-image: -webkit-linear-gradient(bottom left, black, transparent);
	background-image: -o-linear-gradient(bottom left, black, transparent);
	background-image: linear-gradient(to top right, black, transparent);
}
.css_course_tabloid_field_little{
	height: 20px;
}
.css_course_tabloid_title{
	position: absolute;
	font-family: "Teko";
	color: white;
	font-size: 30px;
/*	font-size: 30%;*/
	padding: 15px 0px 0px 10px;
	text-transform: uppercase;
	top:-20px;
/*	line-height: 5px;*/
}
.css_course_tabloid_amt{
	position: absolute;
	font-family: "Teko";
	color: white;
	font-size: 30px;
/*	font-size: 30%;*/
	padding: 15px 0px 0px 10px;
	text-transform: uppercase;
	top:-20px;
/*	line-height: 5px;*/
}
.css_course_tabloid_description{
    font-family: "Teko";
    text-transform: uppercase;
    color: white;
    padding: 10px 0px 5px 10px;
    font-size: 18px;
    line-height: 16px;
    display: block;
}
.css_tab_title_small{
	font-size: 18px;
    padding-top: 18px;
}
.css_tab_description_small{
	font-size: 13px;
    padding-top: 3px;
    margin: -1px;
    display: block;
    line-height: 11px;
}
.css_course_tabloid_open{
	color: hsla(198,100%,69%,1.00);
	text-transform: uppercase;
	background-color: black;
	padding: 15px 10px 10px 10px;
	margin: 0px;
	line-height: 0px;
	font-family: "Teko";
	position: absolute;
	z-index: 100;
	bottom: 0px;
	right: 10px;
	font-size: 30px;
/*	text-shadow: -2px -2px 1px black, 2px -2px 1px black, 2px 2px 1px black, -2px 2px 1px black;*/
/*	color: red;*/
	opacity: 0;
	pointer-events: none;
}
.css_course_tabloid_open_small{
    line-height: 0px;
    padding: 10px 5px 7px 5px;
    font-size: 21px;
}
video::-webkit-media-controls-fullscreen-button {
    display: none;
}





.css_quick_bits_grid{
	display:grid;
	grid-template-columns: auto auto auto auto;
	width:100%;
}
.css_course_tabloid_quick_bit{
	background: hsla(0,0%,0%,0.30);
/*	background-image: url("images/placeholder_banner.png");*/
	background-size: 100% 100%;
	height: 180px;
	
	border-style: outset;
	border-width: 1px;
	border-color: hsla(0,0%,42%,0.69);
/*	box-sizing: border-box;*/
	position:relative;
}
.css_course_tabloid_quick_bit:hover{
	border-width: 1px;
	border-color: hsla(0,0%,86%,1.00);
}
.css_course_tabloid_open_quick{
    color: hsla(198,100%,69%,1.00);
    text-transform: uppercase;
    background-color: black;
    padding: 12px 7px 8px 6px;
    margin: 0px;
    line-height: 0px;
    font-family: "Teko";
    position: absolute;
    z-index: 100;
    bottom: 0px;
    right: 10px;
    font-size: 21px;
    /* text-shadow: -2px -2px 1px black, 2px -2px 1px black, 2px 2px 1px black, -2px 2px 1px black; */
    /* color: red; */
    opacity: 0;
    pointer-events: none;	
}












/*Account CSS*/

.home_page_features_grid select{
	width:100%;
	height: auto;
	font-family: "Rajdhani";
	font-size: 28px;
}
.home_page_features_grid > div > div{
	font-family: "Teko";
	font-size: 43px;
}
.home_page_features_grid > div{
    background-color: orange;
    border: 3px inset;
	min-height: 200px;
}


/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
	background-color: white;
}

.pl_main_class{
	text-decoration: inherit;
	padding: 0px;
    border-width: 0px;
}
.pl_main_class_2{
	text-decoration: inherit;
}




/* 
############################################################
*/

.course_title{
	text-align: center;
    width: 100%;
    background: white;
    /* position: absolute; */
    font-family: "Teko";
    font-size: 24px;
    padding: 0px;
    height-min: 400px;
    /* line-height: 1;
}

.css_new_course_title{
    padding: 0px 0px 0px 10px;
    /* width: 288px; */
    /* margin: 5px 0px 5px 0px; */
    height: 100%;
    border-style: none;
}
.css_new_course_submit{
	height: 100%;
	padding: 0px 20px 0px 20px;
}
.css_course_submit_btn{
	/* width: 86px; */
	height: 100%;
}


.css_acc_add_engine_logo{
    /* height: 100%; */
    width: 25px;
    background-color: black;
    float: left;
    margin: 5px 10px;
}
.css_acc_remove_engine{
	float: right;
    /* height: 100%; */
    padding: 6px;
    margin: 0px 10px;
}

.css_acc_engine_list{
	background-color: beige;
    margin: 0px 0px 5px 0px;
    list-style: none;
    text-transform: uppercase;
    font-family: "Teko";
    font-size: 25px;
    padding: 5px 0px 0px 20px;
}
.css_acc_add_course{
    height: 100%;
    /* padding: 0px 0px 0px 10px; */
    /* width: 207px; */
}
.css_new_course_thumb_id{
    /* width: 53px; */
    /* height: 100%; */
}
.css_new_course_active{
    height: 100%;
    padding: 0px 0px 0px 10px;
    /* width: 87px; */
}
.css_add_course_thumb_upload{
    /* width: 113px; */
    height: 100%;
}
.css_acc_add_course_engine{
    height: 100%;
    padding: 0px 0px 0px 10px;
    /* width: 195px; */
}
.css_new_course_select{
	background-color: #d4f3ff;
}
.css_course_price{
	height: 49px;
	/* width: 50px; */
	padding: 0px 0px 0px 10px;
	/* margin-top: 5px; */
}
.css_course_value{
	height: 49px;
	width: 150px;
	padding: 0px 0px 0px 10px;
	margin-top: 5px;
}
.css_new_tut_select{
	background-color: #ffddb9;
}






.css_engine_thumb{
    width: 33px;
    z-index: 15;
    position: absolute;
    bottom: 10px;
    right: 10px;
    /* text-shadow: 0px 0px 4px black; */
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 3px 2px #222);
}
.css_engine_thumb_large{
    width: 40px;
}

.new_vid_tags{
	display: flex;
	flex-direction: row;
	column-gap: 5px;
}

.new_vid_tags > div{
	user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	
	/* background-color: rgb(214, 214, 214);
	border-radius: 10px;
	margin-right: 5px;
	width: max-content;

	padding: 5px;
	margin: 2px 0px; */
}


#id_lesson_loader_content{
	display: flex;
	flex-direction: column;
	row-gap: 5px;
}

.css_sort_list_episodes{
	
}
.css_lesson_order_list{
	list-style: none;
    padding: 0px;
	width: 100%;
	max-height: 300px;
    overflow: hidden;
    overflow-y: scroll;
}

.lesson_tag_chkb{
	display: none;
}
.lesson_tag_chkb:checked ~ .lesson_tag_chkb_label{
	background-color: crimson;
}

.lesson_tag_chkb_label{
	padding: 10px;
    background-color: #eaeaea;
    border-radius: 10px;
    display: inline-block;
	transition: background-color 0.3s ease;
    /* margin: 5px; */
}


div div ul li.ui-state-highlight {
	height:20px;
}


/* Lesson Watch page*/

.annotate_button {
	margin: 0px 20px;
	position: relative;
}
.annotate_button > #annotate_button_detect{
	font-family: "Rajdhani";
    font-weight: 700;
    color: white;
    font-size: 22px;
    text-shadow: 2px 2px 3px #00000061;
    padding-left: 20px;
    background-color: #009cff;
    border-radius: 5px;
	transition: background-color 0.6s ease, text-shadow 0.6s ease, padding-left 0.6s ease;
}
.annotate_button > #annotate_button_detect:hover{
	background-color: #FF6E00;
	text-shadow: 2px 2px 3px #000000;
	transition: background-color 0.1s ease, text-shadow 0.1s ease, padding-left 0.1s ease;
	padding-left: 40px;
}

.annotate_button #pt_arrow_l{
	padding-right: 30px;
	word-break: keep-all;
	transition: padding-right 0.6s ease, opacity 0.6s ease;
	opacity: 0;
}
.annotate_button #pt_arrow_r{
	padding-left: 30px;
	transition: padding-left 0.6s ease, opacity 0.6s ease;
	opacity: 0;
}

.annotate_button>#annotate_button_detect:hover #pt_arrow_l{
	padding-right: 0px;
	transition: padding-right 0.1s ease, opacity 0.1s ease;
	opacity: 1;
}
.annotate_button>#annotate_button_detect:hover #pt_arrow_r{
	padding-left: 0px;
	transition: padding-left 0.1s ease, opacity 0.1s ease;
	opacity: 1;
}
.annotate_tool_dashboard{
	background-color: #7DCCFF;
	position: relative;
}

.annot_instruct{
	margin: 0px 10px;
    font-family: "Rajdhani";
    font-weight: 700;
    color: white;
    font-size: 18px;
    text-shadow: 2px 2px 1px rgba(0,0,0,1), -2px -2px 1px rgba(0,0,0,0.7);
    top: 0px;
    position: absolute;
    transform: translate(0%, -100%);
    /* background-image: linear-gradient(0deg, #000a11, #4cb3ff36); */
    left: 0px;
    background-color: #000000cc;
    width: fit-content;
    padding: 0px 10px 0px 10px;
    /* height: 60px; */
    padding-top: 0px;
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.5s ease, padding 0.5s ease;
	border-radius: 20px 20px 0px 0px;
}
#annotate_button_detect:hover + div{
	max-height: 60px;
	padding: 30px 10px 30px 10px;
	transition: max-height 0.5s ease 0.3s, padding 0.8s ease;
}

.annot_steps_grid{
	position: relative;
	display:grid;
	grid-template-columns: 15% 20% auto 20%;
	width: 100%;
	font-family: "Rajdhani";
    font-weight: 700;
    color: white;
    font-size: 22px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.7);
}
.annot_steps_grid textarea{
	resize: vertical;
}
.annot_steps_grid input{
	padding: 5px;
    margin: 0px 10px;
    border-radius: 5px;
    font-family: "Rajdhani";
	text-align: center;
    font-size: 20px;
}
.annot_steps_grid select{
	padding: 5px;
    margin: 0px 10px;
    border-radius: 5px;
    font-family: "Rajdhani";
    font-size: 20px;
}
.annot_steps_grid textarea{
	padding: 5px;
    margin: 0px 10px;
    border-radius: 5px;
    font-family: "Rajdhani";
    font-size: 20px;
}

.annot_step_title{
    text-align: center;
    margin: 5px 0px;
    text-shadow: 1px 1px 4px #000000b3;
    color: #ffe000;
    font-size: 25px;
}
.annot_step_description{
	color: black;
	text-shadow: none;
	padding: 5px;
	font-size: 17px;
	text-align: center;
}
.annot_qialifiers{
    position: absolute;
    font-family: "Rajdhani";
    font-weight: 700;
    background-color: white;
    width: 60%;
    left: 50%;
	top: 10px;
    transform: translate(-50%, 0%);
    z-index: 20;
    border-radius: 10px;
    padding: 10px;
    color: black;
    text-shadow: none;
	font-size: 15px
}

.annot_more_info{
	color: #0057c4;
    text-decoration-line: underline;
}
.annot_more_info:hover{
	color: #0071FF;
}


.css_lesson_order_is_heading{
	background-color: #EFC5FF;
	font-size: 15px;
}
.css_lesson_order_is_heading_m{
	background-color: rgb(218, 124, 255);
	font-size: 20px;
}
.css_lesson_order_is_heading_l{
	background-color: rgb(201, 65, 255);
	font-size: 25px;
}



.css_item_is_heading_m{
	color: #ff8100 !important;
	/* padding: 5px 0px 5px 23px; */ 
	/* padding-left: 15px !important; */
    font-size: 20px !important;
    text-shadow: 0px 0px 2px rgba(255,0,0,0.39);
    font-weight: bold;
    line-height: 1.8 !important;
	background-color: black;
}

.css_item_is_heading_l{
	color: #ffd400 !important;
    /* padding: 5px 0px 5px 23px; */
    font-size: 17px !important;
    text-shadow: 0px 0px 2px rgba(255,0,0,0.39);        
    font-weight: bold;
    line-height: 1 !important;
	background-color: black;
	/* padding-left: 7px; */ 
	
}

.css_item_is_heading{
    color: red !important;
    /* padding: 5px 0px 5px 23px; */
   font-size: 15px;
	text-shadow: 0px 0px 2px rgba(255,0,0,0.39); 
/*    font-weight: bold;*/
    line-height: 0.8;
	background-color: black;
	/* padding-left: 25px; */
	display: grid;
    grid-template-columns: min-content auto;
}
.css_item_is_heading:hover{  
	/*	padding: 5px 0px 5px 33px;*/ 
}

.css_lesson_order_item{
    padding: 5px;
    display: grid;
    grid-template-columns: 18px auto max-content max-content max-content max-content max-content;
	column-gap: 10px;
    text-align: left;
}


/*
Lesson Content 
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/  
 
 
.css_lesson_page_product_mesage{
	background-color: rgba(0,0,0,0.6);          
/*	padding: 5px;*/
	font-family: "Rajdhani";  
	color: white;
}
.css_lesson_purchase_window{
	display:grid;
	grid-template-rows: 45px auto;
}
.css_lesson_page_product_mesage_title{    
    font-size: 30px;
    font-weight: 600;
    background-color: rgba(0,0,0,0.5); 
    width: -webkit-fill-available;
	padding: 0px 10px;
}
.css_lesson_purchase_btn{
	font-family: "Rajdhani";
    font-size: 30px;
    font-weight: 600;
}
.css_lesson_purchase_btn:hover{
	background-color:  rgba(0,113,184,1.00); 
}
.css_course_price_tag{
	font-size: 30px;
    font-weight: 800;
    float: right;  
    width: auto;
    padding-right: 10px;
}



/*
Course Content
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/


.css_lesson_container{
	background-color: #0000004f;
}

.css_lesson_title{
	font-family: "Rajdhani";
    font-weight: 700;
    color: white;
    font-size: 35px;
	text-shadow: 2px 2px 3px black;
	padding-left: 20px;
}
pre{
	background-color: #383838;
    padding: 20px;
    border-radius: 10px;
    box-shadow: bord;
    border: 1px inset white;
    background-image: linear-gradient(45deg, #383838, #131313);
}

.css_course_content_container{
/*    width: 200px;*/
    background-color: #0000004f;
    position: relative;
	min-height: 620px;
	overflow: auto;
	max-height: 400px;
}
.css_course_content_container::-webkit-scrollbar {
  width: 1em;
}

.css_course_content_container::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
.css_course_content_container::-webkit-scrollbar-thumb {
     background-color: #ff5900;
    outline: 1px solid slategrey;
    background-image: linear-gradient(90deg, #ff8100, #944b00, #ff8100);
}

.css_course_content_title{
    text-align: center;
    width: 100%;
    background: white;
/*    position: absolute;*/
    font-family: "Teko";
    font-size: 24px;
    padding: 0px;
	height-min: 400px;
/*    line-height: 1;*/
}
.css_course_content_lesson_item{
    font-family: "Rajdhani";
    color: white;
    font-size: 14px;
    list-style: none;
	/* background-color: rgba(0,0,0,0.67); */
	background-image: linear-gradient(45deg, rgba(0,0,0,0.67), transparent);
	padding: 3px 2px 2px 7px;
    transition: padding 0.1s ease-out;
    word-wrap: break-word;
    line-height: 1;
	/* border-radius: 0px 0px 17px 0px; */
	display: grid;
    grid-template-columns: min-content auto;
}
.css_course_content_lesson_item:hover{
	background-color: rgba(0,0,0,0.51);
	text-shadow: 0px 0px 2px rgba(255,255,255,0.39);
	padding: 10px 5px 10px 13px;

/*	padding: 5px 0px 5px 23px;*/
	transition: padding 0.1s ease-out;
}

.css_course_unordered_list{
	padding: 0px;
	margin-block-start: 0;
}

.css_course_display_grid{
	display: grid;
	grid-template-columns: 20% 80%;
}


.css_lesson_video{
	width: 100%;
	display: block;
}
.css_lesson_text_content{
	font-family: "Rajdhani";
	color: white;
	padding: 10px;
	/* background-color: #0000004f; */
}


/*
Email Newsletter Signup
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/

.css_newsletter_email_input{
	height: 20px;
    margin-top: 8px;
}
.css_newsletter_email_button{
	height: 26px;
    margin-top: 8px;
}


/*
Verify
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/
.css_return_after_verify{
	transition: padding-left 0.1s ease; 
}
.css_return_after_verify:hover{
	padding-left: 10px;
	transition: padding-left 0.2s ease; 
	color: rgba(0,166,166,1.00);
}


/*
Terms
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/
.css_terms{
	overflow-x: auto;
	white-space: pre-line;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}



.checkout_total{
	text-align: center;
    font-size: 41px;
    line-height: initial;
	color: #ff8d00;
    text-shadow: 0px 0px 5px #ff7600;
}
.checkout_delay{
	text-align: center;
	font-size: 15px;
}

.proceed_to_paypal{
	background-color: #ff7600;
	color: blue;
    padding: 13px;
    margin: 0px auto;
    border-radius: 5px;
    text-align: center;
    width: max-content;
}