@import url(https://fonts.googleapis.com/css2?family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Segoe+UI:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap);
:root{ --ff-accent: Lato,sans-serif;--ff-body: Segoe UI,sans-serif;--ff-code: 'Source Code Pro',monospace;--fs-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);--fs-lg: clamp(1.56rem, 0.56vw + 1.42rem, 1.87rem);--fs-md: clamp(1.25rem, 0.44vw + 1.14rem, 1.49rem);--fs-sm: clamp(0.8rem, 0.27vw + 0.73rem, 0.95rem);--fs-xl: clamp(1.95rem, 0.72vw + 1.77rem, 2.35rem);--fs-xxl: clamp(2.44rem, 0.92vw + 2.21rem, 2.95rem);--fs-xxxl: clamp(3.05rem, 1.17vw + 2.76rem, 3.7rem);--cl-accent-50: #f0fdf5;--cl-accent-100: #dcfceb;--cl-accent-200: #bbf7d7;--cl-accent-300: #86efb8;--cl-accent-400: #4ade91;--cl-accent-500: #21c671;--cl-accent-600: #16a75c;--cl-accent-700: #158049;--cl-accent-800: #16653d;--cl-accent-900: #145334;--cl-accent-950: #052e1b;--cl-shade-0: #ffffff;--cl-shade-50: #f6f6f6;--cl-shade-100: #e7e7e7;--cl-shade-200: #d1d1d1;--cl-shade-300: #b0b0b0;--cl-shade-400: #888888;--cl-shade-500: #6d6d6d;--cl-shade-600: #5d5d5d;--cl-shade-700: #4f4f4f;--cl-shade-800: #454545;--cl-shade-900: #3d3d3d;--cl-shade-950: #000000;--cl-blue-50: #edfbff;--cl-blue-100: #d6f3ff;--cl-blue-200: #b5edff;--cl-blue-300: #83e4ff;--cl-blue-400: #48d2ff;--cl-blue-500: #1eb5ff;--cl-blue-600: #0698ff;--cl-blue-700: #0084ff;--cl-blue-800: #0864c5;--cl-blue-900: #0d569b;--cl-blue-950: #0e345d;--cl-green-50: #f0fdf4;--cl-green-100: #ddfbe8;--cl-green-200: #bdf5d2;--cl-green-300: #8aebb0;--cl-green-400: #4fd985;--cl-green-500: #28bf63;--cl-green-600: #1b9e4e;--cl-green-700: #197c41;--cl-green-800: #196237;--cl-green-900: #16512f;--cl-green-950: #062d17;--cl-red-50: #fef3f2;--cl-red-100: #fee3e2;--cl-red-200: #ffccc9;--cl-red-300: #fda8a4;--cl-red-400: #f97770;--cl-red-500: #f14a42;--cl-red-600: #de2d24;--cl-red-700: #bb221a;--cl-red-800: #9a201a;--cl-red-900: #80211c;--cl-red-950: #460c09;--cl-yellow-50: #fffdea;--cl-yellow-100: #fff7c5;--cl-yellow-200: #fff085;--cl-yellow-300: #ffe146;--cl-yellow-400: #ffcf1b;--cl-yellow-500: #ffae00;--cl-yellow-600: #e28400;--cl-yellow-700: #bb5c02;--cl-yellow-800: #984708;--cl-yellow-900: #7c3a0b;--cl-yellow-950: #481d00;}
:not(dialog){ -webkit-tap-highlight-color: transparent;-webkit-tap-highlight-color: transparent;box-sizing: border-box;margin: 0;outline: 0;padding: 0;}
:disabled{ cursor: not-allowed!important;opacity: .5;}
:focus:not(:disabled){ outline: 3px solid var(--cl-outline);}
*{ -moz-appearance: none;-webkit-appearance: none;appearance: none;}
html{ -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;line-height: 1.15;scroll-behavior: smooth;scrollbar-gutter: stable;text-rendering: optimizeLegibility;}
body{ color: var(--cl-shade-950);font-family: var(--ff-body);}
.container{ margin-inline: auto;max-width: 1440px;padding-inline: 1rem;}
h1,h2,h3,h4{ font-family: var(--ff-accent);font-weight: 500;margin-block: 2rem 1rem;}
h1{ font-size: var(--fs-xxl);}
h2{ font-size: var(--fs-xl);}
h3{ font-size: var(--fs-lg);}
h4{ font-size: var(--fs-md);}
p{ color: var(--cl-shade-950);font-size: var(--fs-base);line-height: 1.8rem;margin-block-end: .8rem;}
a{ color: var(--cl-accent-700);fill: var(--cl-accent-700);font-weight: 500;text-decoration: none;}
a[icon]{ display: inline-flex;gap: .1rem;}
a[icon] box-icon{ transform: translateY(-2px);}
a:hover{ text-decoration: underline;}
ol,ul{ margin-block-end: .8rem;margin-inline-start: 2rem;}
ul{ list-style: circle;}
li{ font-size: var(--fs-base);list-style-position: -50px;margin-block-end: .8rem;}
blockquote{ background-color: var(--cl-shade-0);border-left: 4px solid var(--cl-blue-600);color: var(--cl-shade-950);font-family: var(--ff-body);font-size: var(--fs-base);font-style: italic;line-height: 1.5rem;margin: 1.5rem 0;padding: .5rem 1rem;}
strong{ font-weight: 700;}
code,kbd,pre,samp{ background-color: var(--cl-blue-100);border-radius: .2rem;color: var(--cl-blue-900);font-family: var(--ff-code);font-size: var(--fs-sm);padding: .2rem .3rem;word-break: break-word;}
pre{ overflow-y: auto;}
pre code{ line-height: 2rem;}
kbd{ background-color: var(--cl-yellow-100);color: var(--cl-yellow-900);}
img{ height: auto;max-width: 100%;width: min(auto,100%);}
img.full{ max-height: 100vh;width: 100%;}
picture{ aspect-ratio: 16/9;background-color: #000;display: flex;overflow: hidden;width: 100%;border-radius: 8px;}
picture > *{ transition: transform .3s ease;width: 100%;object-fit: cover;}
picture:hover > *{ transform: scale(1.1);}
picture.ar-3-2{ aspect-ratio: 3/2;}
.banner{ --cl-accent: var(--cl-shade-600);--cl-background: var(--cl-shade-50);--cl-border: var(--cl-shade-100);--cl-text: var(--cl-shade-950);background-color: var(--cl-background);border: 1px solid var(--cl-border);border-radius: .3rem;color: var(--cl-text);display: flex;fill: var(--cl-accent);margin-block-end: .5rem;padding: .8rem;position: relative;}
.banner .content{ flex: 1;margin-inline-start: .8rem;}
.banner .content > *{ margin-block: 0 .5rem;}
.banner a{ color: var(--cl-accent);font-weight: 600;}
.banner.accent{ --cl-accent: var(--cl-accent-600);--cl-background: var(--cl-accent-50);--cl-border: var(--cl-accent-100);--cl-text: var(--cl-accent-950);}
.banner.info{ --cl-accent: var(--cl-blue-600);--cl-background: var(--cl-blue-50);--cl-border: var(--cl-blue-100);--cl-text: var(--cl-blue-950);}
.banner.danger{ --cl-accent: var(--cl-red-600);--cl-background: var(--cl-red-50);--cl-border: var(--cl-red-100);--cl-text: var(--cl-red-950);}
.banner.success{ --cl-accent: var(--cl-green-600);--cl-background: var(--cl-green-50);--cl-border: var(--cl-green-100);--cl-text: var(--cl-green-950);}
.banner.warning{ --cl-accent: var(--cl-yellow-600);--cl-background: var(--cl-yellow-50);--cl-border: var(--cl-yellow-100);--cl-text: var(--cl-yellow-950);}
.btn,.btn-ic,.btn-sm,button{ align-items: center;background-color: var(--cl-background);border: 1px solid var(--cl-border);border-radius: .3rem;color: var(--cl-text);cursor: pointer;display: flex;fill: var(--cl-accent);font-family: var(--ff-body);font-size: var(--fs-base);font-weight: 500;gap: .3rem;justify-content: center;min-height: 50px;padding-block: .75rem;padding-inline: 1.5rem;text-decoration: none;transition: background-color .15s ease-in-out color .15s ease-in-out border .15s ease-in-out;white-space: nowrap;}
.btn,.btn-ic,.btn-sm,button{ --cl-accent: var(--cl-shade-900);--cl-background: var(--cl-shade-50);--cl-border: var(--cl-shade-300);--cl-outline: var(--cl-shade-200);--cl-text: var(--cl-shade-900);}
.btn-ic:hover:not(:disabled),.btn-sm:hover:not(:disabled),.btn:hover:not(:disabled),button:hover:not(:disabled){ --cl-accent: var(--cl-shade-950);--cl-background: var(--cl-shade-0);--cl-text: var(--cl-shade-950);text-decoration: none;}
button:focus{ --cl-background: var(--cl-shade-50);}
.btn-ic.alt,.btn-sm.alt,.btn.alt,button.alt{ --cl-background: var(--cl-shade-0);}
.btn-ic.alt:hover,.btn-sm.alt:hover,.btn.alt:hover,button.alt:hover{ --cl-background: var(--cl-shade-100);}
.btn-ic{ padding-block: .45rem;padding-inline: .8rem;}
.btn-sm,table .btn,table button{ font-size: var(--fs-sm);font-weight: 600;gap: .1rem;height: fit-content;min-height: 0;padding-block: .45rem;padding-inline: .5rem;}
.btn-sm box-icon,table .btn box-icon,table button box-icon{ height: 1rem;width: 1rem;}
.badge{ background-color: var(--cl-background);border-radius: 3rem;color: var(--cl-text);display: inline-flex;font-family: var(--ff-body);font-size: var(--fs-sm);letter-spacing: 1px;padding: .3rem .8rem;text-transform: uppercase;word-break: break-word;}
.badge{ --cl-background: var(--cl-shade-700);--cl-text: var(--cl-shade-0);}
.badge:hover{ --cl-background: var(--cl-shade-600);}
.accent:not(.banner),.btn-ic.accent,.btn-ic.alt-accent:hover,.btn-sm.accent,.btn-sm.alt-accent:hover,.btn.accent,.btn.alt-accent:hover,button.alt-accent:hover{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-accent-700);--cl-border: var(--cl-accent-700);--cl-outline: var(--cl-accent-200);--cl-text: var(--cl-shade-0);}
.accent:not(.banner):hover,.btn-ic.accent:hover,.btn-sm.accent:hover,.btn.accent:hover,button.accent:hover{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-accent-600);--cl-text: var(--cl-shade-0);}
.btn-ic.accent:focus,.btn-sm.accent:focus,.btn.accent:focus,button.accent:focus{ --cl-background: var(--cl-accent-700);}
.btn-ic.alt-accent,.btn-sm.alt-accent,.btn.alt-accent,button.alt-accent{ --cl-accent: var(--cl-accent-700);--cl-background: var(--cl-shader-0);--cl-text: var(--cl-accent-700);}
.btn-ic.alt-info:hover,.btn-ic.info,.btn-sm.alt-info:hover,.btn-sm.info,.btn.alt-info:hover,.btn.info,.info:not(.banner),button.alt-info:hover,button.info{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-blue-700);--cl-border: var(--cl-blue-700);--cl-outline: var(--cl-blue-200);--cl-text: var(--cl-shade-0);}
.btn-ic.info:hover,.btn-sm.info:hover,.btn.info:hover,.info:not(.banner):hover,button.info:hover{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-blue-600);--cl-text: var(--cl-shade-0);}
.btn-ic.info:focus,.btn-sm.info:focus,.btn.info:focus,button.info:focus{ --cl-background: var(--cl-blue-700);}
.btn-ic.alt-info,.btn-sm.alt-info,.btn.alt-info,button.alt-info{ --cl-accent: var(--cl-blue-700);--cl-background: var(--cl-shader-0);--cl-text: var(--cl-blue-700);}
.btn-ic.alt-success:hover,.btn-ic.success,.btn-sm.alt-success:hover,.btn-sm.success,.btn.alt-success:hover,.btn.success,.success:not(.banner),button.alt-success:hover,button.success{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-green-700);--cl-border: var(--cl-green-700);--cl-outline: var(--cl-green-200);--cl-text: var(--cl-shade-0);}
.btn-ic.success:hover,.btn-sm.success:hover,.btn.success:hover,.success:not(.banner):hover,button.success:hover{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-green-600);--cl-text: var(--cl-shade-0);}
.btn-ic.success:focus,.btn-sm.success:focus,.btn.success:focus,button.success:focus{ --cl-background: var(--cl-green-700);}
.btn-ic.alt-success,.btn-sm.alt-success,.btn.alt-success,button.alt-success{ --cl-accent: var(--cl-green-700);--cl-background: var(--cl-shader-0);--cl-text: var(--cl-green-700);}
.btn-ic.alt-warning:hover,.btn-ic.warning,.btn-sm.alt-warning:hover,.btn-sm.warning,.btn.alt-warning:hover,.btn.warning,.warning:not(.banner),button.alt-warning:hover,button.warning{ --cl-accent: var(--cl-shade-950);--cl-background: var(--cl-yellow-400);--cl-border: var(--cl-yellow-400);--cl-outline: var(--cl-yellow-200);--cl-text: var(--cl-shade-950);}
.btn-ic.warning:hover,.btn-sm.warning:hover,.btn.warning:hover,.warning:not(.banner):hover,button.warning:hover{ --cl-accent: var(--cl-shade-950);--cl-background: var(--cl-yellow-300);--cl-text: var(--cl-shade-950);}
.btn-ic.warning:focus,.btn-sm.warning:focus,.btn.warning:focus,button.warning:focus{ --cl-background: var(--cl-yellow-400);}
.btn-ic.alt-warning,.btn-sm.alt-warning,.btn.alt-warning,button.alt-warning{ --cl-accent: var(--cl-yellow-700);--cl-background: var(--cl-shader-0);--cl-text: var(--cl-yellow-700);}
.btn-ic.alt-danger:hover,.btn-ic.danger,.btn-sm.alt-danger:hover,.btn-sm.danger,.btn.alt-danger:hover,.btn.danger,.danger:not(.banner),button.alt-danger:hover,button.danger{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-red-700);--cl-border: var(--cl-red-700);--cl-outline: var(--cl-red-200);--cl-text: var(--cl-shade-0);}
.btn-ic.danger:hover,.btn-sm.danger:hover,.btn.danger:hover,.danger:not(.banner):hover,button.danger:hover{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-red-600);--cl-text: var(--cl-shade-0);}
.btn-ic.danger:focus,.btn-sm.danger:focus,.btn.danger:focus,button.danger:focus{ --cl-background: var(--cl-red-700);}
.btn-ic.alt-danger,.btn-sm.alt-danger,.btn.alt-danger,button.alt-danger{ --cl-accent: var(--cl-red-700);--cl-background: var(--cl-shader-0);--cl-text: var(--cl-red-700);}
label.required::after{ color: var(--cl-red-600);content: "*";}
input{ accent-color: var(--cl-accent-600);}
input:not(input[type=button],input[type=submit],input[type=reset],input[type=checkbox],input[type=radio],input[type=range]),select,textarea{ -webkit-box-shadow: inset 0 -1px 0 0 var(--cl-shade-100);background-color: var(--cl-shade-0);border: 1px solid var(--cl-shade-200);border-radius: .3rem;box-shadow: inset 0 -1px 0 0 var(--cl-shade-100);color: var(--cl-shade-950);flex: 1;font-family: var(--ff-body);font-size: var(--fs-base);font-weight: 400;padding-block: .75rem;padding-inline: .75rem;text-decoration: none;width: 100%;}
input[type=color]{ background: 0 0;border: 0;cursor: pointer;display: flex;height: 3.5em;width: 3.3em;}
select{ background: var(--cl-shade-0) url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat;padding-inline-end: 2rem;}
input:not(input[type=button],input[type=submit],input[type=reset],input[type=checkbox],input[type=radio],input[type=range]):focus,select:focus,textarea:focus{ -webkit-box-shadow: 0 0 8px -1px var(--cl-accent-600);background-color: var(--cl-shade-0);border: 1px solid var(--cl-accent-600);box-shadow: 0 0 8px -1px var(--cl-accent-600);}
.invalid input:not(input[type=button],input[type=submit],input[type=reset],input[type=checkbox],input[type=radio],input[type=range]),.invalid select,.invalid textarea{ background-color: var(--cl-red-100);border: 1px solid var(--cl-red-600);}
table{ border: 1px solid var(--cl-shade-200);border-collapse: collapse;margin: 0;padding: 0;table-layout: fixed;width: 100%;}
table tr{ background-color: var(--cl-shade-0);border: 1px solid var(--cl-shade-200);padding-block: .5rem;}
table tr:hover td{ background-color: var(--cl-shade-50);}
table td,table th{ padding: .5rem 1rem;text-align: center;}
table .group-button{ justify-content: center;}
table th{ background-color: var(--cl-shade-50);font-size: var(--fs-base);}
@media screen and (max-width:600px){ table{  border: 0; }
 table thead{  display: none; }
 table tr{  display: block;margin-bottom: .5rem; }
 table tr:hover td{  background-color: var(--cl-shade-0); }
 table td{  align-items: center;border-bottom: 1px solid var(--cl-shade-100);display: flex;font-size: var(--fs-base);gap: .5rem;justify-content: space-between; }
 table td:hover{  background-color: var(--cl-shade-50); }
 table td::before{  content: attr(data-label);font-weight: 600; }
 table td:last-child{  border-bottom: 0; }}dialog{ background-color: var(--cl-shade-0);border: 1px solid var(--cl-shade-200);border-radius: .5rem;opacity: 0;padding: 0;transform: translateY(-15px);transition: all .3s ease-in-out;}
.dialog.show{ opacity: 1;transform: translateY(0);}
.dialog-content,.dialog-header{ padding: 1rem;}
.dialog-header{ align-items: center;display: flex;font-size: var(--fs-base);justify-content: space-between;padding-block-end: .5rem;}
.dialog-header *{ margin: 0;}
dialog::backdrop{ backdrop-filter: blur(5px);background-color: rgba(0,0,0,.5);-webkit-backdrop-filter: blur(5px);}
dialog .closeDialog{ cursor: pointer;}
#toastBox{ align-items: flex-end;display: flex;flex-direction: column;overflow: hidden;position: fixed;right: 30px;top: 25px;}
.toast{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-green-600);--cl-border: var(--cl-green-600);--cl-text: var(--cl-shade-0);align-items: center;animation: moveleft .3s linear forwards;background-color: var(--cl-background);border: 1px solid var(--cl-border);border-radius: .3rem;color: var(--cl-text);display: flex;fill: var(--cl-accent);gap: .3rem;margin-block-end: .5rem;opacity: 0;padding: .8rem;transform: translateX(50%);}
@keyframes moveleft{ 100%{  opacity: 1;transform: translateX(0); }}.toast.error{ --cl-accent: var(--cl-shade-0);--cl-background: var(--cl-red-600);--cl-border: var(--cl-red-600);--cl-text: var(--cl-shade-0);}
.toast.invalid{ --cl-accent: var(--cl-shade-950);--cl-background: var(--cl-yellow-400);--cl-border: var(--cl-yellow-400);--cl-text: var(--cl-shade-950);}
.scroller{ display: flex;justify-content: center;width: 100%;scrollbar-gutter: stable;overflow-x: auto;}
.nav-tabs{ display: flex;gap: 8px;padding: 4px;background-color: var(--cl-shade-100);border-radius: 4px;width: fit-content;}
.tab-link{ align-items: center;text-align: center;padding: 8px 16px;border-radius: 4px;display: flex;justify-content: center;gap: 4px;cursor: pointer;color: var(--cl-shade-500);font-weight: 600;fill: var(--cl-shade-500);white-space: nowrap;transition: all .2s ease-in;}
.tab-link.active{ background-color: var(--cl-shade-0);color: var(--cl-accent-700);fill: var(--cl-accent-700);box-shadow: 0 1px 4px -3px #000;}
.tab-container{ margin-top: 32px;display: none;opacity: 0;transform: translateY(-15px);text-align: center;}
.tab-container.active{ display: block;animation: fade .5s forwards;}
@keyframes fade{ to{  opacity: 1;transform: translateY(0); }}@media only screen and (max-width:414px){ .nav-tabs{  flex-direction: column;width: 100%; }}.form-input,.group-button,.group-form{ display: flex;flex-wrap: wrap;gap: .5rem;margin-block-end: .5rem;}
.group-form{ flex-direction: column;}
.form-input{ align-items: center;}
.form-input .group-button,.group-button .form-input{ flex-wrap: nowrap;margin-block-end: 0;}
@media only screen and (max-width:530px){ .group-button > :not(.btn-sm,.btn-ic), .group-form{  flex: 1 414px; }
 table .group-button{  flex: 0;flex-wrap: nowrap; }}.close{ border-radius: .3rem;cursor: pointer;text-decoration: none;}
.close:hover{ background-color: var(--cl-shade-0);}
.flex-wrap{ display: flex;flex-wrap: wrap;gap: .2rem;}
.center{ justify-content: center;text-align: center;}
.right{ justify-content: right;text-align: right;}
.left{ justify-content: left;text-align: left;}
.m-inline{ margin-inline: .5rem;}
.m-inline-md{ margin-inline: 1rem;}
.m-inline-lg{ margin-inline: 1.5rem;}
.m-inline-xl{ margin-inline: 2rem;}
.m-inline-xxl{ margin-inline: 3rem;}
.m-inline-xxxl{ margin-inline: 6rem;}
.m-block{ margin-block: .5rem;}
.m-block-md{ margin-block: 1rem;}
.m-block-lg{ margin-block: 1.5rem;}
.m-block-xl{ margin-block: 2rem;}
.m-block-xxl{ margin-block: 3rem;}
.m-block-xxxl{ margin-block: 6rem;}
.t-accent{ color: var(--cl-accent-600);}
.t-blue{ color: var(--cl-blue-600);}
.t-green{ color: var(--cl-green-600);}
.t-yellow{ color: var(--cl-yellow-600);}
.t-red{ color: var(--cl-red-600);}
.in-grid{ display: grid;grid-template-columns: repeat(var(--grid-columns-desktop),1fr);grid-auto-flow: 1fr;column-gap: var(--grid-gutter-thickness);}
.in-set{ grid-column: var(--grid-desktop-position);}
.in-flow{ grid-column: span var(--grid-desktop-position);}
@media only screen and (max-width:1024px){ .in-grid{  display: grid;grid-template-columns: repeat(var(--grid-columns-tablet),1fr); }
 .in-set{  grid-column: var(--grid-tablet-position); }
 .in-flow{  grid-column: span var(--grid-tablet-position); }}@media only screen and (max-width:830px){ .in-grid{  display: grid;grid-template-columns: repeat(var(--grid-columns-mobile),1fr); }
 .in-set{  grid-column: var(--grid-mobile-position); }
 .in-flow{  grid-column: span var(--grid-mobile-position); }}


:root{ --h-navbar: 80px;}
#header{ background-color: var(--cl-shade-0);left: 0;position: fixed;top: 0;width: 100%;z-index: 999;}
#header .container{ align-items: center;display: flex;height: var(--h-navbar);width: 100%;}
#header .brand{ margin-inline-end: auto;}
#header .brand img{ height: calc(var(--h-navbar) - 16px);}
#header .nav-menu{ align-items: center;display: flex;gap: 4px;height: 100%;}
#header .nav-menu a{ align-items: center;color: var(--cl-shade-800);display: flex;fill: var(--cl-shade-800);font-weight: 500;gap: 8px;height: 100%;padding-inline: 8px;}
#header .nav-menu a:hover{ color: var(--cl-accent-700);fill: var(--cl-accent-700);text-decoration: none;}
@media only screen and (max-width:1024px){ :root{  --h-navbar: 64px; }
 #header .container{  padding-inline-end: .5rem; }
 #header .nav-menu a:not(#menuTrigger) span{  display: none; }}#mainMenu{ background-color: var(--cl-shade-0);border-block: 1px solid var(--cl-shade-100);display: none;height: calc(100vh - var(--h-navbar));height: 0;left: 0;overflow-y: auto;position: fixed;top: var(--h-navbar);transition: height .3s ease-in;width: 100%;z-index: 999;}
#mainMenu .container{ display: grid;gap: 8px;padding-block-end: 64px;}
.menu-colum{ --grid-columns-desktop: 12;--grid-columns-mobile: 4;--grid-columns-tablet: 8;--grid-gutter-thickness: 20px;}
.menu-colum .menu-item{ --grid-desktop-position: 4;--grid-mobile-position: 4;--grid-tablet-position: 4;background-color: var(--cl-shade-0);border: 1px solid var(--cl-shade-0);border-radius: 8px;display: grid;gap: 16px;grid-template-columns: 32px 1fr;margin-block-end: 8px;padding: 16px 8px;}
.menu-item:hover{ background-color: var(--cl-shade-50);border: 1px solid var(--cl-shade-100);text-decoration: none;}
.menu-item box-icon{ background-color: var(--cl-shade-0);border-radius: 5px;box-shadow: 0 3px 8px -3px var(--cl-shade-100);fill: var(--cl-accent-700);height: 34px;padding: 4px;width: 34px;}
.menu-item h4{ color: var(--cl-shade-950);font-size: var(--fs-base);font-weight: 700;margin: 0;margin-bottom: 12px;}
.menu-item p{ -webkit-box-orient: vertical;-webkit-line-clamp: 1;color: var(--cl-shade-400);display: -webkit-box;font-size: var(--fs-sm);line-height: 1.3rem;margin: 0;overflow: hidden;text-overflow: ellipsis;}
#bannerFooter{ background-image: linear-gradient(0deg,#ffffff00 0,#ffffff 85%),var(--bg-hiro);border-top: 1px solid var(--cl-shade-100);border-top: 1px solid var(--cl-shade-100);}
#bannerFooter .container{ padding-top: 32px;}
#bannerFooter .ilustration{ display: flex;justify-content: center;}
@media only screen and (max-width:1024px){ #bannerFooter .content{  align-items: center;display: flex;flex-direction: column;text-align: center; }}#footer{ background-color: var(--cl-shade-50);border-top: 1px solid var(--cl-shade-100);}
#footer .container{ --grid-columns-desktop: 12;--grid-columns-mobile: 4;--grid-columns-tablet: 8;--grid-gutter-thickness: 20px;padding-block: 32px;}
#footer .container .colum{ --grid-desktop-position: 3;--grid-mobile-position: 4;--grid-tablet-position: 8;display: flex;flex-direction: column;gap: 16px;margin-block-end: 20px;}
#footer .brand img{ width: min(250px,100%);}
#footer strong{ font-size: var(--fs-base);margin-top: 1rem;}
#footer a{ color: var(--cl-accent-800);font-size: var(--fs-base);}
#footer a[icon] box-icon{ transform: translateY(-2px);}
.copyright{ background-color: var(--cl-shade-100);border-top: 1px solid var(--cl-shade-200);color: var(--cl-shade-400);margin-top: 64px;padding-block: 14px 32px;padding-inline: 16px 58px;text-align: center;}
#topButton{ background-color: var(--cl-accent-700);border-radius: 4px;bottom: 12px;display: grid;fill: var(--cl-shade-0);height: 0;overflow: hidden;place-items: center;position: fixed;right: 12px;transition: height .4s ease;width: 42px;z-index: 88;}
#topButton:hover{ background-color: var(--cl-accent-600);cursor: pointer;}



 .title{ display: flex;font-size: var(--fs-xxl);justify-content: center;margin-bottom: 42px;position: relative;text-align: center;}
.title::before{ background-color: var(--cl-accent-600);bottom: -24px;content: '';height: 5px;position: absolute;width: 100px;}
.description{ display: flex;justify-content: center;margin-bottom: 64px;text-align: center;}
.page-margin{ margin-block: calc(var(--h-navbar) + 36px) 96px;min-height: 60vh;}
.sidebar{padding-top: 45px;}
.sidebar>h3{border-bottom: 1px solid var(--cl-accent-700);margin-block: 0 8px;padding-bottom: 8px;}
.post-body h1.title{ font-weight: 600;justify-content: start;text-align: left;}
.bank-colum{ display: flex;flex-direction:column; gap: 20px;width: 100%;}
.img-icon{ height: 32px;width: fit-content;}
.bank-info{ display: flex;flex: 1;flex-direction: column;margin-block: 8px;text-align: center;}
.bank-info h4,.bank-info p{ margin-block: 4px 0;}
.qris{border: 1px solid var(--cl-shade-200);border-radius: 5px;width: min(100%,320px)}
@media only screen and (max-width:1024px){ .bank-colum{  flex-direction: column; }
 .bank-info{  align-items: center;border-bottom: 1px solid var(--cl-shade-100);flex-direction: row;justify-content: space-between;padding: 8px; }}.center-page,.center-side,.three-colum,.two-side,.two-side-l,.two-side-r{ --grid-columns-desktop: 12;--grid-columns-mobile: 4;--grid-columns-tablet: 8;--grid-gutter-thickness: 20px;}
.center-page > :first-child{ --grid-desktop-position: 2/12;--grid-mobile-position: 1/5;--grid-tablet-position: 1/9;}
.center-side > :first-child{ --grid-desktop-position: 2/7;--grid-mobile-position: 1/5;--grid-tablet-position: 1/5;}
.center-side > :last-child{ --grid-desktop-position: 7/12;--grid-mobile-position: 1/5;--grid-tablet-position: 5/9;}
.two-side > :first-child{ --grid-desktop-position: 1/7;--grid-mobile-position: 1/5;--grid-tablet-position: 1/5;}
.two-side > :last-child{ --grid-desktop-position: 7/13;--grid-mobile-position: 1/5;--grid-tablet-position: 5/9;}
.two-side-l > :first-child{ --grid-desktop-position: 1/9;--grid-mobile-position: 1/5;--grid-tablet-position: 1/5;}
.two-side-l > :last-child{ --grid-desktop-position: 9/13;--grid-mobile-position: 1/5;--grid-tablet-position: 5/9;}
.two-side-r > :first-child{ --grid-desktop-position: 1/5;--grid-mobile-position: 1/5;--grid-tablet-position: 1/5;}
.two-side-r > :last-child{ --grid-desktop-position: 5/13;--grid-mobile-position: 1/5;--grid-tablet-position: 5/9;}
.three-colum > *{ --grid-desktop-position: 4;--grid-mobile-position: 4;--grid-tablet-position: 8;}

.slideshow-container{ position: relative;}
.slide{ background-color: black;width: 100%;height: min(100vh,810px);display: none;place-items: center;overflow: hidden;animation: fadeSlider 6s ease-in-out infinite;}
.slide img{ width: 100%;height: 100vh;object-fit: cover;}
@keyframes fadeSlider{ 
0%{  opacity: 0; }
40%{  opacity: 1; }
60%{  opacity: 1; }
100%{  opacity: 0; }
}

#hiro{ background-color: #000;background-position: center;background-repeat: no-repeat;background-size: cover;height: min(100vh,810px);position: relative;overflow: hidden;}
#hiro .wrapper{ background-image: linear-gradient(0deg,rgba(0, 0, 0, 0.8) 5%,rgba(0, 0, 0, 0.6) 50%,rgba(0, 0, 0, 0.5) 100%);padding-inline: 1rem;position: absolute;width: 100%!important;z-index: 1;}
#hiro .content{ align-items: center;display: flex;flex-direction: column;height: min(100vh,810px);justify-content: end;margin-inline: auto;max-width: 1440px;padding-bottom: 64px;}
#hiro .content h1,#hiro .content p{ color: var(--cl-shade-0);text-shadow: 0 2px 5px black;}
@media only screen and (max-width:1024px){ #hiro .content{  padding-bottom: 32px;text-align: center; }}#prayerTimes{ background-color: var(--cl-accent-600);border-block: 1px solid var(--cl-accent-700);color: var(--cl-shade-0);}
#prayerTimes .container{ background-image: var(--bg-hiro);background-position: center right;background-repeat: no-repeat;background-size: contain;padding-block: 32px 96px;}
#prayerTimes .title{ justify-content: start;text-align: left;}
#prayerTimes a,#prayerTimes p{ color: var(--cl-accent-300);}
.times-colum{ --grid-columns-desktop: 12;--grid-columns-mobile: 4;--grid-columns-tablet: 8;--grid-gutter-thickness: 20px;}
.time-item{ --grid-desktop-position: 2;--grid-mobile-position: 2;--grid-tablet-position: 2;}
.time-item h4{ margin: 0;}
.time-item p{ margin-bottom: 32px;}
@media only screen and (max-width:414px){ #prayerTimes .container{  background-position: bottom; }
 #prayerTimes .title{  font-size: var(--fs-xl);justify-content: center;text-align: center; }
 .note{  text-align: center; }}#links .container{ margin-block: 96px;}
#links .menu-item{ display: flex;flex-direction: column;}
#update-info .container{ margin-block: 96px;}
.page-item{ padding-block: 16px;}
.page-item:hover picture > *{ transform: scale(1.1);}
.page-item h3{ color: var(--cl-shade-950);margin-block: 8px;}
.page-item .badge{ margin-block: 12px 0;}
.list-page{ --grid-columns-desktop: 8;--grid-columns-mobile: 4;--grid-columns-tablet: 4;--grid-gutter-thickness: 20px;}
.page-link{ --grid-desktop-position: 4;--grid-mobile-position: 4;--grid-tablet-position: 2;border-bottom: 1px solid var(--cl-shade-100);color: var(--cl-shade-950);display: flex;flex-direction: column;margin-bottom: 20px;overflow: hidden;padding: 33px 16px;}
.page-link h3{ font-size: var(--fs-md);margin-top: 4px;}
.sidebar>.page-link{padding: 16px 8px;}
.page-item p,.page-link span{ color: var(--cl-shade-300);}
.page-item:hover,.page-link:hover{ text-decoration: none;}
.page-link:hover h3{ text-decoration: underline;}
.page-item h3,.page-item p,.page-link h3{ -webkit-box-orient: vertical;-webkit-line-clamp: 2;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;}
@media only screen and (max-width:414px){ .right{  text-align: center; }
 .page-link{  padding: 16px 0; }
 .list-page{  border-top: 1px solid var(--cl-shade-100); }}

 .tour {border-style:none; aspect-ratio:4/2;border-radius: 8px;}
 @media only screen and (max-width:414px){ .tour{  aspect-ratio:3/4; } }