{% load static %}
<style type="text/css">

	/* disable iphone input zooming */
	button:focus, select:focus, textarea:focus input:focus {
		outline:0;
	}
	body { font-size: 16px; }
	input, select { font-size: 100%; }
	/* disable padding width stretching */
	div {
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	    box-sizing: border-box;         /* Opera/IE 8+ */
	}
	/* the select filters */
	.filter, .filter_reversed {
		font-family: Avenir Next;
		font-weight: normal;
		border: none;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		text-align: center;
		padding-left: 10px; padding-right: 10px;
		padding-top: 1px; padding-bottom: 2px;
		font-size: 12px;
		border-radius: 25px;
		margin-left: 2.5px;
		margin-top: 2.5px;
		border-bottom: 2px solid #CC3333;
		box-shadow: 0 0 10px #00000050;
		background: {{ COLORS.widgets_reversed }};  
		color: {{ COLORS.text_reversed }}
	}
	.filter_reversed {
		background: {{ COLORS.text_reversed }};  
		color: {{ COLORS.widgets_reversed }}	
	}

	/* the buttons */
	.button, .button_reversed, .disabled_button, .disabled_button_reversed, .button_bordered,  .button_bordered_reversed, .small_button {
		/* disable electron border button */
		outline: none !important;
		/* keep padding from increasing width:*/
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	    box-sizing: border-box;         /* Opera/IE 8+ */
	    /* .. */
	    white-space: nowrap;
	    font-family: Avenir Next;
	    border-radius: 25px; 
	    font-size: 12px; 
	    font-weight: 500;
	    width: 100%;
	    text-decoration: none;
	    border: none;
	    margin-top: 15px;
	    padding: 12.5px 25px 12.5px 25px;
	    box-shadow: 0 0 10px #00000050;
		background: {{ COLORS.button_bg }};  
		color: {{ COLORS.button_txt }};
	}
	.button_reversed, .button_bordered_reversed, .button_selectable_reversed {
		background: {{ COLORS.button_bg_reversed }};  
		color: {{ COLORS.button_txt_reversed }};
	}
	.button_bordered {
		background: #00000000;  
		border: 1px solid {{ COLORS.grey }};  
	}
	.button_bordered_reversed {
		background: #00000000;  
		border: 1px solid {{ COLORS.button_bg_reversed }};  
	}
	.disabled_button {
		background: {{ COLORS.button_bg }}50;  
	}
	.disabled_button_reversed {
		background: {{ COLORS.button_bg_reversed }}50;  
	}
	.small_button {
		font-size: 12px; 
		padding: 5px 20px 5px 20px; 
		margin: 5px 5px 5px 5px; 
		height: 25px; 
		width: auto; 
		min-width: none; 
	}

	/* the inputs */
	.input, .input_reversed, .textarea, .textarea_reversed, .code_input, .code_input_reversed, .code_textarea, .code_textarea_reversed, .toggle_button_input, .toggle_button_input_reversed, .input_bordered, .input_bordered_reversed, .toggle_button_input, .textarea_bordered, .textarea_bordered_reversed, .code_textarea_bordered, .code_textarea_bordered_reversed {
		/* keep padding from increasing width:*/
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	    box-sizing: border-box;         /* Opera/IE 8+ */
	    /* .. */
		font-family: Avenir Next;
	    border: none;
	    outline:none;
	    transition:height 1s;
	    -webkit-transition:height 1s;
		/*font-size: 10px; */
		font-size: 1em; 
		padding: 15px 15px 15px 15px;
		border-radius: 25px; 
		width: 100%; 
		height: 25px; 
		margin-top: 2.5px;
		border: none;
		box-shadow: 0 0 10px #00000050;
		background: {{ COLORS.input_bg }};  
		color: {{ COLORS.input_txt }}
	}
	.input_reversed, .textarea_reversed, .code_input_reversed, .code_textarea_reversed, .input_bordered_reversed, .textarea_bordered_reversed, .code_textarea_bordered_reversed { 
		background: {{ COLORS.input_bg_reversed }};  
		color: {{ COLORS.input_txt_reversed }}
	}
	.input_bordered {
		background: #00000000;  
		border: 1px solid {{ COLORS.grey }};  
	}
	.input_bordered_reversed {
		background: #00000000;  
		border: 1px solid {{ COLORS.input_bg_reversed }};  
	}
	.textarea, .textarea_reversed, .code_textarea, .code_textarea_reversed, .textarea_bordered, .textarea_bordered_reversed, .code_textarea_bordered, .code_textarea_bordered_reversed {
		height: auto;
		resize: none;
	}
	input:required, textarea:required {
	    box-shadow:none;
	}
	input:invalid, textarea:invalid {
	    /*box-shadow:0 0 3px {{COLORS.red}};*/
	    box-shadow: none;
	}
	input:focus, textarea:focus {
	  /*border-color: inherit;
	  -webkit-box-shadow: none;
	  box-shadow: none;*/
	}
	.code_input, .code_input_reversed, .code_textarea, .code_textarea_reversed, .code_textarea_bordered, .code_textarea_bordered_reversed {
		font-family: Courier New;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		user-select: text;
	}
	.textarea_bordered, .code_textarea_bordered {
		background: #00000000;  
		box-shadow: none;
		border: 1px solid {{ COLORS.grey }};  
	}
	.textarea_bordered_reversed, .code_textarea_bordered_reversed {
		background: #00000000;  
		box-shadow: none;
		border: 1px solid {{ COLORS.button_bg_reversed }};  
	}

	/* the texts */
	.text, .shadow_text, .text_reversed, .shadow_text_reversed, .toggle_button_text, .toggle_button_text_reversed {
		font-family: Avenir Next;
		text-align: center;
		color: {{ COLORS.text }}; 
	}
	.text_reversed, .shadow_text_reversed, .toggle_button_text_reversed {
		color: {{ COLORS.text_reversed }}; 
	}
	.shadow_text {
		text-shadow: 2.5px 2.5px #00000050;
	}
	.title, .shadow_title, .title_reversed, .shadow_title_reversed {
		font-family: Avenir Next;
		font-weight: 600;
		margin-top: 0px; 
		font-size: 32px;
		padding-bottom: 0px;
		text-align: center;
		color: {{ COLORS.text }}; 
	}
	.title_reversed, .shadow_title_reversed {
		color: {{ COLORS.text_reversed }}; 
	}
	..shadow_title {
		text-shadow: 2.5px 2.5px #00000050;
	}
	.subtitle, .shadow_subtitle, .subtitle_reversed, .shadow_subtitle_reversed {
		font-family: Avenir Next;
		padding-top: 15px; 
		padding-bottom: 0px; 
		font-weight: 500;
		font-size: 22px;
		text-align: center;
		color: {{ COLORS.text }}; 
	}
	.subtitle_reversed, .shadow_subtitle_reversed {
		color: {{ COLORS.text_reversed }}; 
	}
	..shadow_subtitle {
		text-shadow: 2.5px 2.5px #00000050;
	}

	/* toggle buttons */
	.toggle_button_container {
		display: flex;
	}
	.toggle_button_child {
		position: relative;
		padding-left: 10px; 
		padding-top: 6px; 
	}
	.toggle_button_text {
		white-space: nowrap;
	}
	.toggle_button {
		width: 20px; 
		height: 20px; 
		border-radius: 50%; 
		border: none; 
		text-decoration: none; 
		margin-top: 10.5px; 
		margin-left: 0px; 
		position: absolute; 
		text-decoration: none; 
		outline: none;
		background: {{COLORS.red}}; 
	}
	.toggle_button_input, .toggle_button_input_reversed {
		color: #00000000; 
		font-size: 10px; 
		border-radius: 10px; 
		width: 35px; 
		height: 9px; 
		float: left; 
		margin-top: 14px; 
		height: 14px; 
		padding: 0px 0px 0px 0px;
		border: 1px solid {{COLORS.grey}};
		background-color: {{COLORS.widgets}}; 
	}
	.toggle_button_input_reversed {
		background-color: {{COLORS.widgets_reversed}}; 
	}
	/* spawn toggle button as:

		<div class="toggle_button_container">
			<p class="toggle_button_text">
				Sudo:
			</p>
			<div class="toggle_button_child">
				<button id="actions.sudo.button" onclick="toggle_button('actions.sudo')" class="toggle_button" style=""></button>
				<input required readonly="" id="actions.sudo.input" value="False" class="toggle_button_input" type="text">
				<script type="text/javascript">initialize_toggle_button('actions.sudo')</script>
			</div>
		</div>

	*/


	/* other elements */
	.air {
		width: 1px;
		height: 35px;	
	}
	.divider, .divider_reversed {
		width: 100%;
		height: 1px;
		margin-top: 25px;
		margin-bottom: 25px;
		background: {{ COLORS.widgets_reversed }}; 
	}
	.divider_reversed {
		background: {{ COLORS.widgets }}; 
	}
	.empty_a {
		text-decoration: none; 
		color: inherit;
		font-size: inherit;
		font-family: inherit;
		font-weight: inherit;
	}
	.code, .code_reversed {
		font-family: Courier New;
		color: {{ COLORS.text }}; 
	}
	.code_reversed {
		color: {{ COLORS.text_reversed }}; 	
	}
	.widget, .widget_container, .widget_reversed, .widget_container_reversed {
		/* keep padding from increasing width:*/
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	    box-sizing: border-box;         /* Opera/IE 8+ */
	    /* .. */
	    position: relative;
		border-radius: 10px; 
		padding: 35px 20px 35px 20px;
		/*margin: 10px 10px 10px 0px;*/
		box-shadow: 0 0 20px #00000075;
		/*min-width: 300px;*/
		display: block;
		margin: 0 auto;
		/*height: auto;*/
		/*width: 100%;
		max-width: 400px;*/
		background: {{COLORS.widgets}};
	}
	.widget_reversed, .widget_container_reversed {
		background: {{ COLORS.widgets_reversed }}; 	
	}
	.widget_container, .widget_container_reversed {
		width: 100%; 
		max-width: 400px;
	}
	.widget_child {
		width: 100%; 
		max-width: 350px; 
		display: block; 
		margin: 0 auto;

	}

	/* container divs */
	.full_window, .full_window_centered, .full_window_row_centered, .desktop_only_full_window_centered, .desktop_only_full_window_row_centered {
		position: absolute; 
		top: 0px; 
		bottom: 0px; 
		left: 0px; 
		right: 0px;
		/*
		width: 100%;
		height: 100%;
		*/
	}
	.centered, .full_window_centered, .full_window_row_centered, .column_centered, .desktop_only_full_window_centered, .desktop_only_full_window_row_centered {
		display: flex; 
		justify-content: center; 
		align-items: center; 
		flex-direction: column;
	}
	.full_window_row_centered, .column_centered, .desktop_only_full_window_row_centered {
		flex-direction: row;
	}

	/* leftbar content */
	.leftbar_item_txt {
		font-family: Avenir Next;
		text-align: left;
		font-weight: 500; 
		margin-top: 0px; 
		padding: 0px 5px 0px 5px;
		/*margin-right: 30px;*/
		/*margin-left: 20px;*/
		font-size: 16px;
		overflow-x: scroll;
		color: {{ COLORS.widgets_reversed }}; 
	}
	.leftbar_item_icon {
		position: absolute; left: 0px;
		height: 15px;
		width: 15px;
		margin-top: 2px;
	}
	.leftbar_item_img {
		height: 10px; 
		width: 10px; 
		position: absolute; 
		top: 6px; 
		right: 10px; 
		/*transform: rotate(180deg);*/
	}
	.leftbar_divider {
		background: {{ COLORS.widgets_reversed }}50; height: 1px; margin-top: 0px; margin-bottom: 0px;
	}

	/* left overs */
	.wrapper {
	  display: flex;
	  flex-direction: row;
	  align-items: stretch;
	}
	.transparent-input {
		font-family: Avenir Next;
		background-color:rgba(0, 0, 0, 0);
	    border: none;
	    outline:none;
	    height:30px;
	    transition:height 1s;
	    -webkit-transition:height 1s;
	    color: {{COLORS.backgrounds.side_bar }};
	}

	/* LOADERS */
	.loader , .loader_reversed {
	  display: inline-block;
	  position: relative;
	  width: 80px;
	  height: 80px;
	}
	.loader div, .loader_reversed div {
	  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	  transform-origin: 40px 40px;
	}
	.loader div:after, .loader_reversed div:after {
	  content: " ";
	  display: block;
	  position: absolute;
	  width: 7px;
	  height: 7px;
	  border-radius: 50%;
	  background: {{COLORS.widgets_reversed}};
	  margin: -4px 0 0 -4px;
	}
	.loader_reversed div:after {
		background: {{COLORS.widgets}};
	}
	.loader div:nth-child(1), .loader_reversed div:nth-child(1) {
	  animation-delay: -0.036s;
	}
	.loader div:nth-child(1):after, .loader_reversed div:nth-child(1):after {
	  top: 63px;
	  left: 63px;
	}
	.loader div:nth-child(2), .loader_reversed div:nth-child(2) {
	  animation-delay: -0.072s;
	}
	.loader div:nth-child(2):after, .loader_reversed div:nth-child(2):after {
	  top: 68px;
	  left: 56px;
	}
	.loader div:nth-child(3), .loader_reversed div:nth-child(3) {
	  animation-delay: -0.108s;
	}
	.loader div:nth-child(3):after, .loader_reversed div:nth-child(3):after {
	  top: 71px;
	  left: 48px;
	}
	.loader div:nth-child(4), .loader_reversed div:nth-child(4) {
	  animation-delay: -0.144s;
	}
	.loader div:nth-child(4):after, .loader_reversed div:nth-child(4):after {
	  top: 72px;
	  left: 40px;
	}
	.loader div:nth-child(5), .loader_reversed div:nth-child(5) {
	  animation-delay: -0.18s;
	}
	.loader div:nth-child(5):after, .loader_reversed div:nth-child(5):after {
	  top: 71px;
	  left: 32px;
	}
	.loader div:nth-child(6), .loader_reversed div:nth-child(6) {
	  animation-delay: -0.216s;
	}
	.loader div:nth-child(6):after, .loader_reversed div:nth-child(6):after {
	  top: 68px;
	  left: 24px;
	}
	.loader div:nth-child(7), .loader_reversed div:nth-child(7) {
	  animation-delay: -0.252s;
	}
	.loader div:nth-child(7):after, .loader_reversed div:nth-child(7):after {
	  top: 63px;
	  left: 17px;
	}
	.loader div:nth-child(8), .loader_reversed div:nth-child(8) {
	  animation-delay: -0.288s;
	}
	.loader div:nth-child(8):after, .loader_reversed div:nth-child(8):after {
	  top: 56px;
	  left: 12px;
	}
	@keyframes loader {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}

	/* call the load with html as:
	<div class="loader" style="transform: scale(1.0); display: block; margin: 0 auto;"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
	*/

	

</style>