@charset "utf-8";

/* Font */
/* Material Icons font config */
@font-face {
    align-items:center;
	display:inline-flex;
	font-display:swap;
	font-family:'Material Icons';
	font-style:normal;
	font-weight:400;
    justify-content:center;
    vertical-align:middle;
	src:url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

/* Noto Sans Simplify Chinese font */
@font-face {
	font-display:swap;
	font-family:'NotoSansSC';
	font-style:normal;
	font-weight:400;
	src:local('NotoSansSC'),
		local('NotoSansSC-Regular'),
		url('../font/NotoSansSC-Regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('../font/NotoSansSC-Regular.woff') format('woff'), /* Modern Browsers */
		url('../font/NotoSansSC-Regular.otf') format('opentype'), /* Safari, Android, iOS */
		url('../font/NotoSansSC-Regular.svg#NotoSansSC') format('svg'); /* Legacy iOS */
}

/* Rubik font */
@font-face {
	font-display:swap;
	font-family:'Rubik';
	font-style:normal;
	font-weight:400;
	src:local('Rubik'),
		url('../font/Rubik-Regular.ttf') format('truetype')
}


/* Animation */
@keyframes slideR{
	from {transform:translateX(-50px)}
	to {transform:translateX(0px)}
}
@-webkit-keyframes slideR{
	from {-webkit-transform:translateX(-50px)}
	to {-webkit-transform:translateX(0px)}
}
@keyframes slideL{
	from {transform:translateX(50px)}
	to {transform:translateX(0px)}
}
@-webkit-keyframes slideL{
	from {-webkit-transform:translateX(50px)}
	to {-webkit-transform:translateX(0px)}
}
@keyframes slideU{
	from {transform:translateY(50px)}
	to {transform:translateY(0px)}
}
@-webkit-keyframes slideU{
	from {-webkit-transform:translateY(50px)}
	to {-webkit-transform:translateY(0px)}
}

/* opacity fade */
@keyframes fade {
  	from {opacity: 0}
  	to {opacity: 1}
}
@-webkit-keyframes fade {
  	from {opacity: 0}
  	to {opacity: 1}
}

/* rotate animation */
@-webkit-keyframes rotation {
	0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
	}
	100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
	}
}

/* slide  animation */
@-webkit-keyframes slide {
	from {bottom: -40px; opacity: 0.5} 
	to {bottom: 0; opacity: 1}
}
@keyframes slide {
  	from {bottom: -40px; opacity: 0.5}
  	to {bottom: 0; opacity: 1}
}

/* Toast Animation*/
@-webkit-keyframes toast {
	from {top:-180px; opacity: 0;} 
	to {top: 48px; opacity: 1;}
}
@keyframes toast {
	from {top:-180px; opacity: 0;} 
	to {top: 48px; opacity: 1;}
}

@-webkit-keyframes ic_zoom{
	0% {-webkit-transform:scale(1)} 
    50% {-webkit-transform:scale(1.2)}
	100% {-webkit-transform:scale(1)}
}
@keyframes ic_zoom{
	0% {transform:scale(1)} 
    50% {transform:scale(1.2)}
	100% {transform:scale(1)}
}
@-webkit-keyframes ic_left {
	from {right: -10px; opacity: 0.7} 
	to {right: 0; opacity: 1}
}
@-webkit-keyframes ic_right {
	from {left: -10px; opacity: 0.7} 
	to {left: 0; opacity: 1}
}

/* zoom animation */
@-webkit-keyframes zoom {
    0% {-webkit-transform:scale(0.8) translateY(50%); display: none;} 
    100% {-webkit-transform:scale(1) translateY(50%); display: block;}
}
@keyframes zoom {
    0% {transform:scale(0.8) translateY(50%); display: none;} 
    100% {transform:scale(1) translateY(50%); display: block;}
}




/* Universal */
*{
	transition:0.3s;
	-webkit-transition:0.3s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	font-family: "Rubik";
}

/* bold */
b{
	transition: visibility 0.3s, opacity 0.3s ease;
	-webkit-transition: visibility 0.3s, opacity 0.3s ease;
}

/* body */
body{
	background:var(--color-bg);
	margin:0;
}

img{
	user-select: none;
	-moz-user-select:none;
	-webkit-user-select:none;
}

/*Hide banner */
img[alt="www.000webhost.com"] { 
    display: none;
}

/* paragraph */
p{
	margin:2px;
	transition: visibility 0.3s,background 0.3s, opacity 0.3s ease,color 0.3s;
	-webkit-transition: visibility 0.3s,background 0.3s, opacity 0.3s ease,color 0.3s;
}

/* search bar */
input[type="search"]{
	background:var(--search-bg);
	border:none;
	border-radius:48px;
	color:var(--color-primary-text);
	font-size:20px;
	outline:none;
	padding:12px;
	transition:0.3s;
	-webkit-transition:0.3s;
}

/* text field */
input{
	background:Transparent;
	border:none;
	border-bottom:2px solid #c1c1c1;
	border-radius: 0;
	color:var(--color-primary-text);
	font-size:20px;
	outline:none;
	padding:12px;
	transition:0.3s;
	-webkit-transition:0.3s;
	width:99%;
	box-sizing: border-box;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	border: none;
	border-bottom:2px solid #c1c1c1;
	font-size: 20px !important;
	-webkit-text-fill-color: var(--color-primary-text);
	-webkit-box-shadow: 0 0 0px 1000px var(--color-content-bg) inset;
	box-shadow: 0 0 0px 1000px var(--color-content-bg) inset;
	-webkit-transition:box-shadow 0.3s ease;
}
input[type="search"]:-webkit-autofill,
input[type="search"]:-webkit-autofill:hover, 
input[type="search"]:-webkit-autofill:focus{
	border: none;
	-webkit-box-shadow: 0 0 0px 1000px var(--search-bg) inset;
	-webkit-transition:box-shadow 0s ease;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}


/* placeholder */
::placeholder {
	color:var(--color-secondary-text);
}

/* root value */
:root{
	--color-bg:#eaeaea;
	--color-overlay-bg:#eaeaeac5;
	--color-content-bg:#f8f8f8;
	--color-hover-bg:rgba(0,0,0,0.2);
	--color-primary-text: rgba(0,0,0,0.9);
 	--color-secondary-text: rgba(0,0,0,0.7);
 	--color-grey-text: #777;
	--color-icon:#d50000;
  	--link: #daa320;
	--search-bg:#e1e1e1;
    --native-blur:blur(4px) saturate(200%);
}

/* Scroll bar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: Transparent; 
}
::-webkit-scrollbar-thumb {
  background:var(--color-hover-bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background:var(--color-grey-text);
}

/* selection */
/* iOS Safari not supported */
::-moz-selection {
	color: #fcc542;
	background:red;
}
::selection {
	color: #fcc542;
	background:#ff000080;
}



/* Animation Reverse */
.aniR{
	animation-direction: reverse;
	-webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
}

/* big screen optimize*/
.largeUI{}

/* button */
.btn,.btn_with_text,.btn_with_text2{
	background:linear-gradient(to right, #fcc542 0%, #ff0000 55%, #fcc542 100%);
	background-position:left center;
	background-size:200% auto;
	display:block;
	padding:16px;
	text-decoration:none;
	color:#fff;
	border-radius:50%;
	outline:none;
	border:none;
	box-sizing:border-box;
	font-size:20px;
	transiton:0.3s ease;
	-webkit-transition:0.3s ease;
}
.btn:active,.btn_with_text:active{
	background-position: right center;
	transiton:0.3s ease;
	-webkit-transition:0.3s ease;
}
.btn_with_text,.btn_with_text2{
	margin:5px;
	padding-top:8px;
	padding-bottom:8px;
	border-radius:24px;
	display:inline-block;
}
/* Transparent background */
.btn_with_text2{
	background:Transparent;
	color:#ebb631;
	border:1px solid #fcc542;
	margin: 6px 11px;
}
.btn_with_text2:active{
	border:2px solid #fcc542;
	padding:24px;
	padding-top:8px;
	padding-bottom:8px;
	font-weight:600;
	margin:5px;
}
button.btn_with_text,button.btn_with_text_text2{
	padding:12px;
	padding-left:18px;
	padding-right:18px;
}

/* content */
.content{
	background:var(--color-content-bg);
	border-radius:30px;
	box-shadow:1px 1px 1px 1px rgba(0, 0, 0, .1);
	color:var(--color-primary-text);
	font-size:20px;
	margin:5px 12px;
	padding:13px;
	position:relative;
}
/* divider text */
.divider{
	background:Transparent;
	color:var(--color-primary-text);
	display:block;
	font-size:15px;
	margin:1px;
	padding-left:13px;
	position:relative;
}
/* Dropdown */
.dropdown{
    color:var(--color-secondary-text);
}
.dropdown sup{
    margin:2px;
    font-size: 14px;
    line-height: 16px;
    color: var(--link);
}
.dropdown .menu{
    background-color: transparent;
    width: 150px;
    max-height: 0px;
    overflow: hidden;
    position: absolute;
    z-index:2;
    border-radius: 24px;
    transition: 0.3s ease;
    backdrop-filter:var(--native-blur);
	-webkit-backdrop-filter:var(--native-blur);
}
.dropdown .menu.active{
    background-color:var(--color-overlay-bg);
    max-height: 300px;
    box-shadow:1px 1px 1px 1px rgba(0, 0, 0, .1);
}
#navbar .dropdown .menu.active{
    background-color:var(--color-content-bg);
}
.dropdown .menu a{
    display: block;
    padding: 12px 16px!important;
    color:var(--color-primary-text);
    width: 150px!important;
    box-sizing: border-box;
}
.dropdown .menu a.active{
    color:var(--link);
}
/* Optimization dropdown menu for navbar */
#navbar .dropdown p{
    width: 160px;
    text-align: right;
}
#navbar .dropdown a{
    clear: both;
    text-align: left;
    color: var(--color-secondary-text);
}
#navbar .dropdown a:active{
    border-radius: 24px;
}
/* Dropdown END */
/* Floating right bottom */
.float{
	bottom:10px;
	box-shadow: 1px 1px 3px 1px rgba(256,0,0,0.5);
	position:fixed;
	right:12px;
	z-index: 2;
}

/* Hint */
.hint{
    position: relative;
    display: inline-block;
}
.hint_content{
    visibility: hidden;
    width: auto;
    max-width: 200px;
    padding: 7px;
    background: var(--color-hover-bg);
    margin: 5px;
    border-radius: 16px;
    color: var(--color-secondary-text);
    position:absolute;
    text-align: center;
    left: 50%;
    bottom: calc(50% + 10px);
    transform: translateX(calc(-50% - 5px));
    backdrop-filter:var(--native-blur);
	-webkit-backdrop-filter:var(--native-blur);
}
.hint:hover .hint_content{
    visibility: visible;
}

/* hyperlink */
.link{
	color:var(--link);
}

/* Image Preview */
.imgContainer,.icon_imgContainer,.imgContainerSmall{
	width:250px;
	height:250px;
	line-height:250px;
	background:var(--color-hover-bg);
	align-items:center;	
	display:flex;
	justify-content:center;
	margin:auto;
	border-radius:50%;
	clip-path: circle(50% at 50% 50%);
	-webkit-clip-path: circle(50% at 50% 50%);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.icon_imgContainer{
	width:36px;
	height:36px;
	line-height:36px;
}
.imgContainerSmall{
	width:150px;
	height:150px;
	line-height:150px;
}
.imgContainer img{
	max-height:250px;
	max-width:250px;
}
.icon_imgContainer img{
	max-height:36px;
	max-width:36px;
}
.imgContainerSmall img{
	max-height:150px;
	max-width:150px;
}

/* input bottom bar */
.bar {
	display:block;
	position:relative;
	width:99%;
}
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#1ad1ff; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* input container */
.input{ 
  position:relative; 
  margin-top:20px;
  margin-bottom:20px;
}
.input button{
	background:Transparent;
	border:none;
	border-bottom:2px solid #c1c1c1;
	color: var(--color-secondary-text);
	font-size:23px;
	outline:none;
	padding:12px;
	transition:0.3s;
	-webkit-transition:0.3s;
	width:36px;
	box-sizing: border-box;
	display: inline-block;
}
.input button:active{
	color: var(--link);
}
.input .nojs ~ label,.input .filled ~ label,.input input:focus ~ label{
  top:-14px;
  font-size:14px;
  color:var(--color-secondary-text);
}
.input input:-webkit-autofill ~ label{
	top:-14px;
	font-size:14px;
	color:var(--color-secondary-text);
}
/* input focus effect */
.input input:focus ~ .bar:before,.input input:focus ~ .bar:after {
  width:50%;
}
.input input:focus ~ label{
  color:#1ad1ff;
}


/* input text field label */
label{
  color:var(--color-secondary-text); 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/*list menu*/
.list a{
	text-decoration:none;
	color:var(--color-primary-text);
	display:block;
	line-height:26px;
	height:36px;
	padding:5px;
	padding-left:12px;
	padding-right:12px;
	box-sizing:border-box;
	border-radius:24px;
}

.list a:active{
	background-color:var(--color-hover-bg);
	color:var(--color-secondary-text);
}

.list a span{
	color:var(--color-primary-text);
	float:right;
	font-size:24px;
	line-height:26px;
}

/* material-icons config */
.material-icons{
display: inline-block;
font-size: inherit;
line-height: inherit;
vertical-align: middle;
transform: translateY(.05em);
}

/* Page Content */
.page_content{
	margin-bottom: 52px;
	overflow:hidden;
    width: 100%;
}

/* Pop UP Dialog */
.modal {
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	-webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.modal-content {
	background-color:var(--color-content-bg);
	position: fixed;
	bottom: 0;
	display:block;
	margin:12px;
	width:calc(100% - 24px);
	border-radius:24px;
	max-height:96%;
	overflow:hidden;
}
.modal-content *{
	background-color:var(--color-content-bg);
	color: var(--color-primary-text);
}
/* modal animation*/
.modal-enter{
	-webkit-animation: fade 0.3s;
	animation: fade 0.3s;
}
.modal-exit{
	-webkit-animation: fade 0.3s;
	animation: fade 0.3s;
	animation-direction:reverse;
}
.modal-content-enter{
	-webkit-animation: slide 0.3s;
	animation: slide 0.3s;
}
.modal-content-exit{
	-webkit-animation: slide 0.3s;
	animation: slide 0.3s;
	animation-direction:reverse;
}
.modal-header,.modal-body{
	padding: 0 16px;
}
.modal-body p{
    max-height: calc(96vh - 1.5em - 40px - 60px);
    overflow: auto !important;
}
.modal-footer {
 	box-sizing:border-box;
	overflow:hidden;
	height:60px;
	line-height:60px;
}
.modal-footer a{
	color:var(--color-secondary-text);
	text-decoration:none;
	text-align:center;
	display:inline-block;
	width:46%;
	line-height:40px;
	height:40px;
	margin-top:10px;
	margin-left:2%;
	margin-right:2%;
	box-sizing:border-box;
	font-size:18px;
	border-radius:30px;
}
.modal-footer a:active{
	background:var(--color-hover-bg);
}
/* Progress Bar */
.progressBarL{
	height:25px;
	line-height:5px;
	max-width:100%;
	width:100%;
	background:var(--color-hover-bg);
	border-radius:13px;
	margin:3px;
	overflow:hidden;
}
.progressBarL.thin{
	height:5px !important;
	border-radius:13px;
	margin:3px;
	overflow:hidden;
}
.progressBarL div{
	 height:inherit;
	 line-height:inherit;
	 max-width:inherit;
	 width:0%;
	 background:#daa320;
	 border-radius:inherit;
}
.progressValue{
	margin:1%;
	color:var(--color-secondary-text);
	text-align:left;
	display:inline-block;
	width:47%;
	box-sizing:border-box;
}

/* rotate animation (clock-wise) */
.rotate {
    -webkit-animation: rotation 0.5s ease;
	animation: rotation 0.35s ease;
}

/* rotate animation (anti clock-wise) */
.rotate2 {
		-webkit-animation: rotation 0.5s ease reverse;
		animation: rotation 0.35s ease reverse;
}

/*--Tab-START--*/
.tab {
	border: 2px solid var(--color-hover-bg);
    border-radius: 24px;
	height: 45px;
	line-height: 45px;
    margin: 5px 12px;
	position:fixed;
	bottom: 0;
	top:unset !important;
    width: calc(100% - 24px)!important;
}
.tab .btn_with_text{
	padding-top: 0;
	padding-bottom: 0;
}
.tab button {
	width: 33%;
	background: transparent;
	color: var(--color-secondary-text);
	float: left;
  	border: none;
  	outline: none;
  	cursor: pointer;
  	padding: 10px 20px;
  	transition: 0.3s;
  	font-size: 16px;
	user-select: none;
	-webkit-user-select:none;
	transition: 0.5s;
	-webkit-transition: 0.5s;
}
.tab button.active,.tab button:active{
	color: var(--color-icon);
	animation: ic_zoom 0.4s ease;
	-webkit-animation: ic_zoom 0.4s ease;
}
.tab button::after{
 	content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width:36px; /* Change this to whatever width you want. */
    padding-top: 2px; /* This creates some space between the element and the border. */
    border-bottom: 4px dotted transparent;
	transition: 0.5s;
	-webkit-transition: 0.5s;
}
.tab button.active::after,.tab button:active::after {
    border-bottom-color:var(--color-icon);
}
.tab button:active::after {
	width: 48px;
}
/*--Tab-END--*/

/* title */
.title{
	background-color:var(--color-bg-color);
	padding:auto;
	margin:0;
	text-align:center;
	vertical-align:middle;
	height:28vh;
	font-size:36px;
	color:var(--color-primary-text);
	display:block;
}
.title div{
	position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
	margin:auto;
	max-height:28vh;
	height:auto;
	text-align:center;
}
.title div p{
	margin:0;
	font-size:36px;
	color:var(--color-primary-text);
	transition:color 0.3s ease;
	-webkit-transition:color 0.3s ease;
}
.title div sup{
	margin:0;
	font-size:16px;
	color:var(--color-primary-text);
}

/* Toast */
.toast{
	top:-180px;
	visibility:hidden;
	background:Transparent;
	width:100%;
	height:52px;
	line-height:52px;
	position:fixed;
	display:inline-block;
	z-index:1000;
	text-align:center;
}
.toast a{
	color:var(--link);
	text-decoration:none;
}
.toast p{
    background:linear-gradient(to bottom right, #f00 40%, #fcc542 100%);
    color:#f1f1f1;
    height:auto;
    font-size:24px;
    line-height:42px;
    display:inline-block;
    text-align:center;
    vertical-align:middle;
    width:auto;
    padding-left:24px;
    padding-right:24px;
    border-radius:21px;
    z-index: 1001;
}
.toast.show{
	top:48px;
	visibility: visible;
	-webkit-animation: toast 0.5s ease-out, toast 0.5s 2.5s ease-in reverse;
	animation: toast 0.5s ease-out, toast 0.5s 2.5s ease-in reverse;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.toast.show.long{
	-webkit-animation: toast 0.5s ease-out, toast 0.5s 5.5s ease-in reverse;
	animation: toast 0.5s ease-out, toast 0.5s 5.5s ease-in reverse;
}


/* toggle */
.toggleLabel{
	background-color: #1ad1ff;
	pointer-events:auto;
}
.material-toggle {
	display:inline-block;
	min-height: 40px;
	margin-top:15px;
	width:100%;
}
.material-toggle span{
	color:var(--color-secondary-text);
}
.material-toggle input[type="checkbox"] {
	position: absolute;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.material-toggle label {
	cursor: pointer;
	height: 0px;
	position: relative; 
	width: 40px;
	margin-top:5px;
}
.material-toggle > label::before {
	background: Transparent;
	border:1px solid #c1c1c1;
	border-radius: 11px;
	content: '';
	height: 18px;
	margin-top: -10px;/* -height/2 - border */
	position:absolute;
	transition: all 0.15s ease-in-out;
	width: 37px;
	right: 5px;
}
.material-toggle > label::after {
	background: rgb(255, 255, 255);
	border-radius: 50%;
	border:1px solid rgba(0,0,0,0.5);
	content: '';
	height: 21px;
	width: 21px;
	top: -4px;
	left: -5px;
	margin-top: -7px;
	position: absolute;
	transition: all 0.15s ease-in-out;
	
}
.material-toggle > label:active::after,.material-toggle > input[type="checkbox"]:checked + label:active::after{
	height: 24px;
	width: 24px;
	top: -6px;
}
.material-toggle > input[type="checkbox"]:checked + label::before {
    background: inherit;
	border:1px solid #1ad1ff;		
}
.material-toggle > input[type="checkbox"]:checked + label::after {
    background:white;
    left: 12px;
	border:1px solid #1ad1ff;	
}
/* Upload Container */
.upload-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.upload-container input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}





/* Alert Box */
#alertBox{
	background:rgba(256,0,0,0.7);
	color:#fff;
	display: block;
	overflow: hidden;
	max-height:100vh;
	transition: 0.4s ease;
}
#alertBox .close{
	display:inline-block;
	float:right;
	position:relative;
	padding:8px;
	border-radius:20px;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	user-select: none;
}
#alertBox .close:active,#alertBox .confirm:active{
	background-color:var(--color-hover-bg);
}
#alertBox .confirm{
	float:right;
	font-size:16px;
	font-weight:bolder;
	padding:8px;
	border-radius:20px;		
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	user-select: none;
}
#alertBox.hide{
	max-height:0;
}

/* navbar */
#navbar{
    position: relative;
}
#navbar,.tab{
	overflow: visible;
	background-color:var(--color-overlay-bg);
	height: 48px;
	width: 100%;
	top: 0;
	z-index:99;
	left:0;
	right:0;
	transiton:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	backdrop-filter:var(--native-blur);
	-webkit-backdrop-filter:var(--native-blur);
}
#navbar a,#navbar p,.icon{
	float: left;
	display: block;
	color: #d50000;
	text-align: center;
	padding: 12px 0px 12px 0px;
	text-decoration: none;
	font-size: 24px;
	width:auto;
	line-height:24px;
	cursor:pointer;
}
#navbar a{
	width:48px;
}
#navbar a.right,#navbar div.right{
	padding: 12px 0px 12px 0px;
	float:right;
}
#navbar div.right{
	padding: 0;
}
#navbar a.pic{
	padding: 6px 0px 6px 0px;
}
#navbar p{
	color:var(--color-secondary-text);
	padding:12px 0;
	opacity:0;
	margin:0;
}
#navbar a:active{
	background-color:var(--color-hover-bg);
	border-radius:50%;
}
#navbar a.active {
  background-color: #4CAF50;
  color: white;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed!important;
  top: 0;
}
.sticky + .page_content{
	margin-top: 60px;
}
/*--Navbar-END--*/



/* Portrait mode */
@media not all and (max-height: 550px) and (orientation: landscape){
.page_content{
	min-height:calc(100vh + 52px);
}
}
/* small devices landscape mode */
@media (max-height:550px) and (orientation:landscape){
.modal-content{
	width:64%;
	margin:18%;
	margin-bottom:1%;
}
}
/* Large devices or landscape mode */
@media (min-width:551px) and (orientation: portrait),(min-height:551px) and (orientation: landscape){
@keyframes popup_slideR{
	from {transform:translate(-100px,50%)}
	to {transform:translate(0px,50%)}
}
@-webkit-keyframes popup_slideR{
	from {-webkit-transform:translate(-100px,50%)}
	to {-webkit-transform:translate(0px,50%)}
}
@keyframes popup_slideL{
	from {transform:translate(100px,50%)}
	to {transform:translate(0px,50%)}
}
@-webkit-keyframes popup_slideL{
	from {-webkit-transform:translate(100px,50%)}
	to {-webkit-transform:translate(0px,50%)}
}
p{
	margin:5px;
}

.content{
	margin-bottom:10px;
	padding:20px;
}
.dropdown sup{
    margin:5px;
}
.largeUI .content,.largeUI .divider{
	width:65%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	box-sizing:border-box;
}
.largeUI .divider{
	margin-bottom:2px;
}
.largeUI .tab{
    width: calc(65% - 24px)!important;
    padding:0 !important;
}
.modal-content{
	width:64%;
	margin:18%;
	margin-bottom:1%;
	bottom:50%;
	animation-fill-mode: forwards;
	-webkit-transform:translateY(50%);
	transform:translateY(50%);
}
.modal-content.prev_anim{
	-webkit-animation: popup_slideR 0.4s ease-out;
	animation: popup_slideR 0.4s ease-out;
}
.modal-content.next_anim{
	-webkit-animation: popup_slideL 0.4s ease-out;
	animation: popup_slideL 0.4s ease-out;
}
.modal-content-enter{
	-webkit-animation: zoom 0.3s;
	animation: zoom 0.3s;
	animation-fill-mode: forwards;
}
.modal-content-exit{
	-webkit-animation: zoom 0.3s reverse;
	animation: zoom 0.3s reverse;
	animation-fill-mode: forwards;
}
.largeUI #navbar,.largeUI .tab{
	width:100%;
	margin:auto;
	display:block;
	box-sizing:border-box;
	padding: 0 17%;
}
}
.nightmode {
    --color-bg:#000;
	--color-overlay-bg:#000000c0;
	--color-content-bg:#1f1f1f;
	--color-hover-bg:rgba(256,256,256,0.3);
  	--color-primary-text: #eeeeee;
	--color-secondary-text: #bbbbbb;
 	--color-grey-text: #aaa;
	--search-bg:#3f3f3f;
}