:root {
  --main-yellow: #fdb81a;
  --main-light: #ffffff;
  --main-dark: #262626;
  --main-dark-ish: #303030;
  --betekinto: #546e7a;
  --betekinto-50: #546e7a80;
  --tanulo: #3498db;
  --tanulo-50: #3498db80;
  /*--swingtrader: #f1c40f;
  --swingtrader-50: #f1c40f80;*/
  --swingtrader: #fdb81a;
  --swingtrader-50: #fdb81a80;
  --daytrader: #e67e22;
  --daytrader-50: #e67e2280;
  --protrader: #e91e63;
  --protrader-50: #e91e6380;
}




body{background-size: cover; background-color: #eff3f6; color: var(--main-dark); line-height: 150%; font-family: 'Rubik', sans-serif; font-size: 16px;}
h1, h2{}
h1 .icon{margin-right: 20px;}
/*.container{position: relative; height: 100vh;}*/


a:hover{text-decoration: none;}
#sidebar{width: 250px; height: 100vh; position: fixed; overflow: hidden; left: 0; top:0; background-color: var(--main-dark);}
	
	#sidebar_logo{padding: 40px 80px 30px 80px; display: block;}
		#sidebar_logo img{width: 100%; display: block;}
	#menu{}
		#menu a{display: block; padding: 10px 15px; color: rgba(255,255,255,0.3);}
			#menu a i{display: inline-block; margin-right: 10px; font-size: 14px;}
			#menu a img{margin: 5px 0;display: block; width: 110px; filter: brightness(0) invert(1); opacity: 0.3;}
			
		#menu a:hover, #menu a.selected{color: rgba(255,255,255,0.9); background-color: rgba(255,255,255,0.05);}
		#menu a:hover img, #menu a.selected img{opacity: 0.9;}
		
	#sidebar .infobox{margin: 10px 0;background-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); font-size: 14px; padding: 10px 15px;}	
	#sidebar .infobox span {display: block;font-weight: bold;}
	
	#sidebar hr{background-color: rgba(255,255,255,0.1); margin: 10px;}
	
#maincontent{width: 100%; padding-left: 250px;}

/* header */

#header{background-color: var(--main-dark-ish)/*#2f3136*/; position: relative; color: #c6c6c6; padding: 20px;}
	
	.profile{color: #c6c6c6; border-style: solid; border-width: 1px; border-color: rgba(255,255,255,0.5); border-radius: 5px; padding: 10px 20px 10px 10px; background-color: rgba(0,0,0,0.2); cursor:default;}
		.profile .discord{padding-bottom: 10px;}
		.profile .discord i{ margin-right: 5px;}
		.profile .priceindicator{position: relative; height: 20px; margin: 10px 0;}
			.profile .priceindicator .line{z-index: 1; position: absolute; top:0; left: 0; width: 100%; width: 100%; height: 3px; background-color: rgba(255,255,255,0.05);}
			.profile .priceindicator .line2{z-index: 2; position: absolute; top:0; left: 0; width: 0; height: 3px; background-color: rgba(255,255,255,0.9);}
			.profile .priceindicator .dot{z-index: 3; position: absolute; top: -4px; left: 0; width: 12px; height: 12px; background-color: rgba(255,255,255,0.5); border-radius: 300px;}
				.profile .priceindicator .dot span{font-size: 10px; position: relative; top: 10px; white-space: nowrap;}
			
			.profile .priceindicator .betekinto_dot{left: 20%; background-color: var(--betekinto); -webkit-box-shadow: 0 0 8px 0 var(--betekinto); box-shadow: 0 0 8px 0 var(--betekinto);}
				.profile .priceindicator .betekinto_dot span{left: -16px;}
			.profile .priceindicator .tanulo_dot{left: 40%; background-color: var(--tanulo); -webkit-box-shadow: 0 0 8px 0 var(--tanulo); box-shadow: 0 0 8px 0 var(--tanulo);}
				.profile .priceindicator .tanulo_dot span{left: -8px;}
			.profile .priceindicator .swingtrader_dot{left: 60%; background-color: var(--swingtrader); -webkit-box-shadow: 0 0 8px 0 var(--swingtrader); box-shadow: 0 0 8px 0 var(--swingtrader);}
				.profile .priceindicator .swingtrader_dot span{left: -18px;}
			.profile .priceindicator .daytrader_dot{left: 80%; background-color: var(--daytrader); -webkit-box-shadow: 0 0 8px 0 var(--daytrader); box-shadow: 0 0 8px 0 var(--daytrader);}
				.profile .priceindicator .daytrader_dot span{left: -16px;}
			.profile .priceindicator .protrader_dot{left: 100%; background-color: var(--protrader); -webkit-box-shadow: 0 0 8px 0 var(--protrader); box-shadow: 0 0 8px 0 var(--protrader);}
				.profile .priceindicator .protrader_dot span{left: -34px;}
				
			/* state by subscription */
			.profile .priceindicator .dot.before {background: none;}
				.profile .priceindicator .dot.before span{opacity: 0.2;}
			.profile .priceindicator .dot.active{font-weight: bold;}
			.profile .priceindicator .dot.after{}
			.profile .priceindicator .dot:not(.active){-webkit-box-shadow: none; box-shadow: none;}
			
			.profile .infotext{font-size: 12px;}
			.profile .enddate{font-size: 12px; font-weight: bold; right: -10px; position: relative; padding: 5px 10px; border-radius: 5px; background-color: rgba(0,0,0,0.2);}
			.profile .enddate.alerted{background-color: red; color: white; animation: blinker2 2s linear infinite;}
			
			.profile .chips{}
				.profile .chips .chip{padding: 5px 15px; font-size: 10px; border-radius: 15px; border-width: 1px; border-style: solid; border-color: rgba(255,255,255,0.4); white-space: nowrap; opacity: 0.5;}
					.profile .chips .chip i{padding-right: 5px;}
					
				.profile .chips .chip.active{opacity: 1; background-color: rgba(255,255,255,0.05);}
				.profile .chips .chip.active .fa-times{display: none;}
				.profile .chips .chip:not(.active) .fa-check{display: none;}

#upper_menu{text-align: right; padding-top: 3px;}
	#upper_menu a{font-size: 14px; text-align: center; color: rgba(255,255,255,0.3); width: 150px; display: inline-block; background-color: rgba(0, 0, 0, 0); border-radius: 5px; margin: 0 0 0 10px; padding: 20px;}
	#upper_menu a i{display: block; margin-bottom: 10px;}
	#upper_menu a:hover, #upper_menu a.selected{color: rgba(255,255,255,0.9); background-color: rgba(255,255,255,0.05);}


/* PUBLIC */
body.public{background-color: var(--main-dark); background-image: none; display: flex; align-items: center;justify-content: center; min-height: 100vh;}
#publicpage{width: 100%; max-width: 400px; min-width: 200px; margin: 20px 10px;}
#logo_public{display: block; text-align: center;}
	#logo_public img{max-width: 90%; width: 150px; display: inline-block;}
#content_public{border-style: solid; border-width: 1px; border-color: rgba(255,255,255,1); background-color: rgba(255,255,255,1); border-radius: 5px; padding: 10px 20px; margin: 30px 0 20px;}
	#content_public form{background-color: rgba(0,0,0,0); margin-bottom: 0;}
	#content_public .other_options{text-align: center; margin-top: 15px;}
	#content_public .other_options a{font-size: 12px;}
	#publicpage #copyright{color: rgba(255,255,255,0.5);}

	
/* main */
#content{border-radius: 5px; background-color: white; padding: 20px 30px; position: relative; margin-top: 20px; /*top: -40px; margin-bottom: -40px;*/ z-index: 5;}
h1{font-family: 'Rubik', sans-serif; border-color: #f0f4f7; border-width: 0 0 1px 0; border-style: solid; display: block; padding: 0 0 5px 0; margin-bottom: 20px; font-size: 28px;}
h1 .h1comment{display: block; font-size: 20px; color: rgba(0,0,0,0.5);}
h2{font-family: 'Rubik', sans-serif; font-size: 22px; border-color: #f0f4f7; border-style: solid; border-width: 0 0 1px 0; padding: 0 0 5px 0; margin-bottom: 20px; font-weight: normal;}
#copyright{font-size: 10px; text-align: center; padding: 10px;}

#crumb{font-size: 12px; position: relative; top: -20px;}
	#crumb a{display: inline-block; padding: 5px 0; color: #d6dde5;}
	#crumb a:nth-last-child(2){}
	#crumb a:hover{text-decoration: none;}
	#crumb .crumb_after{padding: 5px; color: #d6dde5; font-size: 8px;}
	#crumb .crumb_after:nth-last-child(1){display: none;}

#session-msg{padding: 10px 20px; margin-bottom: 20px;}
#session-msg.bg-success{background-color: #d2eec6 !important;}	
#session-msg.bg-danger{background-color: #f2cece !important;}	
	#session-msg i{padding-right: 10px;}


.main_page_box{border-radius: 5px; border-style: solid; border-color: var(--protrader); border-width: 2px; background-color: rgba(0,0,0,0.01); padding: 20px;}

.table_page{white-space: nowrap; line-height: 100%;}
	/*.table_page .logo{width: 200px; margin: 20px auto 30px;}
		.table_page .logo img{display: block; width: 100%;}*/
		
	.table_page .logo{text-align: center;}
		.table_page .logo .lottie_container{height: 100px; overflow: hidden;}
		.table_page .logo .lottie_container .lottie{height: 300px; display: block; margin: -100px auto;}
		.table_page .logo .text{display: block; margin: 0 0 40px; font-size: 25px; font-weight: bold;}
	
	.table_page .timeframe_select{text-align: center; margin-bottom: 30px;}
		.table_page .timeframe_select a{border-radius: 2px; background-color: rgba(0,0,0,0.5); color: white; display: inline-block; padding: 5px 15px; margin: 0 2px; opacity: 0.4;}
		.table_page .timeframe_select a.selected, .table_page .timeframe_select a:hover{opacity: 1;}

	.table_page	.exchange_table tr{border-style: solid; border-color: rgba(0,0,0,0.05); border-width: 0 0 1px 0 !important;}
		.table_page	.exchange_table tr td{padding: 20px;}
		
		.table_page	.exchange_table tr.state0{opacity: 0.2;}
			.table_page	.exchange_table tr.state0 .icon{opacity: 0.2;}
		.table_page	.exchange_table tr.state1{}
			.table_page	.exchange_table tr.state1 .icon{color: #4caf50; opacity: 0.2;}
		.table_page	.exchange_table tr.state2{background-color: rgba(0,0,0,0.05);}
			.table_page	.exchange_table tr.state2 .icon{color: var(--swingtrader-50);}
		.table_page	.exchange_table tr.state3{background-color: var(--swingtrader); animation: blinker 2s linear infinite;}
			.table_page	.exchange_table tr.state3 .icon{color: #ff5722; -webkit-box-shadow: 0 0 10px 1px #ff5722; box-shadow: 0 0 10px 1px #ff5722; border-radius: 500px;}
		
		/*.table_page	 tr.state3 td:nth-child(3){}*/
		.table_page .exchange_table td.strike{font-weight: bold; text-decoration: line-through;}
		
		.table_page	.exchange_table tr.state3:nth-child(2n){animation-delay: 0.1s;}
		.table_page	.exchange_table tr.state3:nth-child(3n){animation-delay: 0.2s;}
		.table_page	.exchange_table tr.state3:nth-child(4n){animation-delay: 0.3s;}
		.table_page	.exchange_table tr.state3:nth-child(5n){animation-delay: 0.4s;}
		
		/* green on click, JS (backtest page)*/
		.table_page	.exchange_table tr .clickable{cursor: pointer;}
		.table_page	.exchange_table tr.greened{background-color: #dcedc8;}
		.table_page	.exchange_table tr.greened .icon{color: #689f38;}
		


@keyframes blinker {
	50% {opacity: 0.8;}
}
@keyframes blinker2 {
	50% {opacity: 0.5;}
}

.buy_button{cursor: pointer; display: block; background-color: white; border-color: black; color: black;  border-width: 2px; border-radius: 5px; border-style: solid; padding: 5px 10px;}
.buy_button.tanulo{border-color: var(--tanulo); color: var(--tanulo);}
.buy_button.tanulo:hover{background-color: var(--tanulo); color: white;}
.buy_button.swingtrader{border-color: var(--swingtrader); color: var(--swingtrader);}
.buy_button.swingtrader:hover{background-color: var(--swingtrader); color: var(--main-dark);}
.buy_button.daytrader{border-color: var(--daytrader); color: var(--daytrader);}
.buy_button.daytrader:hover{background-color: var(--daytrader); color: white;}
.buy_button.protrader{border-color: var(--protrader); color: var(--protrader);}
.buy_button.protrader:hover{background-color: var(--protrader); color: white;}

.alert_circle {margin-left: 4px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #ff3030; color: white; padding: 3px 8px; font-size: 12px; opacity: 1;}
.alert_circle.orange{background-color: #ff9430;}

.miner_update_icon{color: rgba(0,0,0,0.2); font-size: 15px; margin-left: 20px;}

form, .form{background-color: rgba(0,0,0,0.01); padding: 20px; -webkit-border-radius: 4px; border-radius: 4px;}
.form-control{background: none;}
.attention form{background: none;}

.code_field{font-family: "Courier New", Arial; font-size: 12px; width: 100%; height: 60px; padding: 6px 12px;}

.grecaptcha-badge{display: none;}

/*formblock*/
.formblock{border-style: solid; border-color: rgba(0,0,0,0.2); border-width: 1px; margin-bottom: 20px;}
	.formblock .header{position: relative; padding: 20px; background-color: rgba(0,0,0,0.1); border-style: solid; border-color: rgba(0,0,0,0.2); border-width: 0 0 1px 0; font-style: "Hind", Arial; font-size: 18px; font-weight: bold;}
		.formblock .header #opten{width: 50px; position: absolute; top: 20px; right: 20px; cursor: pointer;}
	.formblock .main{padding: 20px;}
	.formblock .col-md-12, .formblock .col-md-6, .formblock .col-md-4, .formblock .col-md-3{padding-bottom: 10px; margin-bottom: 10px;}
	
	/* add btn */
	/*.formblock .btn-add{opacity: 0; cursor: pointer; background-color: #404040; padding: 0 5px; color: white !important; border-width: 0; position: relative; top: -10px; left: 30px;}
	.formblock .btn-add i{font-size: 12px; margin-right: 5px;}
	
	.formblock .col-md-4:hover .btn-add{opacity: 0.5;}
	.formblock .col-md-6:hover .btn-add{opacity: 0.5;}
	.formblock .col-md-12:hover .btn-add{opacity: 0.5;}
	
	.formblock .col-md-4 .btn-add:hover{opacity: 1; background-color: #404040;}
	.formblock .col-md-6 .btn-add:hover{opacity: 1; background-color: #404040;}
	.formblock .col-md-12 .btn-add:hover{opacity: 1; background-color: #404040;}*/
	
	
	/* remove btn */
	/*.formblock*/ li .remove{cursor: pointer; opacity: 0; margin-left: 5px;}
	/*.formblock*/ li:hover .remove{opacity: 0.5;}
	/*.formblock*/ li .remove:hover{opacity: 1;}
	
	/* add btn */
	/*.formblock*/ label .add{cursor: pointer; opacity: 0; margin-left: 5px;}
	/*.formblock*/ label:hover .add{opacity: 0.5;}
	/*.formblock*/ label .add:hover{opacity: 1;}
	
	.formblock .more_info{opacity: 0.5; margin-left: 5px;}
	
/*.formblock*/.readonly li .remove{display: none;}
/*.formblock*/.readonly label .add{display: none;}

	/*.formblock #label li{list-style: none; display: inline-block; background-color: rgba(0,0,0,0.05); font-size: 14px; -webkit-border-radius: 5px; border-radius: 5px; padding: 4px 8px; margin-right: 5px; }*/
	#label li{cursor: default; list-style: none; display: inline-block; background-color: rgba(0,0,0,0.05); font-size: 14px; -webkit-border-radius: 5px; border-radius: 5px; padding: 4px 8px; margin-right: 5px; margin-bottom: 5px; }


#modal{}
	#modal .modal-body{}
		#modal .modal-body .add_this_element{cursor: pointer; padding: 5px; opacity: 0.5;}
		#modal .modal-body .add_this_element i{margin-right: 5px; font-size: 12px;}
		#modal .modal-body .add_this_element:hover{opacity: 1;}


.readonly #add-label {display: none;}


#filter{opacity: 0.6; border-style: solid; border-color: rgba(0,0,0,0.2); border-width: 2px; margin-bottom: 40px;}
	
/* ckeditor mod */	
.ck-editor__editable {font-size: 14px; padding: 0 15px !important;}
.ck-toolbar{-webkit-border-radius: 5px 5px 0 0 !important; border-radius: 5px 5px 0 0 !important;}
.ck-editor__editable{-webkit-border-radius: 0 0 5px 5px !important; border-radius: 0 0 5px 5px !important;}


.files{}
	.files .file{position: relative; background-color: rgba(0,0,0,0.05); padding: 5px 8px;}
	.files .file .a{color: #404040;}
	.files .file .a:hover{color: #404040;text-decoration: none;}
	.files .file:nth-child(2n){background-color: rgba(0,0,0,0.08);}
	
	.files .file .x{opacity: 0; color: white; background-color: red; position: absolute; top:0; right: 0; padding: 3px 12px 6px;}
	.files .file .x:hover{color: white; text-decoration: none;}
	.files .file:hover .x{opacity: 1;}
	
.formblock.readonly #addfile{display: none;}
.formblock.readonly .files .x{display: none;}


/**/
.simplebuttons{}
a.opt_btn{position: relative; margin-bottom: 20px; color: #3a4652; border-color: rgba(0,0,0,0.05); border-style: solid; border-width: 1px; padding: 20px; display: block; background-color: rgba(0,0,0,0.001); -webkit-border-radius: 4px; border-radius: 4px;}
	a.opt_btn i{display: block; text-align: center; font-size: 25px; margin-bottom: 20px;}
	a.opt_btn .title{display: block; text-align: center;}
	a.opt_btn .number{position: absolute; top: 0; left: 0; display: inline-block; text-align: center; color: white; background-color: #3a4652; font-size: 14px; font-weight: bold; padding: 2px 0; width: 20px; -webkit-border-radius: 4px 0 4px 0; border-radius: 4px 0 4px 0;}
	
a.opt_btn:hover{color: white; background-color: #45aed6; text-decoration: none;}
a.opt_btn:hover .number{color: white; background-color: white; color: #45aed6; text-decoration: none;}


.error{background-color: #f2cece; padding: 10px;}
#formpage_textarea{width: 100%; height: 200px; resize: none; background-color: rgba(0,0,0,0.01); color: #3a4652; font-family: "Courier New", Arial; font-size: 12px; padding: 5px 10px; margin-top: 10px; line-height: 100%;}
#formpage_copy_textarea{position: absolute; bottom: 27px; right: 15px; -webkit-border-radius: 0.2rem 0 0 0; border-radius: 0.2rem 0 0 0;}
#formpage_selflink{font-weight: bold; font-size: 14px;}
#formpage_selflink:hover{text-decoration: none;}

#backbtn{/*background-color: rgba(0,0,0,0.1);*/ display: inline-block; font-size: 14px; padding: 8px 14px 6px 14px; position: absolute; top: 15px; right: 30px; color: #ffffff; z-index: 10;}
#backbtn:hover{ /*background-color: rgba(0,0,0,0.5);*/}
	#backbtn a{color: #ffffff;}
	#backbtn a:hover{color: #ffffff;}


#finishform{position: relative;}
#finishform #finishform_hover{opacity: 0; position: absolute; top:0; left: 0; background-color: rgba(252,252,252,0.95); text-align: center;}
#finishform #finishform_hover .text{padding: 0 20px; font-weight: bold;}
#finishform #finishform_hover:hover{opacity: 1;}
	
/* progress bar */
#progressbar{overflow: hidden; width: 100%; border-color: #d6dde5; background-color: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.05); border-style: solid; border-width: 1px; -webkit-border-radius: 4px; border-radius: 4px;}
	#progressbar .bar_process{width: 50%; overflow: hidden;}
		#progressbar .bar_process .bar{height: 40px;background-image: repeating-linear-gradient(45deg, #42a4c9, #42a4c9 10px, #45aed6 10px, #45aed6 20px); width: 200%;
		-webkit-animation-name: MOVE-BG; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
		animation-name: MOVE-BG; animation-duration: 0.5s; animation-timing-function: linear; animation-iteration-count: infinite;}

@-webkit-keyframes MOVE-BG {from {-webkit-transform: translateX(-30px);} to {-webkit-transform: translateX(-1px);}}

@keyframes MOVE-BG {from {transform: translateX(-30px);} to {transform: translateX(-1px);}}

/*bootstrap mod*/
.table-striped tbody tr:nth-of-type(odd){background-color: rgba(0,0,0,0.01);}
.table-hover tbody tr:hover{background-color:rgba(0,0,0,0.1); cursor: default;}
.table-clickable tbody tr:hover{cursor: pointer;}
.table td, .table th{border-top: 0;}
.btn-primary{font-size: 14px;}
.btn-danger{font-size: 14px;}
.btn{cursor: pointer;}
.btn-primary:hover{background-color:#45aed6; border-color: #45aed6;}
input[type="color"]{height: 30px;}
form label{font-weight: bold;}
.table-striped tbody tr.redback:nth-of-type(odd), .table-striped tbody tr.redback{background-color: #f2cece;}
.container{min-width: 350px;}
.table-sm td, .table-sm th{padding: 10px 10px;}

.table-sm td i.fa-chevron-right{color: rgba(0,0,0,0.5);}

.cursor_pointer{cursor: pointer;}

/* BTN HACK */
.btn-primary{-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;background-color: var(--main-yellow); color: var(--main-dark); border-color: rgba(0,0,0,0.05);}
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{background-color: var(--main-yellow); color: var(--main-dark); border-color: rgba(0,0,0,0.05); filter: brightness(105%); box-shadow: 0 0 0 0;}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-primary.focus, .btn-primary:focus{box-shadow: 0 0 0 0;}


/* table btn (not used anymore) */
.table-clickable tr td {position: relative;}
.table-clickable tr td .btn-primary{padding: 2px 8px; position: absolute; top: 2px; right:8px;}
.table-clickable tr:not(:hover) .btn-primary{background-color: rgba(0,0,0,0.2); border-color: rgba(0,0,0,0.1); color: rgba(255,255,255,1);} 

/*general*/
.scrollable-x{overflow-x: scroll; overflow-y: hidden;}
.w100{width: 100%; display: block;}
.bottom10{margin-bottom: 10px !important;}
.bottom20{margin-bottom: 20px !important;}
.bottom40{margin-bottom: 40px !important;}
.top10{margin-top: 10px !important;}
.top20{margin-top: 20px !important;}
.top40{margin-top: 40px !important;}
.none, .hide, .hide2, .hidden{display: none !important;}
.center{text-align: center;}
.attention{display:block; padding: 10px; margin: 10px 0; background-color: rgba(0,0,0,0.01);}
.redbox{background-color: #f2cece; padding: 2px 5px; margin: 8px display: inline-block;}
.hscroll{display: block; overflow-x: auto; white-space: nowrap;}
.b, .bold{font-weight: bold;}
.right{text-align: right;}
.rounded, .round{-webkit-border-radius: 5px;border-radius: 5px;}
.hide{display: none;}
.wide_stuff_container{overflow: hidden; overflow-x: auto;}


table.shortable th:not(:empty){cursor: pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
table.shortable th:not(:empty):hover{background-color:rgba(0,0,0,0.03);}

.transition, .trans, .transitions{-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.transition_bg, .trans_bg, .transitions_bg{-webkit-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out; -ms-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out;}

#fireworks{/*background-color: black;*/ position: absolute; top:0; left: 0; pointer-events: none;}

.show_in_mobile{display: none !important;}
.hide_in_mobile{}


.shimmer {
  color: grey;
  display:inline-block;
  -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}


.glassy {
	background: rgba(255, 255, 255, 0.26);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

/*
	==========================
	RESPONSIVE
	==========================
	lg: 1200 - ...
	normal: 992 - 1200
	md: 768 - 992
	sm: 575 - 768
	xs: 0 - 575
	
*/

@media (max-width: 1370px){
	#upper_menu a{width: 110px; padding: 20px 5px;}
}

/* mobile view */
.show_on_mobile{display: none;}
@media (max-width: 1144px){
	
	#header {display: none;}
	#upper_menu_on_mainmenu {display: block !important;}
	
	#sidebar{position: relative; width: 100%; height: auto; padding: 20px 10px;}
	#sidebar_logo{display: none;}
	#sidebar_logo_2{display: block !important;}
		#sidebar_logo_2 .i1{padding-left: 10px; width: 50px;}
		#sidebar_logo_2 .i2{padding-left: 10px; width: 100px;}
	
	#sidebar #menu {display: none;}
	#mobile_btn{display: block !important; position: absolute; background-color: rgba(255,255,255,0.1); top: 16px; right: 16px; padding: 8px 14px; color: var(--main-yellow);}
	
	#maincontent{padding-left: 0;}
	#content{padding: 5px 10px;}
	.show_on_mobile{display: block;}
}

/* < normal - maximum */
@media (max-width: 992px){
	
}

/* < md - maximum */
@media (max-width: 460px){
}

/* < sm - maximum */
@media (max-width: 575px){
	
}