*{ box-sizing: border-box; }
:root{
	color-scheme: light;
	font-size: 62.5%;
	--nav-main-width:30rem;
	--nav-top-height:5.4rem;

	--color-background:#FFF;
	--color-text:#444;
	--color-separator:#ccc;
	--color-menu-mobile:#555;
	/* menu */
	--nav-top-bg:#efefef;
	--menu-bg: #fff;
	--menu-bg-bar: rgba(0, 0, 0, 0.05);
	--menu-color: #444;
	--menu-selected-bg: rgba(41, 162, 241, 0.15);
	--menu-selected-color: #268bce;
	/* table */
	--table-bg-header:#ddd;
	--table-color-header:#333;
	--table-bg:rgba(0,0,0,0);
	--table-bg-even:rgba(0,0,0,0.04);
	--table-color:#333;
	--table-border: 0.01rem solid #eee;

	--color-white:#FFF;
	--color-red-1:#ff3e00;
	--color-red-1-dark:#9c2700;
	--color-blue-1:#268bce;
	--color-blue-1-dark: #0e6fa2;
	--color-purple-1: #6f6f7a;
	--color-purple-1-dark: #484855;
	--color-yellow-1: #ffbe0f;
	--color-gray-dark-1:#444;
	--color-gray-clear-1:#CCC;
	--color-green-1:#00b300;
	--box-shadow-1: 0 0.2rem 0.6rem rgba(0,0,0,0.2);;
}
body.dark-theme {
	color-scheme: dark;
	--color-background: #20242c;
	--color-text: #f6f7f9;
	--color-separator:#444;
	--color-menu-mobile:#fff;
	--nav-top-bg:#20242c;
	/* menu */
	--menu-bg: #23272f;
	--menu-bg-bar: rgba(0, 0, 0, 0.2);
	--menu-color: #fff;
	--menu-selected-bg: rgba(0, 0, 0, 0.15);
	--menu-selected-color: #268bce;
	/* table */
	--table-bg-header:#111;
	--table-color-header:#FFF;
	--table-bg:rgba(0,0,0,0);
	--table-bg-even:rgba(0,0,0,0.3);
	--table-color:#fff;
	--table-border: 0.01rem solid #333;
}
body{ background:var(--color-background); margin:0; padding:0; color:var(--color-text); font-family: roboto, sans-serif; font-size: 1.4rem; letter-spacing: 0.5px; line-height: 2rem; overflow-x: hidden; min-height: 100vh; }
iframe{ border:0; display: block; width: 100%; }
li{ margin:0.5rem 0; }
p{margin:1rem 0; }
a{ color:inherit; }
pre{ border-radius: 0.5rem; }
.title-1{ font-size: 4rem; margin:0; line-height:normal; }
.title-2{ font-size: 2.5rem; margin:0; }
.title-3{ font-size: 2rem; margin:0; }
.title-4{ font-size: 1.8rem; margin:0; }
.link-clear{ text-decoration: none; cursor: pointer; }
.wire, .wire *{ border:1px dotted #F00; }
hr, .separator-1, .separator-h{ margin:3rem 0; border: none; height: 0; border:none; border-bottom: 1px solid var(--color-separator); }
.separator-v{ width:0; border-right: 1px solid #aaa; height: 3rem; margin:0 1rem; }
.disabled{ opacity: 0.3 !important; pointer-events: none; }
.bold{ font-weight: bold; }
.button-1{ border: none; background: var(--color-progress); color:#FFF; padding:0.7rem 1rem; border-radius: 0.3rem; cursor: pointer; }
.button-1:hover{ background: var(--color-progress-dark) }
.button-1.success{ background: var(--color-success); }
.button-1.success:hover{ background: var(--color-success-dark); }
.button-1.error{ background: var(--color-error); }
.button-1.error:hover{ background: var(--color-error-dark); }
.button-1.warning{ background: var(--color-warning); }
.button-1.warning:hover{ background: var(--color-warning-dark); }
.button-alpha{ opacity: 1; cursor: pointer; text-decoration: none; transition: 0.3s opacity; cursor: pointer; }
.button-alpha:hover{ opacity: 0.7; }
.button-icon{ cursor: pointer; transition: 0.3s background-color; background: rgba(0,0,0,0); font-size: 2.2rem; border: 0; width: var(--nav-top-height); height: var(--nav-top-height); }
.button-icon:hover{ background: rgba(0,0,0,0.2); }
.box-shadow-1{ box-shadow: var(--box-shadow-1) }
.input-1{ border: 1px solid #AAA; border-radius: 0.3rem; padding:0.7rem; margin:0 0.2rem; }
.code{ width:100%; padding:1rem; resize:none; height:9rem; background:#1d1e22; color:#FFF; border:none; border-radius: 5px; }

.tag-1{ font-size: 1.4rem; display: inline-block; padding:0.2rem 0.5rem; border-radius: 0.3rem; background: #bbb; color:#333; box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.1); }
.tag-1-white{ background: var(--color-white); color:#333; }
.tag-1-green{ background: var(--color-green-1); color:#FFF; }
.tag-1-yellow{ background: var(--color-yellow-1); color:#333; }
.tag-1-blue{ background: var(--color-blue-1); color:#FFF; }

.scroll-1::-webkit-scrollbar { width: 0.6rem;  }
.scroll-1::-webkit-scrollbar-track { background: transparent; }
.scroll-1::-webkit-scrollbar-thumb { background: rgba(38,139,206, 0.9);  border-radius: 6px; visibility: hidden; }
.scroll-1:active::-webkit-scrollbar-thumb,
.scroll-1:focus::-webkit-scrollbar-thumb,
.scroll-1:hover::-webkit-scrollbar-thumb { visibility: visible; }



.relative{ position: relative; }
.d-block{ display: block; }

.nav-main{ transition: 0.2s; width: var(--nav-main-width); position: fixed; top:0; left:0; bottom:0; z-index: 1; box-shadow: 0.1rem 0 0.5rem rgba(0,0,0,0.2); }
.nav-top{ display: none; z-index: 10; position: fixed; top:0; left: 0; right: 0; justify-content: space-between; align-items: center; height: calc(var(--nav-top-height) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: var(--nav-top-bg); box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0.2); }
.nav-mobile{ display: none; color: var(--color-white); z-index: 99; }
.nav-mobile .drawer_content_wrap{ overflow: hidden; background: var(--menu-bg) !important; padding-top: env(safe-area-inset-top); }
.main-section{ display:block; position: relative; padding: calc(4rem + env(safe-area-inset-top)) 4rem 4rem calc(var(--nav-main-width) + 4rem); }

.message{ padding:2rem; background:#EEE; border-radius: 5px; box-shadow: var(--box-shadow-1); }
.message_icon{ margin:0 10px 0 0; }
.message_red{ background: var(--color-red-1); color:var(--color-white); }
.message_blue{ background: var(--color-blue-1); color:var(--color-white); }
.message_purple{ background: var(--color-purple-1); color:var(--color-white); }
.message_yellow{ background: var(--color-yellow-1); color:var(--color-gray-dark-1); }

.grid-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(40rem, 1fr)); gap:1rem; }
.grid_title_2_columns{ display: grid; column-gap:2rem; row-gap:1.4rem; grid-template-columns: 50rem minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "title title" "left right"; }
.grid_title_1_column{ display: grid; column-gap:5rem; row-gap:1.4rem; grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "title" "content"; }

.mt-0{ margin-top:0; } .ml-0{ margin-left:0; } .mr-0{ margin-right:0; } .mb-0{ margin-bottom:0; }
.mt-5{ margin-top:0.5rem; } .ml-5{ margin-left:0.5rem; } .mr-5{ margin-right:0.5rem; } .mb-5{ margin-bottom:0.5rem; }
.mt-10{ margin-top:1rem; } .ml-10{ margin-left:1rem; } .mr-10{ margin-right:1rem; } .mb-10{ margin-bottom:1rem; }
.mt-20{ margin-top:2rem; } .ml-20{ margin-left:2rem; } .mr-20{ margin-right:1rem; } .mb-20{ margin-bottom:2rem; }

.table-1{ width:100%; border-collapse: collapse; border-radius: 0.5rem; overflow: hidden; font-size: 1.4rem; }
.table-1 th{ font-size: 1.3rem; text-align: left; text-transform: uppercase; padding:1rem 1.2rem; background: var(--table-bg-header); color: var(--table-color-header); border: var(--table-border); }
.table-1 th .tag-1{ font-size: 1.3rem; }
.table-1 td{ padding:1rem 1.2rem; border: var(--table-border); background-color: var(--table-bg); color:var(--table-color); vertical-align: top; }
.table-1 tr:nth-child(even) { background-color: var(--table-bg-even); }
.table-1.min-width{ min-width: 80rem; }

@media (max-width:1400px){
	.grid_title_2_columns{ grid-template-columns: auto; grid-template-rows: auto auto auto; grid-template-areas: " title" "left" "right"; }
}

@media (max-width:1000px){
	.nav-main{ display: none; }
	.nav-top{ display: flex; }
	.nav-mobile{ display: block; }
	.main-section{ padding: calc(var(--nav-top-height) + 2rem + env(safe-area-inset-top)) 2rem 2rem; }
}

@media (max-width:500px){
	.grid-cards{ grid-template-columns: 1fr; }
}