@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800&display=swap&subset=cyrillic');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face
{
	font-family: 'consola';
	font-weight: 100;
	src: url('fonts/consolas/consola.ttf');
}

@font-face
{
	font-family: 'consolab';
	font-weight: 100;
	src: url('fonts/consolas/consolab.ttf');
}

@font-face
{
	font-family: 'consolai';
	font-weight: 100;
	src: url('fonts/consolas/consolai.ttf');
}

@font-face
{
	font-family: 'consolaz';
	font-weight: 100;
	src: url('fonts/consolas/consolaz.ttf');
}

@font-face
{
	font-family: 'iconz';
	font-weight: 100;
	src: url('fonts/mat_icons/regular.ttf');
}


html
{
  /*display: inline-block;*/
  /*display: flex;*/
}

*
{
  
  padding: 0px;
  margin: 0px;
  /*display: block;*/
}

div
{
  ddisplay: block;
}

body
{ 
	background-image: url("assets/bg.png");
	background-attachment: fixed;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	/*min-width: 1351px;*/
}

img
{
	user-select: none;
}









liztooltip
{
	display: none;
}

[lizards_tooltip_box]
{
	position: fixed;
	display: flex;
	flex-direction: column;
	font-family: 'roboto';
	font-size: 12px;
	z-index: 655355;
	max-width: 400px;
	background: rgb(30, 30, 30);
	padding: 5px;
	border: 1px solid rgb(100, 100, 100);
	color: white;
	user-select: none;
	pointer-events: none;
}













.top-navbar
{
  height: 85px;
  display: flex;
  background: rgba(21, 21, 22, 0.24);
}

.navbar-icon
{
  display: inline-block;
  /*background: green; */
  height: 100%;
  width: 85px;
  
  position: relative;
  margin-left: 1vw;
  
  background-image: url("assets/magic_hat.png");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
}

#navbar-head
{
  position: relative;
  top: 12.5%;
  font-size: 3em;
  font-family: 'Roboto Slab', serif;
  color: white;
}

.head-text-container
{
  display: inline-block;
  height: 100%;
}

.nav-side
{
  display: flex;
  flex-direction: column;
  width: 300px;
  min-width: 300px;
  /*margin: 6em 2vw;*/
  margin: 6em 50px 0px 30px;
}

/*.nav-side-border
{
  position: relative;
  height: 10px;
  width: 100%;
  background: white;
}*/

.nav_stuff_box
{
	display: flex;
	flex-direction: column;
	/*width: 100%;*/
	min-height: 551px;
	max-height: 1350px;
	background: rgba(9, 9, 17, 0.22);
	border-top: 10px solid white;
	padding: 10px 10px 10px 15px;
}

.page_content
{
	/*display: inline-block;*/
	display: flex;
	/*min-width: 1351px;*/
}

.article
{
  margin-top: 6em;
  /*display: inline-block;*/
  display: flex;
  width: 85%;
  float: right;
  /*background: ;*/
  flex-direction: column;
 /* transform: scale(0.8); */
}

.article_head
{
  /*display: inline-block;*/
  display: flex;
  border-left: 11px solid #FF00A8;
  /*flex*/
 /* padding-right: 100px; */
}

/*.arcl_side_border
{
  display: inline-block;
  width: 11px;
  background: #FF00A8;
}
*/
.arcl_header
{
  display: flex;
  flex-direction: column;
  /*position: relative;*/
  /*width: 100%;*/
  background: rgba(8, 8, 9, 0.13);
  
}

.arcl_header_p
{
  
  font-family: 'Roboto Slab', serif;
  /*font-size: 2vw;*/
  font-size: 35px;
  /*transform: translateY(15%);*/
  color: white;
  margin-left: 10px;
  padding: 10px 0px 10px;
  padding-right: 20px;
  min-height: 46px;
}

.article_content
{
	/*display: inline-block;*/
	display: flex;
	flex-direction: column;
	/*height: 1000px;*/
	/*width: 97%;*/
	/*background: ;*/
	margin-top: 10px;
	padding-right: 350px;
}

.tut_step
{
  display: inline-block;
  /*width: 50%;*/
  max-width: 1200px;
  margin-top: 60px;
  margin-right: 0px;
}

.tut_step_head
{
	display: flex;
	flex-direction: column;
	height: auto;
	width: 100%;
	background: rgba(8, 8, 9, 0.13);
}

.tut_step_head_text
{
	padding-left: 5px;
	/* font-family: 'Roboto Slab', serif;*/
	font-family: 'Open Sans', serif;
	font-weight: 300;
	/*font-size: 0.9vw;*/
	font-size: 17px;
	padding-top: 10px;
	/*color: white;*/
	color: rgb(240, 240, 240);
	border-top: 5px solid #64DAFF;
	border-right: 0px !important;
	border-left: 0px !important;
	border-bottom: 0px !important;
	white-space: pre-wrap;
	/*display: inline-block;*/
	min-height: 30px;
}

.tut_step > div:not(:first-child)
{
  transition: 1s;
  width: 100%;
  overflow: hidden;
}

.tut_step div img
{
  width: 100%;
}

.tut_step button
{
  transition: 0.3s;
  transform: rotate(0deg);

  background: #64DAFF;
  background-image: url('assets/cross.png');
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  height: 25px;
  width: 25px;
  position: relative;
  left: -0px;
  top: 0px;
  border: none;
  border-radius: 100%;

  outline: none;
}

.tut_step_head button:hover
{
  cursor: pointer;
}

.tut_step_head button:hover
{
  transition: 0.3s;
  transform: rotate(180deg);
}


.tut_step_content_closed
{
  height: 0px;
  transition: 1s;
}

.step_green_col
{
 border-top: 5px solid #64FF86;
}


.footer
{

  display: flex;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, 0.25);
  margin-top: 200px;

}


.footer p
{
  font-size: 1vw;
  padding: 20px;
  color: white;
  color: rgb(200, 200, 200);
}


/*Corrective overwrites for text*/
/*wat*/
/*what kind of corrective overrides, you fucking lunatic ??*/



.rquick_index
{
	user-select: none;
	display: flex;
	min-width: 200px;
	/*height: 100px;*/
	/*background-color: red;*/
	align-self: flex-end;
	position: fixed;
	margin-top: 135px;
	margin-right: 2em;
	background: rgba(9, 9, 17, 0.22);
	flex-direction: column;
	max-width: 300px;
}



@media (min-width: 1590px)
{
  .rquick_indexss
  {
    /*margin-right: 1px;*/
    /* margin-right: 300px; */
  }
}



.e_hidden
{
	display: none !important;
}


/*
				<div class="at_border_edit_box">
					<div class="at_border_enabled"><input type="checkbox"><div class="at_border_enabled_label">Enable border</div></div>
					<input type="color">
				</div>*/


.at_border_edit_box
{
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	position: absolute;
	/*margin-right: -120px;*/
	transform: translateX(105%);
	color: white;
}

.at_border_edit_box label
{
	/*display: flex;*/
	user-select: none;
}

.suggest_border_colors
{
	display: flex;
}

.border_color_suggestion
{
	width: 15px;
	height: 15px;
	margin: 1px;
}

.tut_step_content
{
	display: flex;
	flex-direction: column;
}

.iliketomoveit
{
	display: flex;
	flex-direction: column;
}
.article_movetop, .article_movebot
{
	display: flex;
	background: gray;
	background-image: url('assets/arrow.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 30px;
	height: 20px;
	border-radius: 2px;
	align-items: center;
	justify-content: center;
	margin: 1px;
}

.article_movebot
{
	transform: rotate(180deg);
}

.article_movetop:active, .article_movebot:active
{
	outline: 2px solid white;
}



/*.mv_triangle
{
	border: 10px solid transparent;
}


.article_movetop .mv_triangle
{
	border-top: 10px solid black;
}

.article_movebot .mv_triangle
{
	border-bottom: 10px solid black;
}*/


.image_editor
{
	display: flex;
	flex-direction: column;
	width: 50%;
}

.image_deleter
{
	user-select: none;
	color: white;
	background: gray;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	width: 100px;
	margin-top: 10px;
}

.image_adder_btn, .add_box, .cum_on_a_lizard, .preview_page, .ctg_button, .ctg_cancel_operation, .mkbold_text, .add_new_dir_to_root
{
	user-select: none;
	color: white;
	background: gray;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	width: 100px;
	margin-top: 10px;
}

.add_box, .cum_on_a_lizard
{
	width: auto;
	margin-top: 50px;
}
.cum_on_a_lizard, .add_box
{
	order: 214748363;
}

.delete_box
{
	/*width: 30px;*/
	/*margin-top: 5px;*/
	/*color: black;*/
}

.preview_page
{
	width: auto;
}

.ctg_button
{
	margin: 0px 0px 0px 3px;
	width: 25px;
	font-size: 12px;
}

.ctg_cancel_operation
{
	width: auto;
	font-size: 20px;
}
.add_new_dir_to_root
{
	width: auto;
	margin-top: 10px;
	order: 214748363;
}

.image_deleter:active, .image_adder_btn:active, .add_box:active, .cum_on_a_lizard:active, .delete_box:active, .preview_page:active, .ctg_button:active, .ctg_cancel_operation:active, .mkbold_text:active, .add_new_dir_to_root:active
{
	outline: 2px solid white;
}

.c_image_size
{
	width: 100px;
	margin-top: 5px;
}

.c_image_input
{
	color: white;
	margin-top: 5px;
}

.section_name
{
	margin-top: 20px;
	width: 300px;
}

.nav_folder
{
	display: flex;
	flex-direction: column;
	/*margin-left: 10px;*/
}

.folder_name
{
	display: flex;
	user-select: none;
}

.folder_content
{
	display: flex;
	flex-direction: column;
	margin-left: 17px;
}

.nav_tutorial
{
	display: flex;
	color: white;
}

.ctg_rootpaste
{
	/*align-self: flex-end;*/
	order: 214748364;
	width: auto;
	font-size: 14px;
	margin-top: 20px;
}


st
{
	display: inline;
	font-weight: 700;
}

stb
{
	display: inline;
	font-weight: 700;
}

.tut_step_head_text b
{
	all: unset;
	font-weight: 700;
}

.tut_step_head_text i
{
	all: unset;
	font-style: italic;
}

.tut_step_head_text u
{
	all: unset;
	text-decoration: underline;
}

.tut_step_head_text a:visited
{
	color: purple;
	/* burglar alarm */
}

.tut_step_head_text a
{
	color: #AAFFFF;
}

.tut_step_head_text a:active
{
	color: red;
}



.tut_step_head_text strike
{
	all: unset;
	text-decoration: line-through;
}

.tut_step_head_text font
{
	display: inline;
}

/*.tut_step_head_text div
{
	display: flex;
	min-height: 20px;
}
*/
st[bold]
{
	font-weight: 700;
}

st[italic]
{
	font-style: italic;
}

st[strike]
{
	text-decoration: line-through;
}

.tut_name_text, .fname_text
{
	min-height: 15px;
	min-width: 30px;
	user-select: none;
}

.imgrow
{
	display: flex;
}

.c_image_url
{
	width: 100%;
}

.e_unclickable
{
	pointer-events: none !important;
}

.imgzoom
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	position: fixed;
	z-index: 65535;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	/*background: red;*/
}

.imgzoom img
{
	object-fit: contain;
	object-position: center;
	height: 100%;
	width: 100%;
}

/*.tut_step
{
	outline: 5px solid;
	outline-color: transparent;
	transition: .5s;
}
*/

/*.tut_step:hover
{
	outline: 5px solid;
	outline-color: rgba(255, 0, 0, 1);
	transition: .1s;
}*/

.hlight
{
	outline: 5px solid;
	/*outline-color: rgba(255, 0, 0, 1);*/
	outline-color: #00ff58;
	transition: 0s;
}

.nohlight
{
	outline: 5px solid !important;
	outline-color: transparent !important;
	transition: .9s;
}


/*
 =======================================

some fancy shit


=======================================
*/

.nav_stuff_box
{
	font-family: 'Open Sans', serif;
	font-weight: 300;

}





.fname_text
{
	display: flex;
	padding: 5px 5px 5px 5px;
	/*background:;*/
	flex-grow: 1;
}



.folder_name
{
	background: rgba(0, 0, 0, 0.19);
	color: #58bb7e;
}

.folder_name:hover
{
	background: rgba(0, 0, 0, 0.27);
}
.folder_name:active
{
	background: rgba(0, 0, 0, 0.4);
}

.nav_tutorial
{
	background: rgba(0, 0, 0, 0.08);
}

.nav_tutorial:hover
{
	/*background: rgba(200, 200, 200, 0.025);*/
	/*background: rgba(97, 148, 244, 0.08);*/
	background: rgba(97, 148, 244, 0.05);
}
.nav_tutorial:active
{
	background: rgba(20, 255, 0, 0.08);
}

.tut_name_text
{
	padding: 3px 3px 3px 3px;
}

.tut_name_text_edit
{
	flex-grow: 1;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 10px;
	white-space: nowrap;
}

.nav_folder
{
	margin-top: 4px;
}

.fname_text
{

}

.fname_text_edit
{
	flex-grow: 1;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 10px;
	white-space: nowrap;
}

.folder_name .ctg_button, .nav_tutorial .ctg_button
{
	/*display: flex;*/
	margin: 0px;
	border-radius: 0px;
	background-color: rgba(0, 0, 0, 0.1);
	padding: 6px 2px 6px 2px;
	display: none;
}

.folder_name:hover .ctg_button, .nav_tutorial:hover .ctg_button
{
	display: flex;
}


.folder_name .ctg_button:hover, .nav_tutorial .ctg_button:hover
{
	/*background-color: gray;*/
	background-color: rgb(60, 60, 80);
}

.btnsico
{
	display: flex;
	width: 100%;
	height: 100%;
}

.folder_name .add_ctg_tut .btnsico
{
	background-image: url('assets/add_tut.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.folder_name .add_ctg_folder .btnsico
{
	background-image: url('assets/folder.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.folder_name .move_ctg_item .btnsico
{
	background-image: url('assets/move.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.folder_name .del_ctg_item .btnsico
{
	background-image: url('assets/rubbish.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}



/*todo: comine with folder name css*/
.nav_tutorial .move_ctg_item .btnsico
{
	background-image: url('assets/move.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.nav_tutorial .del_ctg_item .btnsico
{
	background-image: url('assets/rubbish.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}



.folder_triangle
{
	display: flex;
	width: 10px;
	align-items: center;
	padding: 0px 0px 0px 3px;
}

.folder_triangle_ico
{
	display: flex;
	width: 100%;
	height: 100%;
	background-image: url('assets/arrow_white.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(180deg);
	opacity: 0.25;
}


.folder_tri_closed
{
	transform: rotate(90deg) !important;
}


.folder_mv_hlight
{
	outline: 1px solid rgba(223, 185, 71, 0.41);
}


.rqindex_item
{
	user-select: none;
	all: unset;
	color: white;
	font-family: 'Roboto', serif;
	font-weight: 300;
	padding: 5px;
	color: rgb(220, 220, 220);
	font-size: 16px;
	/*margin-left: 3px;*/
	/*margin-right: 3px;*/
}

.rqindex_item:first-child
{
	margin-top: 10px;
}

.rqindex_item:hover
{
	cursor: pointer;
	background: rgba(97, 148, 244, 0.05);
}

.rqindex_item:active
{
	background: rgba(20, 255, 0, 0.08);
}


.shuffle_ctg_item
{
	display: flex;
	/*height: 100%;*/
	width: 25px;
	flex-direction: column;
	padding: 0px !important;
}

.shuffle_ctg_item:hover
{
	background: transparent !important;
}

.shuffle_ctg_item:active{
	outline: 0px solid white !important;
}

.shuffle_ctg_item_top, .shuffle_ctg_item_bot
{
	display: flex;
	height: 50%;
	width: 100%;

}

.shuffle_ctg_item_top .btnsico
{
	background-image: url('assets/arrow_white.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.shuffle_ctg_item_bot .btnsico
{
	background-image: url('assets/arrow_white.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(180deg);

}


.shuffle_ctg_item .shuffle_ctg_item_top:hover, .shuffle_ctg_item .shuffle_ctg_item_bot:hover
{
	background-color: rgb(60, 60, 80);
}

.shuffle_ctg_item .shuffle_ctg_item_top:active, .shuffle_ctg_item .shuffle_ctg_item_bot:active
{
	outline: 2px solid white;
}




/*
.tut_step_head_text
{
	display: inline-block;
}
*/





.format_buttons
{
	display: flex;
}

.frmtbtns
{
	user-select: none;
	color: black;
	background: gray;
	width: 20px;
	margin-right: 3px;
	border-radius: 3px;
}

.frmtbtns:active
{
	outline: 2px solid white;
}

.textlink_input
{
	width: 100%;
	background: white;
	margin: 10px 0px 10px 0px;
}
.textlink_input:active
{
	outline: 0px solid white !important;
}



.arcl_h_border_editor
{
	display: flex;
	position: absolute;
	transform: translateX(105%);
	
	align-self: flex-end;
	flex-direction: column;
}

.arcl_h_border_editor_reset
{
	user-select: none;
	color: black;
	background: gray;
}

.arcl_h_border_editor_reset:active
{
	outline: 2px solid white;
}


.box_is_code .tut_step_head_text
{
	color: black;
	padding: 1em;
    border-left: 6px solid #666666 !important;
    background-color: #D8D7D6;
    line-height: 1.1em;
    font-size: 100%;
    font-family: monospace,sans-serif;
}

co.statements{
	color: #00488a;
}

co.code_num{
	/* color: #19177C; */
	color: #2a27bb;
	
}

co.code_qtext, co.code_qtext * {
    color: #BA2121;
	/* #008000 !!!!!!!!!!!!!!!!!!!!!!!!! */
}


.code_comment, .code_comment *{
	color: #408080 !important;
    font-style: italic;
}




#broken
{
	display: flex;
	align-items: center;
	align-content: center;
	/*flex-grow: 1;*/
	flex-direction: column;
	height: 689px;
	/*width: 838px;*/
	position: relative;
	/*text-align: center;*/
}

#imsorry
{
	color: white;
	font-family: 'Roboto', serif;
	font-weight: 600;
	font-size: 50px;
	padding: 10px;
	text-align: center;
}

#broken img
{
	object-fit: contain;
	object-position: center;
	display: flex;
	width: 100%;
	height: 100%;
}

#mein_sex
{
	min-width: unset !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}




/*new editor*/

#word_editor
{
	display: flex;
	position: fixed;
	/*width: 100%;*/
	align-self: center;
	width: 60%;
	margin-top: 10px;
	margin-left: 120px;
	flex-direction: row;
}

#word_btns
{
	position: relative;
	display: flex;
	/*flex-direction: column;*/
	flex-wrap: wrap;
	/*width: 40%;*/
	width: 90%;
	/*flex-grow: 1;*/
	border-left: 5px solid white;
	margin-left: 20px;
	background: #222222f2;
}

.word_btn
{
	display: flex;
	padding: 5px;
	background: black;
	color: white;
	width: 20px;
	height: 20px;
	/*aspect-ratio: 1/1;*/
	align-items: center;
	justify-content: center;
	margin: 5px;
	border-radius: 5px;
	font-size: 20px;
	font-family: 'iconz', sans-serif;
	font-weight: 400;
	user-select: none;
}

.word_btn:hover
{
	background: gray;
}

.word_btn:active
{
	outline: 2px solid lime;
}

/*			'position': 'fixed',
			'z-index': 65535,
			'height': '100px',
			'display': 'flex',
			'align-items': 'center',
			'width': '100%',
			'background': ''*/

#exit_edit
{
	display: flex;
	/*flex-shrink: 0;*/
	width: 50px;
	height: 50px;
	/*aspect-ratio: 1/1;*/
	background-image: url('assets/exit.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	align-self: center;
}

#exit_edit:hover
{
	background-image: url('assets/lambda_less_tr.png'), url('assets/exit.png');
}

#exit_edit:active
{
	background-image: url('assets/lambda_w_bg.png');
}

#word_inputs
{
	display: flex;
	padding-left: 10px;
	flex-direction: column;
	background: #222222f2;
	justify-content: space-around;
}

#word_text_input
{
	all: unset;
	background: black;
	outline: 1px solid rgba(255, 255, 255, 0.1);
	color: white;
	font-family: 'Roboto';
	font-size: 15px;
	padding: 2px;
	padding-left: 4px;
	width: 13vw;
}

.word_editor_saveload
{
	display: flex;
	background: #222222f2;
}

#article_save_btn
{
	width: 90px;
	/*height: 100%;*/
	object-fit: contain;
	object-position: center;
	/*align-self: center;*/
	margin-left: 20px;
	margin-right: 20px;

	background-image: url('assets/indicator_green.png'), url('assets/indicator_red.png'), url('assets/btnidle.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	
}

#article_preview_btn
{
	width: 90px;
	object-fit: contain;
	object-position: center;
	margin-left: 20px;
	margin-right: 20px;
	/*background: #222222f2;*/
}

.box_edit_cbox_field
{
	background: #222;
	padding: 3px;
	font-family: 'Roboto';
	font-weight: 400;
	font-size: 17px;
	display: flex;
	align-items: center;
}

.box_edit_cbox_field:hover
{
	background: rgb(50, 50, 50);
}

.box_edit_cbox_field input
{
	margin-right: 7px;
	width: 18px;
	height: 18px;
}


.edit_img_ctrl
{
	display: flex;
	flex-direction: column;
	margin-bottom: 5px;
	margin-top: 5px;
}


.edit_img_ctrl_link
{
	all: unset;
	background: black;
	outline: 1px solid rgba(255, 255, 255, 0.1);
	color: white;
	font-family: 'Roboto';
	font-size: 15px;
	padding: 2px;
	padding-left: 4px;
	/*width: 13vw;*/
	width: 50%;
}

.edit_img_ctrl_file
{
	background: rgba(0, 0, 0, 0.3);
	padding: 5px;
	width: 200px;
	color: white;
	border-radius: 5px;
}

.edit_img_ctrl_type
{
	display: flex;
	flex-direction: row;
	margin-left: 15px;
}



.edit_img_ctrl_type label
{
	background: #222;
	padding: 3px;
	font-family: 'Roboto';
	font-weight: 400;
	font-size: 17px;
	display: flex;
	align-items: center;
	color: white;
	user-select: none;
	
	width: 60px;
}

.edit_img_ctrl_type label:last-of-type
{
	border-radius: 0px 5px 5px 0px;
}
.edit_img_ctrl_type label:first-of-type
{
	border-radius: 5px 0px 0px 5px;
}



.edit_img_ctrl_type label:hover
{
	background: rgb(50, 50, 50);
}

.edit_img_ctrl_type input
{
	margin-right: 7px;
	width: 18px;
	height: 18px;
}

.imgedit_btn
{
	margin-left: 20px;
	color: white;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Roboto';
	font-size: 15px;
	width: fit-content;
	background: black;
	padding: 3px;
	border-radius: 5px;
}

.imgedit_btn:active
{
	outline: 2px solid white;
}


.boxedit_btns
{
	margin-top: 10px;
	display: flex;
	flex-direction: row;
}

.box_edit_btns_other
{
	display: flex;
	/*flex-direction: column;*/
	flex-wrap: wrap;
	margin-left: 5px;
}

.box_edit_btns_other
{

}

.boxedit_btn
{
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	color: white;
	/*background: black;*/
	border-radius: 3px;
	padding: 3px;
	font-family: 'Roboto';
	font-size: 13px;
	user-select: none;
	/*width: 100%;*/
	/*important todo: tut_step div img width 100% !!!!!!!!!!!!!!!!!!!;*/
	width: 23px !important;
	height: 23px !important;
	margin-left: 5px;

	object-fit: cover;
	object-position: center;
}

.boxedit_btn:hover
{
	background: rgba(0, 0, 0, 0.5);
}

.boxedit_btn:active
{
	outline: 2px solid white;
}



.edit_img_file_and_switch
{
	margin-top: 5px;
	display: flex;
	flex-direction: row;
}




.boxedit_chapter
{
	all: unset;
	position: absolute;
	transform: translateY(-140%);

	background: rgba(0, 0, 0, 0.1);
	/*outline: 1px solid rgba(255, 255, 255, 0.1);*/
	color: rgb(190, 190, 190);
	font-family: 'Roboto';
	font-size: 17px;
	padding: 2px;
	width: 350px;
	/*width: 50%;*/
}

.boxedit_chapter:hover, .boxedit_chapter:focus
{
	background: rgba(0, 0, 0, 0.25);
}

.pg_preview_hide
{
	display: none !important;
}

.freeze_editor
{
	/*position: absolute !important;*/
}

.hljs
{
	font-family: consola;
	tab-size: 4;
}

.tut_step[isvdccode] .tut_step_head_text
{
	color: #cdd3de;
	padding: 1em;
    border-left: 6px solid #52768f !important;
    background-color: #1a1e24;
    line-height: 1.1em;
    font-size: 100%;
    font-family: monospace,sans-serif;
}
/*
important todo:
account for text pasted from outer sources
somehow...
*/
.tut_step[isvdccode] .tut_step_head_text *
{
	/*color: #cdd3de;*/
}





.edit_img_size
{
	all: unset;
	background: black;
	outline: 1px solid rgba(255, 255, 255, 0.1);
	color: white;
	font-family: 'Roboto';
	font-size: 15px;
	padding: 2px;
	padding-left: 4px;
	/*width: 13vw;*/
	width: 50px;
	margin: 0px 15px 0px 10px;
	-moz-appearance: textfield;
}

.edit_img_size::-webkit-inner-spin-button, 
.edit_img_size::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
}

#save_feedback
{
	position: absolute;
	background: #222;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	color: white;
	width: 100%;
	height: 100%;
	font-family: 'consola';
	font-size: 15px;
}

#save_feedback_feed
{
	padding: 10px;
}

.fback_item_code
{
	background: none !important;
	white-space: pre;
}

.fback_item_code *
{
	white-space: break-spaces;
}

#addbox
{
	display: flex;
	background: #222222f2;
	background-image: url('assets/lambda_w_bg.png'), url('assets/indicator_red.png'), url('assets/indicator_green.png'), url('assets/lever_onn.png'), url('assets/lever_off.png'), url('assets/btn_faster.apng');
	background-size: 1px;
	background-position: center;
	background-repeat: no-repeat;
}

#addbox_btn
{
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-family: 'Roboto';
	font-weight: 500;
	font-size: 20px;
	margin-left: 10px;
	margin-right: 5px;
	background: black;
	width: 40px;
	height: 60px;
	align-self: center;
	border-radius: 10px;
}

#addbox_btn:hover
{
	background: gray;
}

#addbox_btn:active
{
	outline: 2px solid lime;
}

[contenteditable]:focus
{
	outline: 2px solid #0060df;
}

.tut_step_head_text ol, .tut_step_head_text ul
{
	margin-left: 40px;
}