@import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);

.microtext {
  font-family: small fonts; font-size: 8px;
/* layout-grid-type:#; layout-grid-mode:both; layout-grid-char:3pt; layout-grid-line:5pt;*/
}

/*@font-face { font-family: Verdana; font-style:  normal; font-weight: normal; } *//*src: url(HANDELG.eot); }*/
.HanGot    { font-family: HandelGotDLig, Verdana, Arial, sans-serif; font-size:10pt; }
.smalltext { font-family: HandelGotDLig, Verdana, Arial, sans-serif; font-size:10px; }
.microtext { font-family: small fonts; font-size: 8px; }

@font-face {
  font-family: Exo-ExtraLightItalic;
  font-style: normal;
  font-weight: normal;
  src: url(/assets/fonts/exoeli.otf);
}

.exoeli    { font-family: Exo-ExtraLightItalic, Verdana, Arial, sans-serif; }

@font-face {
  font-family: SpaceAge;
  font-style: normal;
  font-weight: normal;
  src: url(/assets/fonts/space-age.spaceage.otf);
}

.spaceage    { font-family: SpaceAge, Verdana, Arial, sans-serif; }

@font-face {
  font-family: Bocemina;
  font-style: normal;
  font-weight: normal;
  src: url(/assets/fonts/Bocemina.ttf);
}

.bocemina    { font-family: Bocemina, Verdana, Arial, sans-serif; font-size:9pt; }

.sort_group_header { font-family: Exo-ExtraLightItalic, Verdana, Arial, sans-serif; padding:3px; padding-top:14px; padding-left:14px; border-bottom: solid 1px rgba(0,0,255,0.1); font-size:16px; text-align:left; letter-spacing:10px; display:table-row; }


:root {
  color-scheme: light dark medium;

  /* light-dark(light-value, dark-value) */
  /*--bg-color: light-dark(#ffffff, #121212);*/
    --body-bg: light-dark( #fff, #000);
    --body-back-bg: light-dark( #000, #000);
    --body-text: light-dark(#1e293b, #bac7d9);
    --body-text-alt: light-dark(#e2e8f0, #1e293b);
    --body-link: light-dark(#1e293b, #bccbdf);
    --body-link-hover: light-dark(#af4cf0, #af4cf0);
    --header-bg: light-dark(#fff, #000);
    --header-text: light-dark(#fff, #fff);
    --header-bg-alt: light-dark(#fff, #000);
    --header-text-alt: light-dark(#000, #fff);
    --header-link: light-dark(#1e293b, #e2e8f0);
    --header-link-hover: light-dark(#af4cf0, #be80fc);
    --footer-bg: light-dark(rgba(245,245,255,.5), rgba(0,0,5,.5));
    --footer-text: light-dark(#1e293b, #e2e8f0);
    --footer-text-alt: light-dark(#e2e8f0, #1e293b);
    --footer-link: light-dark(#1e293b, #e2e8f0);
    --footer-link-hover: light-dark(#af4cf0, #af4cf0);

    --layout-cell-div: light-dark(#fff, #001);
    --layout-cell-div-hover: light-dark(#fff, #002);
    --layout-cell-div-text: light-dark(#04042b, #e7e7ff);
    --layout-cell-div-text-hover: light-dark(#0000ab, #af4cf0);
    --layout-cell-div-border: light-dark(#c0e6e4, #001f2e);
    --layout-cell-div-border-hover: light-dark(#a7a7ff, #000093);

    --color-primary: light-dark(#3b82f6, #60a5fa);
    --color-secondary-bg: light-dark(#fff, #1e293b);
    --color-border: light-dark(#e2e8f0, #333337);
    --color-window-title: light-dark(#e2e8f0, #121217);
    --color-window-border: light-dark(#e2e8f0, #121217);
    --color-positive: light-dark(#10b981, #34d399);
    --color-negative: light-dark(#ef4444, #f87171);
    --color-dialog-bg: light-dark(#ffffff, #1e1e2e);
    --color-dialog-text: light-dark(#1e293b, #cdd6f4);
    --color-dialog-border: light-dark(#e2e8f0, #45475a);

    /*
.side-menu {
    border-right: 1px solid #003;
    border-right: 1px solid rgb(236, 236, 236);
*/
    --head-grad-rgba-000: light-dark(rgba(245,245,255,.9), rgba(0,0,25,.9));
    --head-grad-rgba-050: light-dark(rgba(245,235,255,.8), rgba(5,0,45,.7));
    --head-grad-rgba-100: light-dark(rgba(245,245,255,.9), rgba(0,0,25,.3));

    --header-gradient-bg: -webkit-linear-gradient(left,var(--head-grad-rgba-000) 0,var(--head-grad-rgba-050) 50%,var(--head-grad-rgba-100) 100%);
    --header-border: light-dark(#c0e6e4, #001f2e);


    --menu-grad-rgba-000: light-dark(rgba(245,245,255,.9), rgba(0,0,25,.9));
    --menu-grad-rgba-050: light-dark(rgba(245,235,255,.8), rgba(5,0,45,.8));
    --menu-grad-rgba-100: light-dark(rgba(245,245,255,.9), rgba(0,0,25,.9));

    --side-menu-gradient-bg: -webkit-linear-gradient(left,var(--menu-grad-rgba-000) 0,var(--menu-grad-rgba-050) 50%,var(--menu-grad-rgba-100) 100%);
    --side-menu-border: light-dark(#ead4ff, #11002d);


    --h2-grad-rgba-000: light-dark(rgba(245,245,255,.3), rgba(0,0,25,.3));
    --h2-grad-rgba-050: light-dark(rgba(215,205,255,.4), rgba(15,0,85,.4));
    --h2-grad-rgba-100: light-dark(rgba(245,245,255,.3), rgba(0,0,25,.3));

    --h2-gradient-bg: -webkit-linear-gradient(left,var(--h2-grad-rgba-000) 0,var(--h2-grad-rgba-050) 50%,var(--h2-grad-rgba-100) 100%);

    --h2-grad-rgba-000-hover: light-dark(rgba(245,245,255,.3), rgba(0,0,25,.5));
    --h2-grad-rgba-050-hover: light-dark(rgba(215,205,255,.6), rgba(5,0,85,.8));
    --h2-grad-rgba-100-hover: light-dark(rgba(245,245,255,.3), rgba(0,0,25,.5));

    --h2-gradient-bg-hover: -webkit-linear-gradient(left,var(--h2-grad-rgba-000-hover) 0,var(--h2-grad-rgba-050-hover) 50%,var(--h2-grad-rgba-100-hover) 100%);

    --hr-grad-rgba-000: light-dark(rgba(245,245,255,.3), rgba(0,0,25,.3));
    --hr-grad-rgba-050: light-dark(rgba(215,205,255,.8), rgba(10, 0, 151,.8));
    --hr-grad-rgba-100: light-dark(rgba(245,245,255,.3), rgba(0,0,25,.3));

    --hr-gradient-bg: -webkit-linear-gradient(left,var(--hr-grad-rgba-000) 0,var(--hr-grad-rgba-050) 50%,var(--hr-grad-rgba-100) 100%);

    --hr-grad-rgba-000-hover: light-dark(rgba(245,245,255,.3), rgba(0,0,25,.3));
    --hr-grad-rgba-050-hover: light-dark(rgba(215,205,255,.8), rgba(23, 0, 213,.9));
    --hr-grad-rgba-100-hover: light-dark(rgba(245,245,255,.3), rgba(0,0,25,.3));

    --hr-gradient-bg-hover: -webkit-linear-gradient(left,var(--hr-grad-rgba-000-hover) 0,var(--hr-grad-rgba-050-hover) 50%,var(--hr-grad-rgba-100-hover) 100%);

    interpolate-size: allow-keywords;
    --win-width: 1svw; 
}

/* Explicitly override when user forces a specific mode via JavaScript */
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}


* {
    box-sizing: border-box; margin: 0; padding: 0;
} html {
    position: relative; min-height: 100%;
} body {
    font-weight: 300; margin-bottom: 30px; 
    font-family: sans-serif, "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial";
    background-color: var(--body-bg);
    color: var(--body-text);
} a {
    color: unset; text-decoration: none;
} a:hover {
    color: var(--body-link-hover); text-decoration: none;
} a:visited {
    color: unset;
    text-decoration: none;
} a:active {
    text-decoration: none;
} a:hover {
    color: var(--body-link-hover); 
    text-decoration: none;
}

header {
    width: 100%; position: fixed; top: 0; z-index: 1000;
	transition: all .2s ease-in-out;
	color: var(--header-text);
	height:124px;
} header a:hover {
    color: var(--header-link-hover);
} 

#logo {
    top: 0; float: left;
} #logo h3 {
    color: var(--header-text);
    line-height: 100%; font-family: SpaceAge; line-height: 2rem;
    letter-spacing: 2.5rem; margin: 0px; font-size: 24px; padding: 10px;
    padding-left: 20px; border-radius: 3px;
    text-shadow: 0 0 9px rgb(25, 0, 55);
}

header.fixed {
	transition: all .2s ease-in-out;
    background-color: var(--header-bg-alt);
    box-shadow: 0 .05rem 1rem rgba(0,0,0,.15)!important;
	color: var(--header-text-alt);
	height:50px;
} header.fixed > .header {
    margin-top:8px;
} header.fixed #logo h3 {
	color: var(--header-text-alt);
    text-shadow: unset;
}

footer {
    position: fixed; bottom: 0; width: 100%; height: 30px; 
    vertical-align: middle;
    /*background-color:var(--footer-bg);*/
	color: var(--body-text);
} footer div small p {
    margin: auto; display: inline-block;
} footer > div > small > p {
    color: var(--body-text);
} footer .credit {
    width: 39%; text-align: left; font-family: SpaceAge; letter-spacing: .4rem;
} footer .credit a:hover {
    color: var(--body-link-hover);
} footer .copyright {
    width: 59%; text-align: right;
} footer .credit.page {
    width: 32%;  text-align: left;
     font-family:unset; letter-spacing:unset;
} footer .copyright.page {
    width: 40%; text-align:center;
} footer .loadtime.page {
    width: 24%; text-align: right;
} h2 {
    width: 100%; text-align: center; font-weight: 100; font-size: 1.8rem;
    letter-spacing: 1.8rem; padding: 20px; display: inline-block;
} h3, h4 {
    font-weight: 400;
} blockquote {
	background-color: rgba(0, 30, 255,0.3);
	border-color: #004cff;
	margin:0;
	margin-left:6%;
	margin-right:6%;
}

.body-back {
    background-image: url(/assets/img/harley-fischel-tech-10.avif);
    background-image: -webkit-image-set(
      url("/assets/img/harley-fischel-tech-10.avif") type("image/avif") 1x,
      url("/assets/img/harley-fischel-tech-10.png") type("image/png") 1x
    );
    background-image: image-set(
      url("/assets/img/harley-fischel-tech-10.avif") type("image/avif") 1x,
      url("/assets/img/harley-fischel-tech-10.png") type("image/png") 1x
    );
    background-repeat: no-repeat; background-position: center;
    background-size: 100%; background-size: cover; z-index: -1; display:
    block; position: fixed; width: 100%; top: 0; bottom: 25%; left: 0; right: 0;
    background-color: var(--body-back-bg);
    max-height:780px;
    min-height:50px;
} .form-container {
    color: var(--body-text);
} .container {
    transition: all 0.2s ease-out; margin-left: 4%; margin-right: 4%;
    max-width: unset;
} .container.header {
    margin-top: 3%;
} 

.main-content {
	background-color: var(--body-bg); color:var(--body-text);
} .main-content .page {
	background-color: var(--body-bg);
} .page.form {
	background-color: var(--body-bg);
	background-color: rgba(255, 255, 255, 0.8);
	border:1px solid #FFF;
} .md-preview {
	background-color: var(--body-bg)F;
}

.content {
	background-color: var(--body-bg);
} .content h2 {
	margin-bottom:0;
} .content hr {
	border:0; height:1px; margin-top:0;
} .content .title {
    margin-top: 8%; position: absolute; top: 0; width: 100%;
} .content .title h1 {
    transition: all .2s ease-out; float: left; left: 0; width: 100%; font-size:
    3.2rem; padding: 1.2rem; margin: 4rem 0 0 0; text-align: left; padding-left:
    6rem; text-rendering: optimizeLegibility;
} .content .title h1 + h2 {
    margin: 0rem 0 2rem 0; font-size: 1.6rem; line-height: 1; font-weight: 300;
} .content .title h2 {
    transition: all .2s ease-out; float: left; left: 0; right: 0; font-size:
    2rem; width: 100%; padding: .4rem; padding-left: 6rem; text-align: left;
    letter-spacing: unset;
}

.main-content {
    width: 100%; 
    /*font-weight: 100; */
    /*font-size: 1.2rem; */
    /*line-height: 2rem;*/
    margin-top: 35%; 
    padding-top: 0px;
    font-weight: 300;
	/*line-height: unset;*/
} .main-content h2 {
    width: 100%; 
    text-align: center; 
    font-size: 1.8rem;
    letter-spacing: 1rem; 
    padding: 20px;
} .main-content .context p {
    width: 100%; 
    text-align: center; 
    /*font-size: 1.2rem; */
    line-height: 2rem;
    padding: 10px;
    font-weight: 400;
} .main-content .page {
    padding-top: 20px;
    margin-left: 8%; 
    margin-right: 8%;
} .main-content .page p,
  .main-content .page pre,
  .main-content .page h2,
  .main-content .page h3,
  .main-content .page h4 {
    text-align: left;
    font-weight: 400;
} .main-content .page h1,
  .main-content .page h5 {
    text-align: center;
    font-weight: 400;
} .main-content .page ol, ul {
    padding-left: 8%; 
    padding-right: 4%;
    text-align: left;
} .main-content p span {
    display: block; 
    width: 100%; 
    margin-bottom: 20px;
} .main-content .page .title {
    padding: 24px;
    padding-left: 8%; 
    padding-right: 8%;
    left: 0; right: 0;
    font-weight: 300;
    text-align: right;
} .content.main-content {
    margin-top: 20%;
} .main-content .page {
    padding-bottom: 20px;
} .main-content .context .swd-layout-cell p {
  min-height: 40px;
  font-size: 12px;
  line-height: 1.3rem;
  text-align: left;
  margin: 0 0 10px;
  padding:0;
}
.main-content .context .swd-layout-cell div {
  /*border: 1px solid #001f2e;*/
  margin: 12px;
  padding: 12px 0 0 12px;
  border-radius: 9px;
}

#breadcrumbs {
    height: 3rem;
    line-height: 3rem;
} #breadcrumbs span {
    display: inline-block;
    padding: 0 1rem;
}

.layout-item-3 {
    float: left;
} .layout-item-4 {
    float: left;
    padding-right: 0;
    padding-left: 0;
    max-height: 110px;
} .layout-item-5 {
    float: left;
}

.swd-layout-cell i {
    font-size: 64px; float: left; margin-right: 20px;
} .swd-layout-cell img {
    float: left; margin-right: 20px; max-height: 64px;
} .swd-layout-cell p {
    font-size: 12px;
    line-height:1.3rem;
} .swd-layout-cell div {
    margin: 12px; padding: 12px 0 0 12px;
    border-radius: 9px;
    font-weight: 400;
} 

.layout-item-3 i {
    font-size: 42px;
}.layout-item-3 img {
    max-height: 42px;
    margin-right: 14px;
}.layout-item-3 p {
    font-size: 11px;
    line-height: 1.1rem;
}.layout-item-4 div {
    min-height: 92px;
}.layout-item-3 div {
    height: 70px;
    min-height: 70px;
}

.col-md-4, .col-md-3 {
	padding-right: unset;
  	padding-left: unset;
}

.side-menu {
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    height: 100%;
    width: 20%;
    min-width: 210px;
    display: inline-block;
    overflow: auto;
}

.cssmenu {
    position: absolute; right: 4%;
    margin-top: 4px;
} .cssmenu a {
    border-radius: 3px;
} .cssmenu ul {
    display: inline;
} .cssmenu ul li {
    display: inline-block; position: relative; padding: 0px;
} .cssmenu ul li i {
    font-size: 22px;
} .cssmenu ul li a {
    display: block; line-height: 1.8em; padding: 8px 20px; text-decoration:
    none; text-align: center; font-weight: 200;
    font-size: 8px; height: 34px;
} .cssmenu ul li img {
    vertical-align: middle;
}

@keyframes fadeIn {	
    from { opacity: 0; }
	to { opacity: 1; }
}

.fade-in-content {
	opacity: 0;
	animation: fadeIn 0.5s ease-out forwards; 
}

@media screen and (max-width: 1420px) {

}

@media screen and (min-width: 1200px) {

}

@media screen and (max-width: 992px) {
    .layout-item-3 {
      width: 50% !important;
    } .layout-item-4 {
      width: 50% !important;
    } .main-content {
      margin-top: 42%;
    } .content.main-content {
      margin-top: 32%;
    } .content .title {
      margin-top: 12%;
    }
}

@media screen and (max-width: 724px) {
    header.fixed {
      height:75px;
    } #logo {
      width: 80%;
    } .container {
      margin-left: 0; margin-right: 0;
      padding-right: 4px; padding-left: 4px;
    }
}

@media only screen and (max-width: 875px) {
    .cssmenu {
      display: unset;
    } .container {
      margin-left: 0; margin-right: 0;
      padding-right: 15px; padding-left: 15px;
    }
}

@media screen and (max-width: 480px) {
    .main-content {
      margin-top: 50%;
    } .container.header {
      padding-top:10px;
      padding-right: 0; padding-left: 0;
    } #logo h3 {
      border-radius: unset;
    } #logo img {
      display: none;
    /*} .content {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));*/
    } .content.main-content {
      margin-top: 50%;
    } .content .title {
      margin-top: 12%;
    }

    .layout-item-3 {
      width: 100% !important;
    } .layout-item-4 {
      width: 100% !important;
    } .layout-item-5 {
      width: 100% !important;
    }
}
@media only screen and (max-width: 420px) {
    .container {
      padding-left: 0; padding-right: 0; 
    } h2 {
      letter-spacing: 0.8rem;
	} #logo h3 {
	  letter-spacing: 1.1rem;
	/*} .container {
      margin-left: 10px; margin-right: 10px;*/
    }
}

#theme-switch {
	width:28px;
	height:28px;
	border:none;
    background-repeat: no-repeat; 
	background-position: center;
	background-size: 28px;
	cursor:pointer;
}
#theme-switch.light {
	background-image: url(/assets/svg/light-mode2.svg);
}
#theme-switch.dark {
	background-image: url(/assets/svg/dark-mode2.svg);
}


.swd-layout-cell div {
	border: 1px solid var(--layout-cell-div-border);
} .swd-layout-cell div:hover {
	border: 1px solid var(--layout-cell-div-border-hover);
    background-color: var(--layout-cell-div-hover);
} 

.side-menu {
	background: var(--side-menu-gradient-bg) no-repeat !important;
    border-right: 1px solid var(--side-menu-border);
} .content h2 {
    color:var(--body-link);
	background: var(--h2-gradient-bg) no-repeat !important;
} .content h2:hover {
	background: var(--h2-gradient-bg-hover) no-repeat !important;
    color:var(--body-link-hover);
} .content hr {
	background: var(--hr-gradient-bg) no-repeat !important;
} .content hr:hover {
	background: var(--hr-gradient-bg-hover) no-repeat !important;
}