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

:root{
    --logo_color_main: white;
    --logo_color_i   : #FF914D;
}

::-webkit-input-placeholder {
   color: #a9a6a6;
}
:-moz-placeholder { /* Firefox 18- */
   color: #a9a6a6;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #a9a6a6;  
}
:-ms-input-placeholder {  
   color: #a9a6a6;  
}

.bg-logo-main {background: var(--logo_color_main) !important;}


.load_animation  {max-width: 275px;}

.bg_ok { background: rgb(92, 184, 92); }
.bg_notok {background: rgb(217, 83, 79); }
.bg_notsure {background: rgb(235, 171, 13); }
.bg_unset { background-color: unset !important;}


.pt-6 {padding-top: 6rem !important;}

.mt-n1 {margin-top: -0.25rem !important;}
.mt-n2 {margin-top: -0.5rem !important;}
.mt-n3 {margin-top: -1rem !important;}
.mt-n4{margin-top: -1.5rem !important;}
.ms-n1 {margin-left: -0.25rem !important;}
.ms-n2 {margin-left: -0.50rem !important;}

.l-0 {left : 0;}
.r-0 {right: 0;}
.t-3 {top: 3px;}
.t-5 {top: 5px;}
.t-n1d2 {top: -1.2px;}
.t-n3 {top: -3px;}
.t-n5 {top: -5px;}

.z-index-1 {z-index: 1;}

.fSize-08 {font-size: 0.8rem !important;}
.fSize-1 {font-size: 1rem !important;}

.overflow-scroll{overflow: scroll;}

/*.h-fit-content {height: fit-content;}*/

.border-w1 {border-width: 1px !important;}
.border-w2 {border-width: 2px !important;}
.border-w3 {border-width: 3px !important;}
.border-w4 {border-width: 4px !important;}
.border-w5 {border-width: 5px !important;}
.border-w20 {border-width: 20px !important;}

.rounded-15 {border-radius: 15px !important;}
.rounded-35 {border-radius: 35px !important;}

.btn.rounded-start{ border-radius: 0.5rem 0 0 0.5rem;}
.btn.rounded-end{ border-radius: 0 0.5rem 0.5rem 0;}

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

.bd-callout {
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem;
}

/*.bd-callout-info { border-left-color: #5bc0de; }*/
.bd-callout-info { border-left-color: #5bc0de; }

.shadow-white-on-black { 
    -webkit-box-shadow: 0 .5rem 2rem rgba(255,255,255,.35) !important;
       -moz-box-shadow: 0 .5rem 2rem rgba(255,255,255,.35) !important;
            box-shadow: 0 .5rem 2rem rgba(255,255,255,.35) !important;
}

.box-shadow-1 { 
    -webkit-box-shadow: 0 .25rem 0.25rem !important;
       -moz-box-shadow: 0 .25rem 0.25rem !important;
            box-shadow: 0 .25rem 0.25rem !important;
}
.box-shadow-secondary-1 { 
    -webkit-box-shadow: .15rem 0.15rem var(--secondary) !important;
       -moz-box-shadow: .15rem 0.15rem var(--secondary) !important;
            box-shadow: .15rem 0.15rem var(--secondary) !important;
}

.strike-through { text-decoration: line-through; }
.text-decoration-underline {text-decoration: underline};

/*.filterBright-120{filter: brightness(120%);}*/

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


nav *{ /* Animation */
    -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

/* /---> mdb correction */
.bg-secondary { background-color: var(--secondary)!important; }
.text-secondary { color: var(--secondary)!important; }
/*.btn-outline-secondary { color: var(--secondary)!important; border: 2px solid var(--secondary)!important;}*/
/*.btn-outline-i_secondary { color: var(--secondary)!important; border: 1px solid var(--secondary)!important;}*/
/*.btn-outline-i_dark { color: var(--dark)!important; border: 1px solid var(--dark)!important;}*/
a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus {
    background-color: var(--secondary) !important;
}
a.text-secondary:hover, a.text-secondary:focus {
    color: var(--secondary) !important;
}
.bg-info {background-color: var(--info)!important;}
/*.bg-info { background-color: rgba(13,202,240, var(--bs-bg-opacity, 1))!important;};*/
/* <--- mdb correction */


@media (min-width: 576px) {  /* SM */
    .mt-sm-n0 {margin-top: 0rem !important;}
}

@media (min-width: 768px) { /* MD */
    .mt-md-n0 {margin-top: 0rem !important;}
}

@media (min-width: 992px) { /* LG */
    .mx-lg-n15 {margin-left: -15px !important; margin-right: -15px !important;}
    .mt-lg-n0 {margin-top: 0rem !important;}
    .text-lg-dark { color: var(--dark) !important;}
    .border-lg-0 {border: none !important;}
}

@media (min-width: 1200px) { /* XL */
    .mt-xl-n0 {margin-top: 0rem !important;}
    .w-xl-75 {width: 75% !important;}
}


/*body {font-family: 'Lexend Deca', sans-serif;
      background-color: #F3F3F3;
}*/

body {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: normal;
  background: #fafafa;
  /*color: pink !important;*/ 
}


/* Add this to activate it. It is linked to JS as well. <span class="ai-rgus-com"></span> or <span class="ai-rgus-com l_clr s45"></span> */
/*.ai-rgus-com {font-family: "Days One", sans-serif; font-weight: bold; font-variant: small-caps;}
.ai-rgus-com .l_i {font-family: "Times New Roman", Times, serif; font-variant: normal;}
.ai-rgus-com.l_clr {color: var(--logo_color_main);}
.ai-rgus-com.l_clr  .l_i {color: var(--logo_color_i);}
.ai-rgus-com .l_rest {font-variant: small-caps;}
.ai-rgus-com.s45{font-size:45px;} .ai-rgus-com.s45 .l_i{font-size:44px;} .ai-rgus-com.s45 .l_rest{font-size:45px;}*/
/*.ai-rgus-com.s30{font-size:30px;} .ai-rgus-com.s30 .l_i{font-size:33px;} .ai-rgus-com.s30 .l_rest{font-size:37px;}
.ai-rgus-com.s25{font-size:25px;} .ai-rgus-com.s25 .l_i{font-size:25px;} .ai-rgus-com.s25 .l_rest{font-size:27px;}
.ai-rgus-com.s18{font-size:18px;} .ai-rgus-com.s18 .l_i{font-size:18px;} .ai-rgus-com.s18 .l_rest{font-size:19px;}
.ai-rgus-com.s15{font-size:15px;} .ai-rgus-com.s15 .l_i{font-size:16px;} .ai-rgus-com.s15 .l_rest{font-size:18px;}*/


.border-secondary {border-color: var(--secondary) !important;}
.border-info {border-color: var(--info) !important;}

.border-left-primary   { border-left: .25rem solid var(--primary) !important;}
.border-left-secondary { border-left: .25rem solid var(--secondary) !important;}
.border-left-success   { border-left: .25rem solid var(--success) !important;}
.border-left-info      { border-left: .25rem solid var(--info) !important;}
.border-left-warning   { border-left: .25rem solid var(--warning) !important;}
.border-left-danger    { border-left: .25rem solid var(--danger) !important;}

.border-bottom-dark      { border-bottom: .25rem solid var(--dark) !important;}
.border-bottom-primary   { border-bottom: .25rem solid var(--primary) !important;}
.border-bottom-secondary { border-bottom: .25rem solid var(--secondary) !important;}
.border-bottom-success   { border-bottom: .25rem solid var(--success) !important;}
.border-bottom-info      { border-bottom: .25rem solid var(--info) !important;}
.border-bottom-warning   { border-bottom: .25rem solid var(--warning) !important;}
.border-bottom-danger    { border-bottom: .25rem solid var(--danger) !important;}

.border-bottom-gray-dark { border-bottom: .25rem solid var(--gray-dark) !important;}

.border-left-dark { border-left: .25rem solid var(--dark) !important;}

.bg-pink {background-color: var(--pink)!important;}
.border-left-pink { border-left: .25rem solid var(--pink) !important;}
.text-pink {color: var(--pink)!important;}
.border-pink {border-color: var(--pink)!important;}
.bg-airgus-com {background-color: var(--logo_color_main)!important;}
.border-left-airgus-com { border-left: .25rem solid var(--logo_color_main) !important;}
.text-airgus-com {color: var(--logo_color_main)!important;}
.border-airgus-com {border-color: var(--logo_color_main)!important;}
.bg-airgus-i-com {background-color: var(--logo_color_i)!important;}
.border-left-airgus-i-com { border-left: .25rem solid var(--logo_color_i) !important;}
.text-airgus-i-com {color: var(--logo_color_i)!important;}
.border-airgus-i-com {border-color: var(--logo_color_i)!important;}
.bg-orange {background-color: var(--orange)!important;}
.text-orange {color: var(--orange)!important;}
.border-left-orange {border-left: .25rem solid var(--orange)!important;}
.border-bottom-orange {border-bottom: .25rem solid var(--orange)!important;}
.bg-indigo {background-color: var(--indigo)!important;}
.text-indigo {color: var(--indigo)!important;}
.bg-purple {background-color: var(--purple)!important;}
.text-purple {color: var(--purple)!important;}
.btn-outline-purple{ outline: 2px solid var(--purple);}
.border-left-purple {border-left: .25rem solid var(--purple)!important;}
.border-bottom-purple {border-bottom: .25rem solid var(--purple)!important;}
.bg-teal {background-color: var(--teal)!important;}
.text-teal {color: var(--teal)!important;}
.bg-teal2 {background-color: var(--bs-teal2)!important;}
.border-teal2 {border-color: var(--bs-teal2)!important;}
.text-success2 {color: #00ff67!important;}   like iText-success 
.text-success3 {color: #00ff89!important;}   like iText-success 

.oline-danger {outline: 2px solid var(--danger);}
.oline-info {outline: 2px solid var(--info);}
.oline-warning {outline: 2px solid var(--warning);}
.oline-success {outline: 2px solid var(--success);}
.oline-primary-1 {outline: 1px solid var(--primary); margin-left: 1px;}
.text-nowrap-elpsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.badge-secondary {color: #fff !important; background-color: #6c757d !important;}

.hover-secondary:hover {background: var(--secondary); color: white;}


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

.opacity-7 {opacity: 0.7 !important;}
.opacity-5 {opacity: 0.5 !important;}
.opacity-full {opacity: 1 !important;}


.blurTxt{
    filter: blur(4px);
    -webkit-filter: blur(4px);
}


.btn-primary-01 {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff !important;
    background-color: #4285f4 !important;
}
.btn-info-01 {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff !important;
    background-color: #33b5e5 !important;
}

/*
.lift {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(31, 45, 65, 0.15);
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.lift:hover {
  transform: translateY(-0.3333333333rem);
  box-shadow: 0 0.5rem 2rem 0 rgba(31, 45, 65, 0.25);
}
.lift:active {
  transform: none;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(31, 45, 65, 0.15);
}

.lift-sm {
  box-shadow: 0 0.125rem 0.25rem 0 rgba(31, 45, 65, 0.2);
}
.lift-sm:hover {
  transform: translateY(-0.1666666667rem);
  box-shadow: 0 0.25rem 1rem 0 rgba(31, 45, 65, 0.25);
}
.lift-sm:active {
  transform: none;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(31, 45, 65, 0.2);
}

.card.lift {
  text-decoration: none;
  color: inherit;
}
*/

/* <editor-fold defaultstate="collapsed" desc=" Contact form "> */
/* From: https://material.io/guidelines/components/text-fields.html 
 * working demo: https://codepen.io/lewisvrobinson/pen/EyZwjR 
 *  or https://codepen.io/andreasstorm/pen/gKGbxo

.iFf_01 .col {
    box-shadow: 6px 7px 8px 0px #0000002b;
        -2px 0px 10px 1px #000;
        #0062cc7d;
    background: #f9fbfc;  #2196f3;
}
.iFf_01 h1 {
    font-size: 3em;
    font-weight: 500;
    text-align: center;
    color: #464a4e;   2196f3;
    text-shadow: 1px 1px 2px black;
    text-shadow: 1px 1px 1px white;
    font-variant: small-caps;
}
*/ 
.iFf_01 h5 {
    text-align: center;
    text-transform: uppercase;
    color: #c6c6c6;
}
.iFf_01 .group   { position: relative;  margin: 20px 0; }
.iFf_01 textarea { resize: none; }
.iFf_01 input,
.iFf_01 textarea {
    background: none;
    color: black;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    /*width: 320px;*/
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #c6c6c6; 
}
.iFf_01 input:focus,
.iFf_01 textarea:focus { outline: none; }

/* #00fc00;  #2196f3;*/

.iFf_01 input:focus ~ label,
.iFf_01 textarea:focus ~ label,
.iFf_01 input:valid ~ label,
.iFf_01 textarea:valid ~ label,
.iFf_01 input.valNOTreq ~ label,
.iFf_01 textarea.valNOTreq ~ label,
.iFf_01 input.invalid ~ label,
.iFf_01 textarea.invalid ~ label,
.iFf_01 input.valid ~ label,
.iFf_01 textarea.valid ~ label{
    top: -19px;
    font-size: 15px;
}
.iFf_01 input.invalid ~ label,
.iFf_01 textarea.invalid ~ label{
    color: red;
}
.iFf_01 input.valid ~ label,
.iFf_01 textarea.valid ~ label{
    color: green;
}

.iFf_01 input:focus ~ .bar:before,
.iFf_01 textarea:focus ~ .bar:before { width: 100%; /*320px;*/ }
.iFf_01 label {
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    -webkit-transition: 500ms ease all;
    transition: 500ms ease all;
    width: 100%;
}
.iFf_01 .bar { position: relative; display: block; width: 100%; /*320px;*/ }
.iFf_01 .bar:before {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: #721c24;  /*#2196f3;*/
  -webkit-transition: 600ms ease all;
  transition: 600ms ease all;
  left: 0%;
}

.iFf_01 input.invalid ~ .bar:before,
.iFf_01 textarea.invalid ~ .bar:before { background: red; }
.iFf_01 input.valid ~ .bar:before,
.iFf_01 textarea.valid ~ .bar:before { background: green; }
.iFf_01 input.change ~ .bar:before,
.iFf_01 textarea.change ~ .bar:before { width: 0; }

#singUp i{display: none;
  -webkit-transition: 500ms ease all;
    transition: 500ms ease all;
}
#singUp:hover i{display: inline;}


/*.iDropDn, .iDropDn ~ * {cursor: pointer;}*/
.iFf_01 .iDropDn ~ * {cursor: pointer;}
/*.dd-item {width: auto;}*/
/*.dd-item:hover {background-color: #c2e6f98f;}*/
/*.dd-item ~ul>li:hover {background-color: #c2e6f98f;}*/
.iFf_01 ul.dd-item li:hover {background-color: #c2e6f98f;}

.iFf_01 .fa-angle-down:hover{}
.iFf_01 .fa-angle-down{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: initial;
    right: 12px;
}

.iFf_01 ul.dd-item {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    /*display: none;*/
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    /*border: 2px solid rgba(0,0,0,.15);*/
    border: 2px solid black;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    border-radius: .25rem;
    
    background: white;
    height: auto;
    min-height: 65px;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}

/* <editor-fold defaultstate="collapsed" desc=" CODE IN COMMENT "> */
/*
.iFf_01 .btn {
  background: #fff;
  color: #959595;
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
//  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.iFf_01 .btn:hover {
  color: #8b8b8b;
  -webkit-box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
          box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}

.iFf_01 .btn.btn-link {
  background: #2196f3;
  color: #d3eafd;
}

.iFf_01 .btn.btn-link:hover {
  background: #0d8aee;
  color: #deeffd;
}

.iFf_01 .btn.btn-submit {
  background: #01af29;  // #2196f3;
  color: #bce0fb;
}

.iFf_01 .btn.btn-submit:hover {
  background: #02691a;  //#0d8aee;
  color: #deeffd;
}

.iFf_01 .btn.btn-cancel {
  background: #eee;
  color: black;
}

.iFf_01 .btn.btn-cancel:hover {
  background: #c6c5c5;  // #e1e1e1;
  color: #545252;  // #8b8b8b;
}

.iFf_01 .btn-box {
  text-align: center;
  margin: 20px 0;
}*/
/*</editor-fold> */
/* </editor-fold> */
/* <editor-fold defaultstate="collapsed" desc=" Flip element "> */
/* From: https://codepen.io/Eklipse/pen/RNGXNz */
/*.flip-container.flip-container {*/
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
/*.flip-container.flip-container.hover .flipper {*/
.flip-container.hover .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);

    position: absolute;
    top: 0;
    right : 0;
    
    z-index: 3;
    background: #f9fbfc;
    width: 100%;
    height: 100%;
}

/*
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;

    -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.hover  {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.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);

    position: absolute;
    top: 0;
    right : 0;
    
    z-index: 3;
    background: #f9fbfc;
    width: 100%;
    height: 100%;
}
*/
/* </editor-fold> */


/* // <editor-fold defaultstate="collapsed" desc=" scrollbars BG "> */
/* From https://codepen.io/stephenpaton-tech/full/JjRvGmY */
html {
  --scrollbarBG_primary: #e5e7e8;
  --thumbBG_primary: var(--primary, var(--bs-primary));
}
.iCustScroll-primary{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_primary) var(--scrollbarBG_primary);
}
.iCustScroll-primary::-webkit-scrollbar{ width: 13px; height: 13px; }
.iCustScroll-primary::-webkit-scrollbar-track{ background: var(--scrollbarBG_primary); }
.iCustScroll-primary::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_primary);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG_primary);
  min-height: 100px;
}

html {
  --scrollbarBG_info: #e5e7e8;
  --thumbBG_info: var(--info);
}
.iCustScroll-info{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_info) var(--scrollbarBG_info);
}
.iCustScroll-info::-webkit-scrollbar{ width: 13px; height: 13px; }
.iCustScroll-info::-webkit-scrollbar-track{ background: var(--scrollbarBG_info)!important; }
.iCustScroll-info::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_info)!important;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG_info)!important;
  min-height: 100px;
}

html {
  --scrollbarBG_purple: #e5e7e8;
  --thumbBG_purple: var(--purple);
}
.iCustScroll-purple{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_purple) var(--scrollbarBG_purple);
}
.iCustScroll-purple::-webkit-scrollbar{ width: 13px; height: 13px; }
.iCustScroll-purple::-webkit-scrollbar-track{ background: var(--scrollbarBG_purple); }
.iCustScroll-purple::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_purple);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG_purple);
  min-height: 100px;
}

html {
  --scrollbarBG_orange: #e5e7e8;
  --thumbBG_orange: var(--orange);
}
.iCustScroll-orange{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_orange) var(--scrollbarBG_orange);
}
.iCustScroll-orange::-webkit-scrollbar{ width: 13px; height: 13px; }
.iCustScroll-orange::-webkit-scrollbar-track{ background: var(--scrollbarBG_orange); }
.iCustScroll-orange::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_orange);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG_orange);
  min-height: 100px;
}

html {
  --scrollbarBG_secondary: #e5e7e8;
  --thumbBG_secondary: var(--secondary);
}
.iCustScroll-secondary{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_secondary) var(--scrollbarBG_secondary);
}
.iCustScroll-secondary::-webkit-scrollbar{ width: 13px; height: 13px; }
.iCustScroll-secondary::-webkit-scrollbar-track{ background: var(--scrollbarBG_secondary); }
.iCustScroll-secondary::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_secondary);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG_secondary);
  min-height: 100px;
}


html {
  --scrollbarBG_warning: #e5e7e8;
  --thumbBG_warning: var(--warning);
  --scrollbarMin_height : 100px;
}
.iCustScroll-warning{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_warning) var(--scrollbarBG_warning) !important;
}
.iCustScroll-warning::-webkit-scrollbar{ width: 13px; height: 13px; }
.iCustScroll-warning::-webkit-scrollbar-track{ background: var(--scrollbarBG_warning) !important; }
.iCustScroll-warning::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_warning) !important;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG_warning) !important;
  min-height: 100px;
}

html {
  --scrollbarBG_success: #e5e7e8;
  --thumbBG_success: var(--success);
}
.iCustScroll-success{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_success) var(--scrollbarBG_success);
}
.iCustScroll-success::-webkit-scrollbar{ width: 13px; height: 13px; }
.iCustScroll-success::-webkit-scrollbar-track{ background: var(--scrollbarBG_success); }
.iCustScroll-success::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_success);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG_success);
  min-height: 100px;
}

html {
  --scrollbarBG_dark: #e5e7e8;
  --thumbBG_dark: var(--dark);
}
.iCustScroll-dark{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG_dark) var(--scrollbarBG_dark);
}
.iCustScroll-dark::-webkit-scrollbar{ width: 13px; height: 13px; }
.iCustScroll-dark::-webkit-scrollbar-track{ background: var(--scrollbarBG_dark); }
.iCustScroll-dark::-webkit-scrollbar-thumb{
  background-color: var(--thumbBG_dark);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG_dark);
  /*min-height: 100px;*/
  min-height: var(--scrollbarMin_height, 100px);
}


.iCustScroll-dark2::-webkit-scrollbar {
  width: 10px;
}
.iCustScroll-dark2::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Handle */
.iCustScroll-dark2::-webkit-scrollbar-thumb {
  background: #888;
}
/* Handle on hover */
.iCustScroll-dark2::-webkit-scrollbar-thumb:hover {
  background: #555;
}


/* </editor-fold> */


.iSpin {
    -webkit-animation: fa-spin var(--iSspeed, 10s) infinite linear;
    animation: fa-spin var(--data-speed, 10s) infinite linear;
}

.iSpinByHover:hover >i {    /* to use it add to element: style="--iSspeed:5s; --iScolor:var(--success);" */
    -webkit-animation: fa-spin var(--iSspeed, 5s) infinite linear;
    animation: fa-spin var(--iSspeed, 5s) infinite linear;
    color: var(--iScolor, var(--white))!important;
}

/*Other flip: https://weekendprojects.dev/posts/5-flip-animation-css-examples/*/

.iFlipByHover:hover > i {
    color: var(--iFcolor, var(--white))!important;
    -webkit-animation-name: spinner; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: var(--iFspeed, 3s); 
    animation-name: spinner; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-duration: var(--iFspeed, 3s); 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d;
}
@-webkit-keyframes spinner {   /* WebKit and Opera browsers */ 
    from { -webkit-transform: rotateY(0deg); } 
    to { -webkit-transform: rotateY(-360deg); } 
} 
@keyframes spinner { /* all other browsers */ 
    from { -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } 
    to { -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); transform: rotateY(-360deg); } 
}


.cube_flip_flop_ud {    /* cube Up Down 1 time on hover */
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s; /* Animate the transform properties */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; /* <-NB */
}
/* rotation */
.cube_flip_flop_ud:hover {
  -webkit-transform: rotateX(89deg);
  transform: rotateX(89deg);
}
.cube_flip_flop_ud_flip {
  -webkit-transform: translateZ(50px);
  transform: translateZ(50px);
}
.cube_flip_flop_ud_flop {
  -webkit-transform: rotateX(-90deg) translateZ(-50px);
  transform: rotateX(-90deg) translateZ(-50px);
}


#myBottomnav{
  height: 0;
  bottom: 0px;
  overflow-x: hidden;
  z-index: 10;
}
#myBottomnav.trans{ transition: 0.5s; }
[dragbar-v="1"] { 
    cursor: row-resize; 
    transition: all 1s ease; 
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    top: -15px;
    width: 100%;
}
[dragbar-v="1"]:hover{ background-color: var(--warning) !important; }
[dragbar-v="1"] span { width: max-content; font-size: 13px; transition: all 1s ease; }
[dragbar-v="1"]:hover span { color: var(--primary) !important; }
[dragbar-v="1"]::before,
[dragbar-v="1"]::after {
  content: '';
  flex: 1;
  /*border-bottom: 5px solid blue;*/
}

[dragbar-v="1"]:not(:empty)::before {
  margin-right: 45vw; /* 50vm */
}

[dragbar-v="1"]:not(:empty)::after {
  margin-left: 44vw; /* 50vm */
}

/*  a DT CSS will not need in teh future */
#dragbar-v { 
    cursor: row-resize; 
    transition: all 1s ease; 
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    top: -15px;
    width: 100%;
}
#dragbar-v:hover{ background-color: var(--warning) !important; }
#dragbar-v span { width: max-content; font-size: 13px; transition: all 1s ease; }
#dragbar-v:hover span { color: var(--primary) !important; }
#dragbar-v::before,
#dragbar-v::after {
  content: '';
  flex: 1;
  /*border-bottom: 5px solid blue;*/
}

#dragbar-v:not(:empty)::before {
  margin-right: 45vw; /* 50vm */
}

#dragbar-v:not(:empty)::after {
  margin-left: 44vw; /* 50vm */
}
/*  a DT CSS will not need in teh future */

.po_updated_releseNotes.bs-popover-top>.arrow::after {
    border-top-color: black;
}


[class*="sideNav_01_L"]{ 
    min-width: var(--sn-width);
    max-width: var(--sn-width);
    background: var(--sn-bg);
    color: var(--sn-color);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
[class*="sideNav_01_L"].show {
/*.sideNav_01_L2.show {*/
    min-width: var(--sn-width);
    max-width: var(--sn-width);
    text-align: left; 
}
[class*="sideNav_01_L"].expand {
    min-width: var(--sn-width_expand);
    max-width: var(--sn-width_expand);
    text-align: left; 
}
.sideNav_01_L2{ 
    width: 0px;
    min-width: 0px;
    max-width: 0px;
}
[class*="sideNav_01_L"] .stayOnTop {
    background: var(--sn-bg);
}

[class*="sideNav_01_L"] .stayOnTop.sot_n2 {
    top : var(--sot-top);
}
[class*="sideNav_01_L"].expand .stayOnTop.sot_n2 {
    top : var(--sot-top_expand);
}

[class*="sideNav_01_L"] .nav-link .nl_inner{
    margin-left: -5px;  /* b/c border-left */
    text-align: center; 
}
[class*="sideNav_01_L"].expand .nav-link .nl_inner{
    padding-left: 15px;
    text-align: left;
}
[class*="sideNav_01_L"] .nav-link {
    width: 100%;
    height: var(--nl-height);
    padding: 10px 0;
    border-bottom: 1px solid black;
    border-left: 5px solid transparent;
    border-radius: 0;
    transition: all 0.5s;
}
[class*="sideNav_01_L"].expand .nav-link {
    height: var(--nl-height_expand);
}

[class*="sideNav_01_L"] .nav-link.active {
    background: 0 0;
    border-left: 5px solid var(--border-left) !important;
}
[class*="sideNav_01_L"] .nav-link:hover {
    background: var(--nl-hover_bg);
    color: var(--nl-hover_color)!important;
}

[class*="sideNav_01_L"] .sn_d_tgl_block {
    display: block;
}
[class*="sideNav_01_L"].expand .sn_d_tgl_block {
    display: inline;
}

[class*="sideNav_01_L"] .sn-d_expand{
    display: none;
}
[class*="sideNav_01_L"].expand .sn-d_expand{
    display: inherit;
    color: var(--sn-expTxt-col);
}


.navBs_item button{
    line-height: 15px; 
    background: 0 0;
    font-size: inherit;
}
.navBs_item:hover{
    background-color: var(--bs-secondary)!important;
}



/*.sideNav_01_L2 .sn-gr_inline_to_block{
    text-align: center;
}
.sideNav_01_L2.expand .sn-gr_inline_to_block{
    text-align: left;
}*/


/*.sideNav_01_L1 .sn_d_all_block {
    display: block;
}
.sideNav_01_L1.expand .sn_d_all_block {
    display: inline;
}*/

/*.sideNav_01_L1 ul.components {
    padding: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; 
    border-bottom: none 
}*/


/* <editor-fold defaultstate="collapsed" desc=" Sidebar "> */
#sidebar {
  min-width: 243px;
  max-width: 243px;
  background: #343a40;
  color: #fff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
  #sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center; } 
    #sidebar.active ul.components li {
      font-size: 14px; }
      #sidebar.active ul.components li a {
        padding: 10px 0; }
        #sidebar.active ul.components li a span {
          margin-right: 0;
          display: block;
          font-size: 24px; }
    #sidebar.active .logo {
      padding: 10px 0; }
    #sidebar.active .footer {
      display: none; }
  #sidebar .logo {
    display: block;
    color: #fff;
    font-weight: 900;
    padding: 10px 30px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }
    @media (prefers-reduced-motion: reduce) {
      #sidebar .logo {
        -webkit-transition: none;
        -o-transition: none;
        transition: none; } } 
  #sidebar ul.components {
    padding: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; 
    border-bottom: none }
    @media (prefers-reduced-motion: reduce) {
      #sidebar ul.components {
        -webkit-transition: none;
        -o-transition: none;
        transition: none; } } 
  #sidebar ul li {
    font-size: 16px; } 
    #sidebar ul li > ul {
      margin-left: 10px; }
      #sidebar ul li > ul li {
        font-size: 14px; }
    #sidebar ul li a {
      padding: 10px 10px 10px 20px;
      display: block;
      color: white;
      /*border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/ 
      border-bottom: 1px solid #dee2e6; 
    } 
    
    #sidebar ul li a .btnText{
        font-size: 16px !important; padding-top: 2px; line-height: 17px;
    }
    
    /*#sidebar ul li a.active { background-color: black; }*/
    
      #sidebar ul li a span {
        margin-right: 15px; } 
        @media (max-width: 991.98px) {
          #sidebar ul li a span {
            display: block; } }
      #sidebar ul li a:hover {
        color: var(--logo_color_main); }
    #sidebar ul li.active > a {
      background: transparent;
      color: #fff; } 
  @media (max-width: 991.98px) {
    #sidebar {
      min-width: 80px;
      max-width: 80px;
      text-align: center;
      margin-left: -80px !important; }
      #sidebar.active {
        margin-left: 0 !important; } }

a[data-toggle="collapse"] {
  position: relative; }

/*.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }*/

@media (max-width: 991.98px) {
  #sidebarCollapse span {
    display: none; } 
}

#sidebar.active i{display: block; text-align: center; width: 100%;}
#sidebar i{display: inline-block; width: 33px;}
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc=" Progress-line "> */
.progress-line, .progress-line:before {
  height: 10px;
  width: 100%;
  margin: 0;
}
.progress-line {
  background-color: #b3d4fc;
  display: -webkit-flex;
  display: flex;
  margin:20px 0;
}
.progress-line:before {
  background-color: #3f51b5;
  content: '';
  -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@-webkit-keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
@keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
/* </editor-fold> */


/* <editor-fold defaultstate="collapsed" desc=" Header "> */  
  .main-header {
    background: #222;
    background: linear-gradient(to bottom, #26364e, #16283e);
    height:70px;
    display:flex;
    justify-content:space-between;
  }
  /* Height auto when less than 992 */
  @media (max-width: 992px) {
    .main-header {
      /* height:auto; */
      padding: 0 50px 0 0;
      /* z-index:1031;One more than footer */
    }
  }

  /* Logo 
  ---------------------------------------------*/
  .main-logo {
      color: var(--logo_color_main);
      font-family: 'Days One',sans-serif;
      font-variant: small-caps;
      font-size:32px;
      text-decoration:none;
      line-height:68px;
      /*padding: 0 34px;*/
      height: 70px;
      background: rgba(0,0,0,.2);
      margin-right: 20px;
  }
  .main-logo:hover {
    color: var(--logo_color_main);
  }
  .main-logo .i_tx {
      color: var(--logo_color_i);
      font-family: 'Times New Roman';
      font-variant: normal;
      font-weight: bold;
  }
  @media (max-width: 992px) {
    .main-logo {
      display: inline-block;
      /*padding: 0 24px;*/
      font-size: 24px;
    }
  }

  /* Page Title Area
  ---------------------------------------------*/
  .page-title,
  .page-title.d-none {
    display: block!important;
    flex: 1;
  }
  .page-title * {
    color:#ddd;
    font-weight: normal;
    font-size:16px;
  }
  .page-title .breadcrumb-item.active {
    color:#fff;
  }
  .page-title h1 {
    color: #fff;
    font-size:18px;
    margin: 0;
    padding-top: 2px;
  }  
  @media (max-width: 550px) {
    .page-title,
    .page-title.d-none {
      /* display: none!important; */
    }
    #cusT {
      display: none!important;
    }
  }
  
  /* Page Title: Camera Review Page
  ---------------------------------------------*/
  #navbarTop_sysIndicators {
    display:flex;
    flex-direction:row;
    align-items: center;
  }
  #navbarTop_sysIndicators * {
    font-size:14px!important;
    line-height:1.4em;
    list-style:none;
  }
  #navbarTop_sysIndicators .nav-item {
    padding-right:20px;
  }
  /* Mobile */
  @media (max-width: 430px) {
    #navbarTop_sysIndicators {
      display:none;
    }
  }

  /* Page Title: System Manager
  ---------------------------------------------*/
  .page-title .devs {
    font-size: 12px;
    line-height: 1.6em;
    display: flex;
    align-items: center;
  }
  .page-title .devs * {
    font-size: 12px;
  }
  .page-title .devs #iOt_nCam,   .page-title .devs #iOt_nCam * {
    font-weight: bold;
    font-size:14px;
    color:#fff;
  }
  .page-title .devs .btn {
    white-space: nowrap;
  }
  .page-title .devs .left-text {
    margin-right:2vw;
  }
  @media (max-width: 1150px) {
    .page-title .devs .left-text {
      display:none;
    }
  }
  
  /* Bread Crumbs
  ---------------------------------------------*/
  .page-title .breadcrumb {
    margin: 0;
  }
  .page-title .rest > i,
  .page-title > i {
    margin-left: 0!important;
  }
  @media (max-width: 992px) {
    .page-title .breadcrumb * {
      font-size: 14px;
    }
  }
  @media (max-width: 575px) {
    .page-title .breadcrumb li {
      display:none;
    }
    .page-title .breadcrumb li:last-child {
      display:block;
      padding: 0;
    }
    .page-title .breadcrumb li:last-child::before {
      display:none;
    }
  }
  @media (max-width: 400px) {
    .page-title {
      display:none;
    }
  }

  /* Main Nav Container
  ---------------------------------------------*/
  #navTop_pTitle {
    display: block;
    flex: 0;
  }
  @media (max-width: 992px) {
    #navTop_pTitle  {
      display: no ne;
      position:absolute;
      max-width: calc(100% - 74px);
      height:100vh;
      overflow: hidden;
      top: 0;
      box-shadow: 0px 0px 15px rgba(0,0,0,.2);
      left: -236px;
      transition: left .3s ease-out;
      min-width: 236px;
    }
    #navTop_pTitle.show   {
      display: block;
      left: 0;
      z-index: 2;
    }
  }

  /* Main Nav 
  ---------------------------------------------*/
  #nav-menu_w .nav-item .nav-link  {
    color:#fff;
    font-size: 16px;
    padding: 0;
    line-height:70px;
    text-align: left;
  }
  #nav-menu_w .nav-item .nav-link > span {
    padding: 0 36px 0 20px;
  }
  #nav-menu_w .nav-item .nav-link:hover {
    background:rgba(0,0,0,.15);
    transition: background-color .2s;
  }
  #nav-menu_w .nav-item .nav-link.show  {
    background:#26364e;
  }
  #nav-menu_w .dropdown-toggle:after {
    position: absolute;
    top:32px;
    right: 18px;
  }
  /* Desktop */
  @media (min-width: 992px) {
    #nav-menu_w .nav-item:last-child .nav-link > span {
      padding-right: 38px;
    }
    #nav-menu_w .nav-item:last-child .dropdown-toggle:after {
      right: 22px;
    }
  }
  /* Mobile */
  @media (max-width: 992px) {
    #nav-menu_w {
      padding-right: 0;
    }
    #nav-menu_w .nav-item {
      border-bottom: 1px solid #000;
    }
    #nav-menu_w .nav-item .nav-link {
      line-height: 50px;
    }
    #nav-menu_w .dropdown-toggle:after {
      top: 22px;
    }
  }
  
  /* Main Nav Dropdwown
  ---------------------------------------------*/
  #nav-menu_w .dropdown-menu {
    margin: 0;
    border-radius: 0 0 8px 8px;
    border-top: 0;
    min-width:180px;
  }
  #nav-menu_w .dropdown-menu[data-bs-popper] {
    margin:0;
  }
  @media (max-width: 992px) {
    .dropdown-menu.iAnim {
      display: none;
    }
    .dropdown-menu.iAnim.show {
      display: block;
    }
    #nav-menu_w .dropdown-menu {
      border-radius: 0;
      border: none;
    }
  }

  /* Mobile SideBar (Imported)
  ---------------------------------------------*/
  #mobPmenu_w {
      height: auto!important;
  }

  /* Hamburger Button
  ---------------------------------------------*/
  #navTop_mobBtn  {
    position: absolute;
    top: 13px;
    right: 7px;
    display:none;
    border: none;
    outline: none;
  }
  #navTop_mobBtn:focus {
    box-shadow: none;
  }
  #navTop_mobBtn span {
    background-color:#fff!important;
    transition: none;
  }
  #navTop_mobBtn.active span {
    transition: all 300ms ease-out;
  }
  #navTop_mobBtn.active span:nth-child(2) {
    opacity: 0;
  }
  #navTop_mobBtn.active {
    position:fixed;
    height:100vh;
    width:100vw;
    background:rgba(0,0,0,.2);
    padding:0;
    margin:0;
    z-index:1;
    top: 0;
    right: 0;
    margin-right: 0px!important;
  }
  #navTop_mobBtn.active > div {
    position: absolute;
    top: 23px;
    right: 27px;
  }

  @media (max-width: 992px) {
    #navTop_mobBtn {
      display:block;
    }
  }
  
  
  
  /* Sidebar Nav for mobile
  ---------------------------------------------*/
  /*@media (max-width: 992px) {*/
/*    .sideNav_01_L1 {
      max-width: 100%;
      width: 100%;
    }
    .sideNav_01_L1 .nav-link {
      height: auto;
    }
    .sideNav_01_L1 .nav-link .nl_inner {
      text-align: left;
      padding: 0 20px;
    }
    .sideNav_01_L1 .nav-link .nl_inner i {
      margin-right: 4px;
    }*/
    /* Link Text */
/*    .sideNav_01_L1 .sn_d_tgl_block {
      display: inline-block;
    }*/
    /* Br, Open Btn,  */
/*    .sideNav_01_L1 br,
    .sideNav_01_L1 .sidebarCollapse  {
      display: none;
    }*/
  /*}*/
  
  
  
/* </editor-fold> */