:root {



   --themeBG: rgba( 255, 255, 255 , 1);
   --themeBG-05: rgba( 255, 255, 255 , .05);
   --themeBG-10: rgba( 255, 255, 255 , .1);
   --themeBG-20: rgba( 255, 255, 255 , .2);
   --themeBG-30: rgba( 255, 255, 255 , .3);
   --themeBG-40: rgba( 255, 255, 255 , .4);
   --themeBG-50: rgba( 255, 255, 255 , .5);
   --themeBG-60: rgba( 255, 255, 255 , .6);
   --themeBG-70: rgba( 255, 255, 255 , .7);
   --themeBG-80: rgba( 255, 255, 255 , .8);
   --themeBG-90: rgba( 255, 255, 255 , .9);
   --themeBG-95: rgba( 255, 255, 255 , .95);




   --themeTXT: rgba( 70, 70, 70, 1);
   --themeTXT-05: rgba( 70, 70, 70, .05);
   --themeTXT-10: rgba( 70, 70, 70, .1);
   --themeTXT-20: rgba( 70, 70, 70, .2);
   --themeTXT-30: rgba( 70, 70, 70, .3);
   --themeTXT-40: rgba( 70, 70, 70, .4);
   --themeTXT-50: rgba( 70, 70, 70, .5);
   --themeTXT-60: rgba( 70, 70, 70, .6);
   --themeTXT-70: rgba( 70, 70, 70, .7);
   --themeTXT-80: rgba( 70, 70, 70, .8);
   --themeTXT-90: rgba( 70, 70, 70, .9);
   --themeTXT-95: rgba( 70, 70, 70, .95);
}




html.esc,body.esc {
   /*backdrop-filter: blur(1em);*/
   background-color: transparent;
}


body[theme=dark] {
   --themeBG: rgba( 34, 34, 34 , 1);
   --themeBG-05: rgba( 34, 34, 34 , .05);
   --themeBG-10: rgba( 34, 34, 34 , .1);
   --themeBG-20: rgba( 34, 34, 34 , .2);
   --themeBG-30: rgba( 34, 34, 34 , .3);
   --themeBG-40: rgba( 34, 34, 34 , .4);
   --themeBG-50: rgba( 34, 34, 34 , .5);
   --themeBG-60: rgba( 34, 34, 34 , .6);
   --themeBG-70: rgba( 34, 34, 34 , .7);
   --themeBG-80: rgba( 34, 34, 34 , .8);
   --themeBG-90: rgba( 34, 34, 34 , .9);
   --themeBG-95: rgba( 34, 34, 34 , .95);



   --themeTXT: rgba( 255, 255, 255, 1);

   --themeTXT-05: rgba( 255, 255, 255, .05);
   --themeTXT-10: rgba( 255, 255, 255, .1);
   --themeTXT-20: rgba( 255, 255, 255, .2);
   --themeTXT-30: rgba( 255, 255, 255, .3);
   --themeTXT-40: rgba( 255, 255, 255, .4);
   --themeTXT-50: rgba( 255, 255, 255, .5);
   --themeTXT-60: rgba( 255, 255, 255, .6);
   --themeTXT-70: rgba( 255, 255, 255, .7);
   --themeTXT-80: rgba( 255, 255, 255, .8);
   --themeTXT-90: rgba( 255, 255, 255, .9);
   --themeTXT-95: rgba( 255, 255, 255, .95);

   /*text-shadow: 0 0 2px #222;*/
   text-shadow: 0 0 1px #555;
   /*text-shadow: unset !important;*/
}

body[theme=light] .modal-header,
body[theme=light] .modal-body,
body[theme=light] .modal-footer,
body[theme=light] .modal-dialog {
   color: var(--themeTXT-90) !important;
   background-color: var(--themeBG) !important;
}
body .modal .btn-close {
   color: red !important;
   background: red !important;
}
body[theme=light] .modal input {
   color: var(--themeTXT-80) !important;
}
body[theme=light] .modal input:focus {
   outline: unset !important;
   box-shadow: 0 0 0 .125em var(--themeBG-20) !important;
}

body[theme=dark] .modal-header,
body[theme=dark] .modal-body,
body[theme=dark] .modal-footer,
body[theme=dark] .modal-dialog {
   color: var(--themeTXT-60) !important;
   background-color: var(--themeBG) !important;
   border-color: var(--themeTXT-10) !important;
}
body[theme=dark] .modal input {
   background-color: var(--themeTXT-60) !important;
   color: var(--themeBG-90) !important;
   border-color: var(--themeTXT-60) !important;
   border-radius: 0 !important;
}
body[theme=dark] .modal input:focus {
   box-shadow: 0 0 0 .25em var(--themeTXT-10) !important;

}
body[theme] .modal input {
   font-size: 1.4em;
   margin-top: 1.5em;
   margin-bottom: .75em;
   outline: unset !important;
   line-height: 1.65em !important;
}
body[theme] .modal form {
   /*border: 10px solid gold;*/
}
body[theme] .modal form label {
   font-size: 1.15em;
   display: block;
   margin: 0;
   line-height: 1.5em;
}
body[theme] .modal form .tip {
   margin: .25em 0 1em;
   line-height: 1.35em;
   font-size: .75em;
}
body[theme] .modal form input,
body[theme] .modal form textarea,
body[theme] .modal form select {
   height: 2.5em;
   padding-left: 2em;
   border: 0;
   font-size: .9em;
   border-radius: 0;
   color: var(--themeTXT-80);
   border-bottom: 3px solid var(--themeTXT-10);
   margin: 0 auto 0;
   box-shadow: unset;
   background-color: var(--themeBG-60);
}
body[theme] .modal form textarea {
   min-height: 5em;
   max-height: 10em;
   padding: .25em;
   border: 0;
   outline: 0;
   border-bottom: 3px solid var(--themeTXT-10);
}
body[theme] .modal form input:focus,
body[theme] .modal form select:focus {
   padding-left: .5em;
}

.bg-trans {
   background-color: transparent !important;
}
.text-right {
   text-align: right !important;
}

.fai-icon[src] {
   width: 1rem;
   height: 1rem;
   margin-right: .25rem;
}
.fai-icon[src].wh1x1 {
   width: 1.5rem;
   height: 1.5rem;
   margin-right: .35rem;
}
.ps,.ps-10 {
   padding-left: 1em !important;
   padding-right: 1em !important;
}
.ps-15 {
   padding-left: 1.5em !important;
   padding-right: 1.5em !important;
}
.ps-20 {
   padding-left: 2em !important;
   padding-right: 2em !important;
}
.ps-m25 {
   padding-left: .25em !important;
   padding-right: .25em !important;
}
.ps-m50 {
   padding-left: .5em !important;
   padding-right: .5em !important;
}
.ps-m75 {
   padding-left: .75em !important;
   padding-right: .75em !important;
}


.mr-1 {
   margin-right: .25em;
}
.mr-2 {
   margin-right: .5em;
}
.mr-3 {
   margin-right: .75em;
}
.mr-4 {
   margin-right: 1em;
}
.ml-1 {
   margin-left: .25em;
}
.ml-2 {
   margin-left: .5em;
}
.ml-3 {
   margin-left: .75em;
}
.ml-4 {
   margin-left: 1em;
}


.fs-h25 {
   font-size: .25em !important;
}
.fs-h40 {
   font-size: .40em !important;
}
.fs-h55 {
   font-size: .5em !important;
}
.fs-h60 {
   font-size: .6em !important;
}
.fs-h75 {
   font-size: .75em !important;
}
.fs-h90 {
   font-size: .90em !important;
}
.fs {
   font-size: 1em !important;
}
.fs-25 {
   font-size: 1.25em !important;
}
.fs-50 {
   font-size: 1.5em !important;
}
.fs-75 {
   font-size: 1.75em !important;
}
.fs-2x {
   font-size: 2em !important;
}
.fs-225 {
   font-size: 2.25em !important;
}
.fs-250 {
   font-size: 2.5em !important;
}
.lh {
   line-height: 1em;
}
.lh-m25 {
   line-height: .25em;
}
.lh-m50 {
   line-height: .5em;
}
.lh-m75 {
   line-height: .75em;
}
.lh-m80 {
   line-height: .8em;
}
.lh-m90 {
   line-height: .9em;
}
.lh-25 {
   line-height: 1.25em;
}
.lh-50 {
   line-height: 1.50em;
}
.lh-75 {
   line-height: 1.75em;
}
.lh-x2 {
   line-height: 2em;
}
.lh-x25 {
   line-height: 2.25em;
}
.lh-x50 {
   line-height: 2.5em;
}
.lsp {
   letter-spacing: 1em;
}
.lsp-25 {
   letter-spacing: .25em;
}
.lsp-50 {
   letter-spacing: .50em;
}
.lsp-75 {
   letter-spacing: .75em;
}
.lsp-x2 {
   letter-spacing: 2em;
}
.lsp-m25 {
   letter-spacing: -.25em;
}
.lsp-m50 {
   letter-spacing: -.50em;
}
.lsp-m70 {
   letter-spacing: -.75em;
}

.wh1x1 {
   width: 1em;
   height: 1em;
}


::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
  backdrop-filter: 2em;
}
::-webkit-scrollbar-thumb {
  background-color: var(--themeTXT-40);
  border-radius: 5px;
  transition: opacity 0.3s ease;
  opacity: 0; 
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--themeTXT-40) #000;
  backdrop-filter: 2em;
}






.biizBtn {
  position: relative;
  overflow: hidden; /* keep ripple inside */
  padding: .5em 1.75em;
  border: none;
  border-radius: 1.5em;
  background: var(--themeBG-20);
  /*color: red;*/
  /*color: var(--themeTXT);*/
  font-size: 1rem;
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(.25em);


  box-shadow: 0 .25em .5em #fff8 inset;
}
.biizBtn[disabled] {
   opacity: .2;
   cursor: not-allowed;

   filter: sepia(95%);
}

.biizBtn:not([disabled]):focus,
.biizBtn:not([disabled]):hover {
   /*color: var(--themeTXT);*/
   color: #fff;
   text-shadow: 0 0 2px #2228;
   background: var(--themeBG-60);
   box-shadow: 0 -.25em .5em #fff8 inset;
   backdrop-filter: blur(1em);
}
.growHOut:not([disabled],.active,.esc):focus,
.growHOut:not([disabled],.active,.esc):hover {
   box-shadow: 0 0 0 .5em var(--themeBG-20);
}
.growHOut.gx2:not([disabled],.active,.esc):focus,
.growHOut.gx2:not([disabled],.active,.esc):hover {
   box-shadow: 0 0 0 .5em var(--themeBG-40);
}
.growHOut.gx3:not([disabled],.active,.esc):focus,
.growHOut.gx3:not([disabled],.active,.esc):hover {
   box-shadow: 0 0 0 .5em var(--themeBG-60);
}