BODY{
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
.form-label{
  color: black !important;
}
.bg-hill{
    background-image: url('/img/Background.webp');
    background-repeat: no-repeat;
    background-size: cover;
    height: 80vh;
  }
   /*toast b-toast-secondary show*/
.toast{
  z-index: 9999999999 !important;
}
/* ========================================================================
     Component: card highlight
 ========================================================================== */
 .actionCard.card{
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
padding: 14px 80px 18px 36px;
cursor: pointer;
}

.actionCard.card:hover{
   transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

/* ========================================================================
     Component: ribbon
 ========================================================================== */

  .wrapper { 
    position: relative;
    z-index: 90;  
  }
  
  .ribbon-wrapper-green {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
  }
  
  .ribbon-green {
    font: bold 15px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    background-color: #ff0000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ff0000)); 
    background-image: -webkit-linear-gradient(top, #ff0000, #ff0000); 
    background-image:    -moz-linear-gradient(top, #ff0000, #ff0000); 
    background-image:     -ms-linear-gradient(top, #ff0000, #ff0000); 
    background-image:      -o-linear-gradient(top, #ff0000, #ff0000); 
    color: #ffffff;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
    box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  }
  
  .ribbon-green:before, .ribbon-green:after {
    content: "";
    border-top:   3px solid #ffffff;   
    border-left:  3px solid transparent;
    border-right: 3px solid transparent;
    position:absolute;
    bottom: -3px;
  }
  
  .ribbon-green:before {
    left: 0;
  }
  .ribbon-green:after {
    right: 0;
  }
  
  
  .ribbon-wrapper-blue {
    width: 142px;
    height: 133px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
  }
  .ribbon-blue {
    font: bold 15px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -1px;
    top: 36px;
    width: 180px;
    background-color: #d3e9aa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d3e9aa), to(#8ea562)); 
    background-image: -webkit-linear-gradient(top,#d3e9aa, #8ea562); 
    background-image:    -moz-linear-gradient(top,#d3e9aa, #8ea562); 
    background-image:     -ms-linear-gradient(top, #d3e9aa, #8ea562); 
    background-image:      -o-linear-gradient(top, #d3e9aa, #8ea562); 
    color: red;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
    box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  }
  
  .ribbon-blue:before, .ribbon-blue:after {
    content: "";
    border-top:   3px solid #ffffff;   
    border-left:  3px solid transparent;
    border-right: 3px solid transparent;
    position:absolute;
    bottom: -3px;
  }
  
  .ribbon-blue:before {
    left: 0;
  }
  .ribbon-blue:after {
    right: 0;
  }
  


 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
  .wrapper{
    min-height: 150px;
  }
  .max-img-hight{
max-height: 150px;
max-width: 250px;
}
.max-img-hight-bix{
  max-height: 300px;
max-width: 250px;
}
table.vgt-table{
  font-size: 11px !important; 
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .wrapper{
    min-height: 150px;
  }
  .max-img-hight{
max-height: 150px;
max-width: 250px;
}
.max-img-hight-bix{
  max-height: 300px;
max-width: 250px;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .wrapper{
    min-height: 150px;
  }
  .max-img-hight{
max-height: 150px;
max-width: 250px;
}
.max-img-hight-bix{
  max-height: 300px;
max-width: 250px;
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 855px) {
  .wrapper{
    min-height: 250px;
  }
  .max-img-hight{
  max-height: 250px;
  max-width: 180px;
  }
  .max-img-hight-bix{
    max-height: 300px;
  max-width: 250px;
  }
}
  
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {.max-img-hight{
max-height: 250px;
max-width: 190px;
}
.max-img-hight-bix{
  max-height: 300px;
max-width: 250px;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {.max-img-hight{
max-height: 350px;
max-width: 250px;
}
.max-img-hight-bix{
  max-height: 300px;
max-width: 250px;
}
}   



.customer_grid>div:nth-child(odd) {
  background-color:rgba(0, 0, 0, 0.2)
}
.customer_grid>div:nth-child(even) {
  background-color: #fff;
}

/* ========================================================================
     Component: utils
 ========================================================================== */
.m0 {
  margin: 0 !important;
}

.ml0 {
  margin-left: 0 !important;
}

.mr0 {
  margin-right: 0 !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.m {
  margin: 10px !important;
}

.ml,
.mh {
  margin-left: 10px !important;
}

.mr,
.mh {
  margin-right: 10px !important;
}

.mt,
.mv {
  margin-top: 10px !important;
}

.mb,
.mv {
  margin-bottom: 10px !important;
}

.m-sm {
  margin: 5px !important;
}

.ml-sm,
.mh-sm {
  margin-left: 5px !important;
}

.mr-sm,
.mh-sm {
  margin-right: 5px !important;
}

.mt-sm,
.mv-sm {
  margin-top: 5px !important;
}

.mb-sm,
.mv-sm {
  margin-bottom: 5px !important;
}

.m-lg {
  margin: 15px !important;
}

.ml-lg,
.mh-lg {
  margin-left: 15px !important;
}

.mr-lg,
.mh-lg {
  margin-right: 15px !important;
}

.mt-lg,
.mv-lg {
  margin-top: 15px !important;
}

.mb-lg,
.mv-lg {
  margin-bottom: 15px !important;
}

.m-xl {
  margin: 30px !important;
}

.ml-xl {
  margin-left: 30px !important;
}

.mr-xl {
  margin-right: 30px !important;
}

.mt-xl {
  margin-top: 30px !important;
}

.mb-xl {
  margin-bottom: 30px !important;
}

.p0 {
  padding: 0 !important;
}

.pl0,
.ph0 {
  padding-left: 0 !important;
}

.pr0,
.ph0 {
  padding-right: 0 !important;
}

.pt0,
.pv0 {
  padding-top: 0 !important;
}

.pb0,
.pv0 {
  padding-bottom: 0 !important;
}

.p {
  padding: 10px !important;
}

.pl,
.ph {
  padding-left: 10px !important;
}

.pr,
.ph {
  padding-right: 10px !important;
}

.pt,
.pv {
  padding-top: 10px !important;
}

.pb,
.pv {
  padding-bottom: 10px !important;
}

.p-sm {
  padding: 5px !important;
}

.pl-sm,
.ph-sm {
  padding-left: 5px !important;
}

.pr-sm,
.ph-sm {
  padding-right: 5px !important;
}

.pt-sm,
.pv-sm {
  padding-top: 5px !important;
}

.pb-sm,
.pv-sm {
  padding-bottom: 5px !important;
}

.p-lg {
  padding: 15px !important;
}

.p-md {
  padding: 10px !important;
}

.pl-lg,
.ph-lg {
  padding-left: 15px !important;
}

.pr-lg,
.ph-lg {
  padding-right: 15px !important;
}

.pt-lg,
.pv-lg {
  padding-top: 15px !important;
}

.pb-lg,
.pv-lg {
  padding-bottom: 15px !important;
}

.p-xl {
  padding: 30px !important;
}

.pl-xl,
.ph-xl {
  padding-left: 30px !important;
}

.pr-xl,
.ph-xl {
  padding-right: 30px !important;
}

.pt-xl,
.pv-xl {
  padding-top: 30px !important;
}

.pb-xl,
.pv-xl {
  padding-bottom: 30px !important;
}

.b0 {
  border-width: 0 !important;
}

.bl0 {
  border-left-width: 0 !important;
}

.br0 {
  border-right-width: 0 !important;
}

.bt0 {
  border-top-width: 0 !important;
}

.bb0 {
  border-bottom-width: 0 !important;
}

.br,
.b,
.ba {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.bl,
.b,
.ba {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.bt,
.b,
.ba {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.bb,
.b,
.ba {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}