/*
 *
 * This file is a part of the BitTec Systems software library.
 * Copyright (C) 2019 BitTec Systems, Pvt., Ltd.
 * All rights reserved.
 *
 * Purpose: Define generic UI rendering logic
 * Ref: from 'rstyles.css' used in bittecsystems.com
 *
 */

/* web fonts PROJECTS specific */
@font-face {
    font-family: 'Segoe MDL2 Assets';
    font-style: normal;
    /*font-weight: 700;*/
    src: local("Segoe MDL2 Assets"),
        url('../fonts/segmdl2.eot?#iefix') format('embedded-opentype'),
        url('../fonts/segmdl2.ttf') format('truetype');
        unicode-range: U+0-10FFFF;
}

@font-face {
   font-family: 'Roboto-Light'; /*, arial, sans-serif;*/
   font-style: normal;
   /*font-weight: 300;*/
   src: local("Roboto-Light"), url("../fonts/Roboto-Light.ttf") format("truetype");
   unicode-range: U+0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
   font-family: 'Merriweather-Light';
   font-style: normal;
   src: local("Merriweather-Light"), url("../fonts/Merriweather-Light.ttf") format("truetype");
   /*unicode-range: U+0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;*/
   unicode-range: U+0-10FFFF;
}
/*
@font-face {
   font-family: 'BreeSerif';
   font-style: normal;
   src: local("BreeSerif-Regular"), url("../fonts/BreeSerif-Regular.ttf") format("truetype");
   */
/*unicode-range: U+0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;*//*

   unicode-range: U+0-10FFFF;
}
*/


/* END:web fonts PROJECTS specific */


/* W3.CSS 4.13 June 2019 by Jan Egil and Borge Refsnes */
html {
   box-sizing: border-box;
}

*, *:before, *:after {
   box-sizing: inherit;
}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100vw; /* let user agent provide default value */
  height: 100vh;  /* default (100vh) viewport body size*/
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
   display: block
}

summary {
   display: list-item
}

audio, canvas, progress, video {
   display: inline-block
}

progress {
   vertical-align: baseline
}

audio:not([controls]) {
   display: none;
   height: 0
}

.hidden,
[hidden],
template {
   display: none
}

a {
   background-color: transparent
}

a:active, a:hover {
   outline-width: 0
}

abbr[title] {
   border-bottom: none;
   text-decoration: underline;
   text-decoration: underline dotted
}

b, strong {
   font-weight: bolder
}

dfn {
   font-style: italic
}

mark {
   background: #ff0;
   color: #000
}

small {
   font-size: 0.8rem; /*80%*/
}

sub, sup {
   font-size: 0.75rem; /*75%*/
   line-height: 0;
   position: relative;
   vertical-align: baseline
}

sub {
   bottom: -0.25rem
}

sup {
   top: -0.5rem
}

figure {
   margin: 1rem 40px
}

img {
   border-style: none
}

code, kbd, pre, samp {
   font-family: monospace, monospace;
   font-size: 1rem;
}

hr {
   box-sizing: content-box;
   height: 0;
   overflow: visible;
   color:inherit;
   border-bottom-color: inherit;
}

button, input, label, select, textarea, optgroup {
   font: inherit;
   /*margin: 0;
   margin: 0px 4px; top=4 lef=rig=4 bot=6 */
   margin: 4px 4px 6px;
}

select {
   max-width: 8rem !important;
}

optgroup {
   font-weight: bold
}

button,
input {
   overflow: visible
}

button,
select {
   text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
   -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
   border-style: none;
   padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
   outline: 1px dotted ButtonText
}

fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
   padding: .35rem .625rem .75rem;
}

legend {
   /**color: inherit;
   display: table;
   max-width: 100%;
   white-space: normal;
   **/
   /*padding: 0px 4px; top=4 lef=rig=4 bot=6 */
   margin-left: 4px;
   padding: 4px 4px 6px;
   border: 1px solid #9e9e9e; /*#ccc;*/
   background-color: #fff;
}

textarea {
   overflow: auto;
}

[type=checkbox],
[type=radio] {
   padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
   height: auto
}

[type=search] {
   -webkit-appearance: textfield;
   outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
   -webkit-appearance: none
}

::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit
}

/* END:extract */

/* RESPONSIVE - for diff media sizes */
/* Use a media query to add a breakpoint at width 880px: */
@media screen and (max-width: 400px) {
    menu.bs-ext-vertical{width:40% !important;}
    div#vert h2,
    div#vert h3{
        text-align:right;
        width: 40%;
        font-size:  medium !important;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), /*iPads / MacBooks*/
{
}
@media screen and (max-width: 880px) {
    .margined-8{
        margin-left:2% !important;
        margin-right:2% !important;
    }
    h1,h2,h3,h4,h5,h6,
    .announce{
        font-size: x-large !important;
    }
    div#vert h2,
    div#vert h3{
        text-align:right;
        width: 33%;
        /*font-size:  x-large !important;*/
    }
    p,
    .bs-text{
        font-size: smaller !important;
    }
    section.bs-wide-50,
    section.bs-wide-45,
    section.bs-wide-40,
    section.bs-wide-33,
    section.bs-wide-30,
    section.bs-wide-25 {
        width: 100%;
        padding-left:0 !important;
        padding-right:0 !important;
        height: auto !important;
        vertical-align: initial !important;
        border-right-color: transparent;
        border-bottom: 1px solid rgba(0,125,255,1);
    }
    article section:last-child {
        border-bottom: none;
    }
    .bs-ext-frmSubmit{
        float:none !important;
    }
    /*span.inline-elements{float:right !important;}
    menu.bs-ext-horizontal{display:none !important;}*/
    div#horz{display:none !important;}
    div#vert{display:block !important;}
    form.button,
    menu.bs-ext-sidekick{display:inline-block !important;}
    menu.bs-ext-vertical{display:block !important;}
}
/* END:RESPONSIVE - for diff media sizes */

/* com.bittecsystems for EXTERNAL projects [specific css] 24Feb2025 (c) BitTec Systems [namespace='bs-','bs-ext-']*/
html {scroll-behavior: smooth;}
body {
  width: 98.7vw !important; /* body.width adjust in browsers w/o horiz scroll bar and w/vert scroll bar*/
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body *{z-index: inherit;}
body *{background-color: transparent; /*inherit;*/}

article,
article * {
    z-index:inherit;
}

/* -ext project's logo based colors */
.bs-ext-logo-color{
   color: rgba(0,125,255,1) !important; /*#007DFF*/
}
.bs-ext-border-color-logo-color:hover{
  transition: border-color 0.75s;
  border-color: rgba(0,125,255,1); /*#007DFF*/
}
/* END:-ext project's logo based colors */

/** NORMAL | Typography  html, || body,**/
/* Serifs */
.bs-serif{
/*  font-family: BreeSerif, serif;*/
  font-family: "Merriweather-Light", serif;
  font-weight: normal;
}
/* Sans-Serifs */
p,
.form-inputs,
.bs-sans-serif{
  font-family: "Roboto-Light", sans-serif;
  font-weight: normal;
}
/* font icons */
.bs-icon-font{
  font-family:'Segoe MDL2 Assets';
}

html,
p,
.bs-ext-ul-li,
.bs-text {
   font-size:  1rem; /** ROOT - since most browser default 100% = 16px = 1.625rem, 62.5% = 10px = 1rem !! **/
   font-weight: normal;
   white-space: normal;
   text-align: justify;
   letter-spacing: 2px;
}
.bs-icon{
  font-size: 1.5rem;
  font-weight: bold;
  font-variant: normal;
  letter-spacing: 2px;
}
.bs-icon-inline {
  font-size: inherit;
  font-weight: normal;
  position: relative;
  top: 4px;
  text-shadow: none;
  letter-spacing: 8px;
}
.bs-ext-ul-li > li{
   font-weight: bold;
   padding-top: 1rem;
   padding-bottom: 0.2rem;
}
.bs-ext-ul-li > li:first-child{
   padding-top:0px;
}


/** H1...H6 **/
h1, h2, h3, h4, h5, h6,
.bs-head {
   font-weight: bold;
   font-variant: small-caps;
   margin: 10px 0;
   letter-spacing: 2px;
}
.bs-text-shadowed{
  text-shadow: 0 0.1rem 0 rgba(255,255,255,0.75);
}
h1,
.bs-banner {
   font-size: 3.6rem;
}
h2,
.bs-xx-large {
   font-size: 3.0rem;
}
h3 {
   font-size: 2.4rem;
}
h4,
.bs-x-large {
   font-size: 2.0rem;
}
h5 {
   font-size: 1.8rem;
}
h6,
.bs-large {
   font-size: 1.6rem;
}
/** H1...H6 **/

a, a:active, a:visited {
  text-decoration: none;
  text-decoration-line: none;
  color: inherit;
}

menu,
ul,
menu li,
ul li {
  margin: 0px;
  /* list-style-type: '?'; */
  padding: 0px;
  margin-left: 16px;
}
menu{
   font-size: 1.0rem; /*1.14rem;*/
    font-variant: small-caps;
}
/** END:NORMAL | Typography  html, || body,**/

[type=button],
[type=reset],
[type=submit],
button {
    border:none;
    cursor:pointer;
    padding:0.625rem 1rem;
}
/*
[type=button]:hover,
[type=reset]:hover,
[type=submit]:hover,
button:hover {
  / *box-shadow: 0 12px 16px 0 rgba(0,0,0,0.8), 0 17px 50px 0 rgba(0,0,0,0.7);* /
    box-shadow: 2px 2px 6px 1px rgba(255,202,40,0.6), 3px 3px 9px 1px rgba(255,202,40,0.8);
}
*/

/** LAYOUT | Header  **/
header, nav, main, article, section, aside, footer, form {
    display:inline-block;
  padding: 0.5%;
}
header img {
  display: block;
  height: 60px;
  padding-top: 20.15px;
}
/** END:LAYOUT | Header  **/

/** LAYOUT | Navigator  **/
nav.bs-ext-horizontal,
menu.bs-ext-vertical,
menu.bs-ext-horizontal{
    /*overflow: hidden;*/
    display:inline;
    /*position: fixed;*/
    width:100%;
    margin: 0;
    padding: 0;
    color: rgba(42,77,162,1);
    background-color: inherit;
}
menu.bs-ext-vertical{
    background-color: rgba(255,253,244,1); /*shade of Logo yellow*/
    box-shadow: 2px 2px 6px 1px rgba(16,36,117,0.6), 3px 3px 9px 1px rgba(16,36,117,0.8); /* button box shadow */
}
nav.bs-ext-horizontal{
    display:inline-block;
}
menu.bs-ext-vertical,
menu.bs-ext-vertical li,
menu.bs-ext-horizontal,
menu.bs-ext-horizontal li{
    position: relative;
    /*top:0;
    left:0;*/
}
menu.bs-ext-vertical li,
menu.bs-ext-vertical li a,
menu.bs-ext-sidekick li,
menu.bs-ext-sidekick li a,
menu.bs-ext-horizontal li,
menu.bs-ext-horizontal li a{
    float: left;
    list-style-type: none;
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    font-weight: 100;
}
menu.bs-ext-vertical,
menu.bs-ext-sidekick{
    display:none;
    width:25%;
    /*border:2px solid royalblue;*/
}
menu.bs-ext-vertical{
    position:absolute;
    top:3.8rem;
    left:0.2rem;
    /*width:30%;*/
    font-size:95%;
}
.bs-ext-show {
    display:block !important;
}
.Xinline-elements {
    display: inline; /*-block;*/
    float:left;
    text-align: center;
}
nav menu#horized a.active,
nav menu#horized a:active,
nav menu#horized a:hover{
/*    font-family: BreeSerif, serif;*/
    font-family: Merriweather-Light;
    font-weight: bold;
    transition: font-family 0.3s;
}

/*
    menu li a:hover:not(.active){background-color: #111;}
    menu li a.active{background-color: #04AA6D;}
*/
    menu li.right{float: right;}

/** END:LAYOUT | Navigator  **/

/** MISC | widths, heights, positions, z-indexes, ul-li, etc...**/
.bs-flag-svg{
  border: 1px solid white;
  width: 1.2rem !important;
  line-height: 0.9rem !important;
}
.bs-content-base {
  margin: 0;
  padding: 0;
}
.bs-wide-05{
   width: 4.99998%;
}
.bs-wide-10{
   width: 9.99998%;
}
.bs-wide-20{
   width: 19.99998%;
}
.bs-wide-25{
   width: 24.99998%;
}
.bs-wide-29{
   width: 29%;
}
.bs-wide-30{
   width: 29.99998%;
}
.bs-wide-33{
   width: 32.99998%;
}
.bs-wide-40{
   width: 39.99998%;
}
.bs-wide-45{
   width: 44.99998%;
}
.bs-wide-50{
   width: 49.99998%;
}
.bs-wide-54{
   width: 54%;
}
.bs-wide-55{
   width: 54.99998%;
}
.bs-wide-60{
   width: 59.99998%;
}
.bs-wide-69{
   width: 69%;
}
.bs-wide-70{
   width: 69.99998%;
}
.bs-wide-80{
   width: 79.99998%;
}
.bs-wide-88{
   width: 87.99998%;
}
.bs-wide-90{
   width: 89.99998%;
}
.bs-wide-100{
   width: 99.99998%;
}
.bs-self-centered{
  margin-left: auto !important;
  margin-right: auto !important;
}
.bs-text-left{
  text-align: left;
}
.bs-text-centered{
  text-align: center;
}
.margined-8 {
   margin-left: 8%;
   margin-right: 8%;
   min-width: inherit;
}
.bs-sticky-top{
  position: fixed;
  top: 0;
  left: 0;
}
.bs-above-all{
  z-index: 10;
}
.bs-below-all{
  z-index: -10;
}
/* colors */
.text-color-0{
    color: rgba(255,202,40,1);  /*Logo yellow*/
}
.text-color-1{
    color: rgba(42,190,244,1); /*Logo light-blue*/
}
.text-color-2-faded,
.text-color-2{
    color:rgba(16,36,117,1); /*Logo deep-blue*/
}
.text-color-2-faded{
    color:rgba(16,36,117,0.5); /*Logo deep-blue - FADED*/
}
.text-color-3{
    color: rgba(42,77,162,1); /*Logo blue*/
}
.bg-0 {
background-color: rgba(255,253,244,1); /*shade of Logo yellow*/
background-color: rgba(255, 245, 215, 0.6); /*shade of Logo yellow*/
}
.bg-1 {
background-color: rgba(179,231,251,0.5); /*shade of Logo light-blue*/
background-color: rgba(195,212,255,0.6);; /*shade of Logo blue*/
}
/* footer bg color */
.bg-z {
    background-color: rgba(35,65,135,1); /*shade of Logo blue*/
    background-color: rgba(16,36,117,0.9); /*shade of Logo deep-blue*/
}
.bs-ext-button-box-shadow-color-0{
    /*box-shadow: 2px 2px 6px 1px rgba(255,202,40,0.6);*/
}
.bs-ext-button-box-shadow-color-0:hover{
    box-shadow: 2px 2px 6px 1px rgba(255,202,40,0.6), 3px 3px 9px 1px rgba(255,202,40,0.8);
}
.bs-ext-button-box-shadow-color-1{
    box-shadow: 2px 2px 6px 1px rgba(42,190,244,0.6);
}
.bs-ext-button-box-shadow-color-1:hover{
    box-shadow: 2px 2px 6px 1px rgba(42,190,244,0.6), 3px 3px 9px 1px rgba(42,190,244,0.8);
}
.bs-ext-button-box-shadow-color-2{
    /*box-shadow: 2px 2px 6px 1px rgba(16,36,117,0.6);*/
}
.bs-ext-button-box-shadow-color-2:hover{
    box-shadow: 2px 2px 6px 1px rgba(16,36,117,0.6), 3px 3px 9px 1px rgba(16,36,117,0.8);
}
.bs-ext-button-box-shadow-color-3{
    box-shadow: 2px 2px 6px 1px rgba(42,77,162,0.6);
}
.bs-ext-button-box-shadow-color-3:hover{
    box-shadow: 2px 2px 6px 1px rgba(42,77,162,0.6), 3px 3px 9px 1px rgba(42,77,162,0.8);
}
.bs-ext-button-round{
    border-radius: 50%;
    transition: 0.3s;
}
.announce{
 /*   font-family: BreeSerif, serif;*/
    font-family: Merriweather-Light;
    font-weight: bold;
}
.bs-horiz-scroll-sepa{
  border-right: 1px solid;
  border-right-color: rgba(42,190,244,1); /*Logo light-blue*/
}
footer p {
    float:left;
}
footer hr {
    border-bottom-color:rgba(255,202,40,1);  /*Logo yellow*/
}
footer form * {
    font-size:0.8rem;
   display: inline-block;
   height: 100%;
}
input[type="text"],
textarea,
.txtInput {
   border: 1px solid rgba(255,202,40,1);
   width:90%;
}

.frmLabel {
   cursor: default;
}

.bs-ext-frmSubmit {
   background-color: inherit;
   color: inherit;
}

#inputdefault{;}

.bs-ext-aside,
.bs-ext-aside-center,
.bs-ext-aside-right,
.bs-ext-aside-left{
    width: inherit;
    font-style: italic;
    /*background-color: lightgray;*/
}
.bs-ext-aside-left{
    padding-right: 1.2rem;
    margin-right: 1.2rem;
    float: left;
}
.bs-ext-aside-right{
    padding-left: 1.2rem;
    margin-left: 1.2rem;
    float: right;
}
.bs-ext-aside-center{
    padding: 0 auto;
    margin:  0 auto;
    float: none;
}

/** END:MISC | widths, heights, positions, z-indexes, ul-li, etc...**/

/** Decorations | transitions, transforms **/
.bs-border-stylized-shadow{
  box-shadow: 0 0 11px rgba(33,33,33,0.2);
  transition: box-shadow 0.8s;
}
.bs-border-stylized-shadow-off{
  box-shadow: 0 0 11px transparent;
  transition: box-shadow 0.8s;
}

.bs-display-transi{
  opacity: 100%;
  transition: opacity 0.8s;
  pointer-events:auto;
}
.bs-display-transi-off{
  opacity: 0%;
  transition: opacity 0.8s;
  pointer-events: none;
}
.bs-ext-scroll-margined {
    scroll-margin:5rem;
}
xarticle p,
xarticle span,
.xbs-ext-ul-li {
    font-size: 1.1rem;
}

.mapouter{
    position:relative;
    text-align:right;
    width:100%;
    height:300px;
 }
.gmap_canvas {
    overflow:hidden;
    background:none!important;
    width:100%;
    height:300px;
}
.gmap_iframe {
    height:300px !important;
}

.bs-ext-bottom-border-shadowed{
    border: 1px solid transparent;
    /*box-shadow: h-shadow v-shadow blur spread color inset*/
    box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.4);
}
/** END:Decorations | transitions, transforms **/


/* END:com.bittecsystems for EXTERNAL projects [specific css] 24Feb2025 (c) BitTec Systems [namespace='bs-ext-']*/