::selection{background: yellow;}   
::-moz-selection{background: yellow;}   

:root{
    --logo_color_main: #FFFFFF;
    --logo_color_db_main: #B3D9FF;
    --logo_color_i : #FF914D;
    --logo_color_bg: #002454;
    
    --bs-aqua     : #07FFFF;
    --bs-cornsilk : cornsilk; /* #fff8dc*/
    --bs-yellow   : yellow;
    
    --bs-pink-rgb   : 214,51,132;
    --bs-orange-rgb : 253,126,20;
    --bs-purple-rgb : 111,66,193;
    --bs-teal-rgb   : 32,201,151;
    --bs-teal2      : #2bbbad;
    --bs-indigo-rgb : 102,16,242;
}

/* XS */ 
@media (min-width: 0px) {  
  .overflow-xs-scroll_x {overflow-x: auto   !important; overflow-y: hidden !important;}
}

/* SM Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    /*me-sm-n2_5 { margin-right: -0.75rem !important;}*/
}

/* MD Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  .overflow-md-hidden { overflow: hidden!important; }
}
 
/* LG Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .w-lg-50  { width: 50% !important; }
  .w-lg-75  { width: 75%!important; }
  .border-lg-start { border-left: 1px solid #dee2e6!important; }
  .overflow-lg-visible { overflow-x: visible!important; overflow-y: visible!important;}
}
 
/* XL X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  .border-xl-start {border-left: 1px solid #dee2e6!important;}
  .w-xl-auto {width: auto!important;}
  .overflow-xl-hidden {overflow: hidden!important;}
  
  .w-xl-50  { width: 50% !important; }
  .w-xl-75  { width: 75%!important; }
  
  .card-group-xl {
    display: flex;
    flex-flow: row wrap;
  }
}

/* XXL XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .d-xxl-none {display: none!important;}
    .d-xxl-block {display: block!important;}
    
    .col-xxl-3{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .order-xxl-first{order: -1;}
    .order-xxl-last{order: 13;}
}


body {
/*    text-rendering: optimizeSpeed;*/
}

.w-max_ctent {width: max-content;}
.w-unset {width: unset;}

.h-0 {height: 0px!important;}


.l-height_110p { line-height: 110%; }
.l-height_140p { line-height: 140%; }

.h5_5 {font-size: 1.125rem !important;}
.h6 {font-size: 1rem !important;}
.h7 {font-size: 0.75rem !important;}
.h7_5 {font-size: 0.625rem !important;}

.bg-orange        {background-color: var(--bs-orange)!important;}
.bg-logo-bg       {background: var(--logo_color_bg);}

.border-logo-main {border-color: var(--logo_color_main) !important;}
.border-logo-i    {border-color: var(--logo_color_i) !important;}
.border-logo-bg   {border-color: var(--logo_color_bg) !important;}

.border-orange  {border-color: var(--bs-orange) !important;}
.border-purple  {border-color: var(--bs-purple) !important;}
.border-teal    {border-color: var(--bs-teal) !important;}
.border-indigo  {border-color: var(--bs-indigo) !important;}

.btn-orange     {--bs-btn-bg: var(--bs-orange)!important; --bs-btn-color: var(--bs-white); --bs-btn-hover-bg: #ef6e03; --bs-btn-hover-color: var(--bs-white); --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: var(--bs-orange);  --bs-btn-active-border-color: var(--bs-orange); --bs-btn-disabled-bg: var(--bs-orange); --bs-btn-disabled-color: darkslategrey}
.btn-indigo     {--bs-btn-bg: var(--bs-indigo)!important; --bs-btn-color: var(--bs-white); --bs-btn-hover-bg: #844ddf; --bs-btn-hover-color: var(--bs-white); --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: var(--bs-indigo);  --bs-btn-active-border-color: var(--bs-indigo);}

.btn-outline-orange {--bs-btn-color: var(--bs-orange); --bs-btn-border-color: var(--bs-orange); --bs-btn-hover-color: #b95400; --bs-btn-hover-border-color: #b95400;}
.btn-outline-pink {--bs-btn-color: var(--pink); --bs-btn-border-color: var(--pink); --bs-btn-hover-color: var(--pink); --bs-btn-hover-border-color: var(--pink);}

.airgusEl {font-family: 'Days One',sans-serif; font-variant: small-caps;}
.airgusEl .i_tx {font-family:'Times New Roman'; font-variant:normal; font-weight: bold;}
.html_AGS_logo_col .airgusEl {color: var(--logo_color_main);}
.html_AGS_logo_col .i_tx {color: var(--logo_color_i);}


.border-w2 {border-width: 2px !important;}
.border-w3 {border-width: 3px !important;}
.border-w5 {border-width: 5px !important;}

.text-small-caps {font-variant: small-caps;}
.text-justify {text-align: justify !important;}
.text-transparent {color: transparent;}
.t-shadow {text-shadow: -1px -1px #000;}

.text-aqua {color: var(--bs-aqua)!important;}
.text-cornsilk {color: var(--bs-cornsilk)!important;}
.text-yellow {color: var(--bs-yellow)!important;}
.text-logo_bg {color: var(--logo_color_bg) !important;}
/*.text-indigo {color: var(--bs-indigo) !important;}
.text-purple {color: var(--bs-purple) !important;}
.text-pink {color: var(--bs-pink) !important;}
.text-orange {color: var(--bs-orange) !important;}*/

.mt-n_1_3{margin-top: -1.3rem !important;}
.mt-n_1_5{margin-top: -1.5rem !important;}
/*.mt-n_2_25  {margin-top: -2.25rem!important;}*/
.mt-n5, .my-n5 {margin-top: -3rem!important;}
.my-n_1     {margin-top: -1rem!important;}
.ms-n_1_875{margin-left: -1.875rem !important;}


.z-index-0 {z-index: 0 !important;}
.z-index-1 {z-index: 1 !important;}
.z-index-1001 {z-index: 1001 !important;}
/*.z-index-2001 {z-index: 2001 !important;}*/

.fw-500 { font-weight: 500; }

.top_n-pct { top: var(--top_n-pct, 40%)!important }

.opacity-1 {opacity: 1 !important;}
.visible-hidden { visibility: hidden;}

.cursor-auto    { cursor: auto !important; }
.cursor-pointer { cursor: pointer !important; }

.overflow-scroll_x {overflow-x: auto   !important; overflow-y: hidden !important;}
.overflow-scroll_y {overflow-x: hidden !important; overflow-y: auto   !important;}

.shadow-black-on-white {
    -webkit-box-shadow: 0 .5rem 2rem rgba(0,0,0,.35) !important;
    -moz-box-shadow: 0 .5rem 2rem rgba(0,0,0,.35) !important;
    box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 35%) !important;
}
.shadow-red-on-white {
    -webkit-box-shadow: 0 .5rem 2rem rgba(255,0,0,.35) !important;
    -moz-box-shadow: 0 .5rem 2rem rgba(255,0,0,.35) !important;
    box-shadow: 0 0.5rem 2rem rgb(255 0 0 / 35%) !important;
}
.shadow-info-on-white {
    -webkit-box-shadow: 0 .5rem 2rem rgba(0,119,255,.30) !important;
    -moz-box-shadow: 0 .5rem 2rem rgba(0,119,255,.30) !important;
    box-shadow: 0 0.5rem 2rem rgb(0 119 255/ 30%) !important;
}
.shadow-white-on-black {
    -webkit-box-shadow: 0 0.5rem 2rem rgb(255 255 255 / 35%) !important;
    -moz-box-shadow: 0 .5rem 2rem rgba(255,255,255,.35) !important;
    box-shadow: 0 0.5rem 2rem rgb(255 255 255 / 35%) !important;
}


/* |-- BS my customization --> */
/*.tooltip-info{--bs-tooltip-bg: var(--bs-info); --bs-tooltip-opacity: 1; --bs-tooltip-color: black;}*/
.tooltip-danger {--bs-tooltip-bg: #9c0000;}
.tooltip-danger .tooltip-arrow::before {--bs-tooltip-bg: #ff0000;}
.tooltip-danger .tooltip-inner {border: 3px solid #ff0000;}
.tooltip-dark {--bs-tooltip-bg: #212529;}
.tooltip-dark .tooltip-arrow::before {--bs-tooltip-bg: #000;}
.tooltip-dark .tooltip-inner {border: 3px solid #000;}
.tooltip-info {--bs-tooltip-bg: #08536f;}
.tooltip-info .tooltip-arrow::before{--bs-tooltip-bg: #00dcff;}
.tooltip-info .tooltip-inner {border: 3px solid #00dcff;}
.tooltip-indigo {--bs-tooltip-bg: var(--indigo);}
.tooltip-indigo .tooltip-arrow::before{--bs-tooltip-bg: var(--indigo);}
.tooltip-indigo .tooltip-inner {border: 3px solid var(--indigo);}
.tooltip-light {--bs-tooltip-bg: #f8f9fa;}
.tooltip-light .tooltip-arrow::before {--bs-tooltip-bg: #777;}
.tooltip-light .tooltip-inner {border: 3px solid #777;}
.tooltip-primary {--bs-tooltip-bg: #007bff;}
.tooltip-primary .tooltip-arrow::before {--bs-tooltip-bg: #00288e;}
.tooltip-primary .tooltip-inner {border: 3px solid #00288e;}
.tooltip-secondary {--bs-tooltip-bg: #6c757d;}
.tooltip-secondary .tooltip-arrow::before {--bs-tooltip-bg: #3d3d3e;}
.tooltip-secondary .tooltip-inner {border: 3px solid #3d3d3e;}
.tooltip-success {--bs-tooltip-bg: #28a745;}
.tooltip-success .tooltip-arrow::before {--bs-tooltip-bg: #06ff3f;}
.tooltip-success .tooltip-inner {border: 3px solid #06ff3f;}
/*.tooltip-warning {--bs-tooltip-bg: #f8c323;}*/
.tooltip-warning {--bs-tooltip-bg: #e9e808; --bs-tooltip-color: black;}
.tooltip-warning .tooltip-arrow::before {--bs-tooltip-bg: #f7d000;}
.tooltip-warning .tooltip-inner {border: 3px solid #f7df00;}

.tt_inner-width .tooltip-inner {min-width: var(--tt_width);}
.tt_width-250 {--bs-tooltip-max-width: 250px;}
.tt_inner-250 .tooltip-inner {width: 250px;}
.tt_width-320 {--bs-tooltip-max-width: 320px;}
.tt_width-400 {--bs-tooltip-max-width: 400px;}
.tt_width-600 {--bs-tooltip-max-width: 600px;}
/*.tt_arrow-s-n305 .tooltip-arrow{left: var(--tt_arrow_dis)}*/
.tt_arrow-center .tooltip-arrow{left: calc(100% * -0.5) !important;}


.popover-info {
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

input[type="number"].no-spinner::-webkit-inner-spin-button,
input[type="number"].no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Hide the spinner for Firefox */
input[type="number"].no-spinner {
    -moz-appearance: textfield;
}


/* --> BS my customization --|*/

/* |-- From other *.css --> */
/*.oline-danger {outline: 2px solid var(--danger);}*/
/* --> From other *.css --|*/

/* <editor-fold defaultstate="collapsed" desc=" Scrollbars "> */
/*   From https://codepen.io/stephenpaton-tech/full/JjRvGmY */
html{
    --scrollbarBG: var(--logo_color_main);
    /*--scrollbarBG: var(red);*/
    --thumbBG_logoColbg: var(--logo_color_bg);
    /*--thumbBG_logoColbg: var(red);*/
}

.iCustScroll-AiRGUS{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_logoColbg) var(--scrollbarBG);
  /*scrollbar-color: red green;*/
  cursor: auto;
}
.iCustScroll-AiRGUS::-webkit-scrollbar{ width: 11px; height: 11px; }    /* custom */ 
.iCustScroll-AiRGUS::-webkit-scrollbar-track{ background: var(--scrollbarBG); }
.iCustScroll-AiRGUS::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_logoColbg);
  border-radius: 6px;
  border: 2px solid var(--scrollbarBG); /* custom */ 
  min-height: 100px;
}

html{
    --scrollbarBG: var(--logo_color_main);
    --thumbBG_info: var(--bs-info);
}
.iCustScroll-info{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_info) var(--scrollbarBG);
  cursor: auto;
}
.iCustScroll-info::-webkit-scrollbar{ width: 11px; height: 11px;}
.iCustScroll-info::-webkit-scrollbar-track{ background: var(--scrollbarBG); }
.iCustScroll-info::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_info);
  border-radius: 6px;
  border: 2px solid var(--scrollbarBG);  /* custom  */
  min-height: 100px;
}
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc=" bs-5.02, form-floating textarea correction"> */
.form-floating textarea.form-control.iBS502_crct{
    padding-left: 5px;
    padding-right: 15px;
    padding-top: 0px;

    border-top: 30px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
    outline: 1px solid #dadcde;
}
.form-floating textarea.form-control.iBS502_crct:focus {
    /*border-top: 30px solid transparent;*/
    border-top: var(--border-top_onactive, 30px) solid transparent;
}
.was-validated textarea.form-control.iBS502_crct:valid {
    border: 1px solid var(--bs-success);
    border-top: 30px solid transparent;
    box-shadow: 0 -1px 0 var(--bs-success);  /* <- border-top */
    background-size: calc(1.80em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated textarea.form-control.iBS502_crct:invalid {
    border: 1px solid var(--bs-danger);
    border-top: 30px solid transparent;
    box-shadow: 0 -1px 0 var(--bs-danger);  /* <- border-top */

    background-size: calc(1.80em + 0.375rem) calc(0.75em + 0.375rem);
}
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc=" bs-5.02, Remove Datalist Dropdown Arrow in Chrome ">
https://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome */
[list]::-webkit-calendar-picker-indicator {
    display: none;
    opacity: 0;
}
/*input::-webkit-calendar-picker-indicator { display: none;}  */
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc=" bs-5.02, form-floating correction"> */
.corLabelPos~label {top: var(--corLabelPos);}
.corLabelPos:focus~label, 
.corLabelPos:not(:placeholder-shown)~label {top: 0;}
/* </editor-fold> */

/* bs-5.2 form element - indicate if invalid or others using vars */
.form-control.iPassword_toggle.is-invalid { background-position: right calc(0.375em + 1.7rem) center; }
/* correction from BS45 to > 5 */
.formInput_bs45.is-invalid, .formInput_bs45.is-invalid:focus { border-color: var(--danger)!important; outline: 1px solid var(--danger); }

.accordion_arrow_white_white {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/*.iMarkIT{
    border-color: var(--indicate-bcol, transparent); 
    outline: 0;
    box-shadow: 0 0 0 var(--indicate-width, 0.15rem) var(--indicate-col, var(--bs-danger));
}*/

.slide_up{
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s ease;
}


/* <editor-fold defaultstate="collapsed" desc=" Flip container "> */
/* From: https://codepen.io/Eklipse/pen/RNGXNz */
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
.flip-container.flipIt .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip-container .flipper {
    -webkit-transition: 0.5s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.5s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.5s;
    -o-transform-style: preserve-3d;

    transition: 0.5s;
    transform-style: preserve-3d;

    position: relative;
}
.flip-container .front, .flip-container .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-container .front { z-index: 2;  position: relative; }
.flip-container .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 3;
}
/*< </editor-fold> */ 


.navbar-toggler {border-color: #007bff !important; 
    position: relative;
    padding-bottom: .8rem;
    background-color: transparent;
    background-image: none;
    border: 1px solid #f8f9fa;
    border-width: 1px !important;
    border-radius: 2px;
    
    top: 7px;
    height: 42px;
    padding: 0px 11px 4px 11px;
}
.navbar-toggler .icon-bar {
    background-color: #007bff;
    position: relative;
    transition: all 500ms ease-in-out;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin-top: 4px;
}
.navbar-toggler.active .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
    background: red;
}

.navbar-toggler.active .icon-bar:nth-of-type(2) {
    background-color: transparent;
}

.navbar-toggler.active .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
    background: red;
}

.navbar-nav .nav-link {color: #007bff;}

/*.navbar.fixed-top .navbar-collapse{ background-color: white;}*/

@media (max-width: 991px) {
    .navbar-toggler {top: 0;}
    .navbar.fixed-top .navbar-collapse{background-color: #343a40;}
}

.navbar-toggler .icon-bar:nth-of-type(1) {
    /*margin-top: 10px;*/
}


/* <editor-fold defaultstate="collapsed" desc=" Navbar / Menu underline animation "> */
#navbar_top .nav-link {
    display: block;
    position: relative;
    padding-bottom: 0.2em;
}

/* Fade in */
#navbar_top .nav-link::after {    
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.2em;
    background-color: var(--logo_color_i);
    opacity: 0;
    transition: opacity 300ms, transform 300ms;
}

/* Scale from center */
#navbar_top .nav-link::after {
    opacity :1;
    transform: scale(0);
    transform-origin: center;
}

#navbar_top .nav-link:hover::after,
#navbar_top .nav-link:focus::after {
    border-top: none;
    transform: scale(1);        
}
/* </editor-fold> */


/* <editor-fold defaultstate="collapsed" desc=" Ripple effect - req. also JS, bg col can be chnaged by --iRipple_bg "> */
.js-iRipple {
   -webkit-appearance: none;
             position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
           transition: all 0.4s ease;
}
.c-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.c-ripple__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--iRipple_bg, rgba(255, 255, 255, 0.25));
}
.c-ripple.is-active .c-ripple__circle {
  -webkit-animation: a-ripple 0.6s ease-in;
          animation: a-ripple 0.6s ease-in;
}

@-webkit-keyframes a-ripple {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { width: 200%; padding-bottom: 200%; opacity: 0; }
}
@keyframes a-ripple {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { width: 200%; padding-bottom: 200%; opacity: 0; }
}

/* other way - need also JS */
/*body {
  background-color: #efefef;
}

button {
  font-family: "Roboto";
  font-size: 24px;
  padding: 1em 2em;
  margin: 2px;
  border: 0;
  outline: 0;
  color: white;
  background-color: #2196f3;
  text-transform: uppercase;
  border-radius: 0.15em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

button .ripple {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  transform: scale(0);
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}*/


/* </editor-fold> */

/* // <editor-fold defaultstate="collapsed" desc=" Web pages: Footer"> */
#footer a {color: #fff !important;}
#footer a:hover {color: var(--bs-warning, var(--warning)) !important;}
#footer #pay_args *:hover {color: var(--bs-success, var(--success)) !important;}
/* // </editor-fold> */

/* Modal STOP sign */
#bannerformmodal .fa-octagon:after{
    content: "STOP"; 
    position: absolute; 
    font-size: 30%; 
    font-weight: bold;
    color: white;
    top:-webkit-calc(-4%);
    top:-moz-calc(-4%);
    top:calc(-4%);
    right:-webkit-calc(27%);
    right:-moz-calc(27%);
    right:calc(27%);
}



.form-switch.fsw_20x40 .form-check-input {
    height: 20px;
    width: 40px;
    margin-right: 5px;
}
.form-switch.fsw_24x48 .form-check-input {
    height: 24px;
    width: 48px;
    margin-right: 10px;
}
/*.form-switch.fsw_green .form-check-input:focus {*/
.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}
.form-switch.fsw_green .form-check-input:checked {
    background-color: #30D158;
    border-color: #30D158;
}
.form-switch.fsw_black .form-check-input:checked,
.form-check.fsw_black .form-check-input:checked {
    background-color: black;
    border-color: black;
}

.form-switch.fsw_green-red .form-check-input {
    background-color: #ff000021;;
    border-color: red;
    /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%0, 0, 0, 0.25%29'/%3e%3c/svg%3e");*/
}
.form-switch.fsw_green-red .form-check-input:checked {
    background-color: #30D158;
    border-color: #30D158;
    /*background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");*/
}


/*.modal-dialog .btn-close,*/
.modal-dialog .close, /* .close BS <5 */
.btn-close[aria-label="Close"] {
    transform: rotate(0deg);
    transition-duration: .2s;
    transition-property: transform,color,background-color,stroke,stroke-width;
    transition-timing-function: ease-out;
    
    /*stroke-width: 1px;*/
    /*color: #4f6177;*/
    /*stroke: #4f6177;*/
}
/*.modal-dialog .btn-close:hover,*/
.modal-dialog .close:hover, /* .close BS <5 */
.btn-close[aria-label="Close"]:hover {
    /*stroke: #63758b;*/
    /*stroke-width: 2px;*/
    transform: rotate(90deg);
    opacity: 1;
}



.kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  /*padding: 2px 4px;*/
  padding: 4px 4px 2px 4px;
  white-space: nowrap;
}

input[type="number"]::-webkit-inner-spin-button {
    /* if neccessary input[type="number"]::-moz-appearance { */
    /* Use this to set the value 
        document.documentElement.style.setProperty('--m-inner-spin-button', '0.5em');
        or by adding this to the element: style="--m-inner-spin-button: 1.5em;"
    */
    margin-left: var(--m-inner-spin-button, 0); /* Add margin to the left of the spinner */
}


.dropdown-menu.iAnim{    
  display: block;
  /*position: absolute;*/
  overflow: hidden;
  height: auto;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
    
  -webkit-transition: transform var(--ddm_iA_trans_off, 0.2s) ease-out, opacity var(--ddm_iA_opa_off, 0.5s);
  -moz-transition: transform var(--ddm_iA_trans_off, 0.2s) ease-out, opacity var(--ddm_iA_opa_off, 0.5s);
  -ms-transition: transform var(--ddm_iA_trans_off, 0.2s) ease-out, opacity var(--ddm_iA_opa_off, 0.5s);
  -o-transition: transform var(--ddm_iA_trans_off, 0.2s) ease-out, opacity var(--ddm_iA_opa_off, 0.5s);
  transition: transform var(--ddm_iA_trans_off, 0.2s) ease-out, opacity var(--ddm_iA_opa_off, 0.5s);
}

.dropdown-menu.iAnim.show {    
  opacity: 1;  
  transform: scaleY(1);
  
  -webkit-transition: transform var(--ddm_iA_trans_on, 0.2s) ease-out, opacity var(--ddm_iA_opa_on, 0.8s);
  -moz-transition: transform var(--ddm_iA_trans_on, 0.2s) ease-out, opacity var(--ddm_iA_opa_on, 0.8s);
  -ms-transition: transform var(--ddm_iA_trans_on, 0.2s) ease-out, opacity var(--ddm_iA_opa_on, 0.8s);
  -o-transition: transform var(--ddm_iA_trans_on, 0.2s) ease-out, opacity var(--ddm_iA_opa_on, 0.8s);
  transition: transform var(--ddm_iA_trans_on, 0.2s) ease-out, opacity var(--ddm_iA_opa_on, 0.8s);
}


/* progress */
.progress.p_bg_danger { background-color: #f8d7da; }
.progress.p_bg_warning{ background-color: #fff3cd; }
.progress.p_bg_success{ background-color: #d4edda; }
.progress-bar.bg-success {background-color: #20bb20 !important;}

.pVal[data-value] {
  position: relative;
  min-width: 35px;
  font-variant-numeric: oldstyle-nums;
}
/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */
.pVal[data-value]:after {
    content: attr(data-value) '%';
    position: absolute; right:10px; top:-6px; 
}
.pVal.noPresentChar[data-value]:after {
    content: attr(data-value);    
}
/* progress */


/*.form-switch.fsw_green .form-check-input:checked {
    background-color: #30D158;
    border-color: #30D158;
    background-color: black;
    border-color: black;
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}*/

/* <editor-fold defaultstate="collapsed" desc=" COMMENT "> */
/*
#sidebar-2 {
    transition: all 1s;
}
#sidebar-2 li[role="nav_item"]{
    border-top: 1px solid gray;
    text-align: center;
    width: 100%;
}

#sidebar-2 li[role="nav_item"]:hover{
    border: 1px solid gray;
    cursor: pointer;
}
*/

/*#nav_dName{
    max-width: 150px; 
    min-width: 80px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}*/
/* </editor-fold> */