.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.captcha-img>img{
   /* max-height: 70px; */
}
.capthca-refresh{
   font-size: 47px;
   color: var(--color-primary); 
   align-content: center;        
}
.capthca-refresh:hover{
   color: var(--color-primary-hover);         
}
.border-dark1{
   border-color: #bbb !important;
}
.loader{
   /* display: none; */
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(4px);
   z-index: 111;
}
.loader>svg{
   position: absolute;
   left: 50%;
   top: 50vh
}


.section-title .title-icon span {
   position: relative;
}

.section-title .title-icon span::before {
   left: -44px;
}

.section-title .title-icon span::before, .section-title .title-icon span::after {
   content: "";
   display: block;
   width: 35px;
   height: 1px;
   position: absolute;
   top: 50%;
   margin-top: -1px;
   background-color: #ddd;
}

.section-title .title-icon span::after {
   right: -44px;
}

.section-title .title-icon span::before, .section-title .title-icon span::after {
   content: "";
   display: block;
   width: 35px;
   height: 1px;
   position: absolute;
   top: 50%;
   margin-top: -1px;
   background-color: #ddd;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.info-button, .search-button{
   /* max-width: fit-content; */
}

.search-button{
   background-color: var(--color-primary);
   border: 1px solid var(--color-primary);
   color: #fff;
}

.search-button:hover,.search-button:active{
   background-color: var(--color-primary-hover);
   border: 1px solid var(--color-primary-hover);
   color: #fff;
}



.card-header {
   padding: .75rem 1.25rem;
   margin-bottom: 0;
   background-color: rgba(0,0,0,0.1);
   /*border: 1px solid rgba(0,0,0,.125) !important;*/
   border: 1px solid #bbb !important;
   border-radius: .25rem;

   /*box-shadow: 0 27px 24px 0 rgba(0,0,0,.2), 0 40px 77px 0 rgba(0,0,0,.22);*/
   /*box-shadow: 0 0px 5px 0 rgba(0,0,0,.2), 0 20px 77px 0 rgba(0,0,0,.22), inset 0 0px 20px rgba(255, 255, 255, 1) !important*/
}

/********************/
/* STATUS */
/********************/
.steapper-custom{
   position: relative;
}
.steapper-custom .circle{
   color: #fff;
   -webkit-border-radius: 50%;
   border: 4px solid #b6b8b7;
   border-radius: 50%;
   background: rgb(134, 135, 134);
   width: 32px !important;
   height: 32px !important;
   text-align: center;
   line-height: 1.5rem;
   margin: 0px;
   padding: 0px !important;
   font-family: 'Oswald' !important;
   font-size: 10px;
}



.steapper-custom::after{
   content: "";
   position: absolute;
   width: 4px;
   height: 100%;
   left: 22px;
   top: 0px;
   background-color: #b6b8b7;
   z-index:-1;
}

.steapper-custom:last-child::after{
   height: 50%;
   top: 0;
}
.steapper-custom:first-child::after{
   height: 50%;
   top: 50%;
}

.steapper-custom .handing, 
.steapper-custom .delivery{
   background: #127e1b;
}
.steapper-custom .out{
   background: #b0b315;
}
.steapper-custom .in{
   background: #b0b315;
}
.steapper-custom .current{
   background: #0f96cc;
   /* border-color: #0f96cc; */
}
.steapper-custom .reg,
.steapper-custom .receipt
{
   background: #0f96cc;
}
.steapper-custom .nodelivery, 
.steapper-custom .handingfail, 
.steapper-custom .nohanding, 
.steapper-custom .exterminate{
   background: #dc3c36;
}
/********************/
/* STATUS */
/********************/

.bar{
   font-size: 14px;
   font-weight: 600;
   background: rgba(70, 70, 70, 0.1);
   padding: 4px 6px;
   border: 1px solid rgb(113, 108, 108);
   border-radius: 1px;
   margin: 0px 4px;
}

.event-li{
  position: relative; 
  /* min-height: 100px !important; */
  z-index: 1;
}

.ref:not(:last-child)::after{
   font-family: FontAwesome;
   content: "\f021"
}

.h-title {
   font-family: 'Oswald' !important; 
   text-transform: uppercase;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 1) !important;
  font-size: 18px;
}

.hr-shadow {
   position: relative;
}
.hr-shadow::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 90px;
   top: 100%;
   left: 0;
   background: url(../img/content_block_slash.png) 50% -84px no-repeat;
   background-size: 90%;
   z-index: 0;
}



.line_top{
   background: url(../img/line-top.png) 0px 0px repeat-x;
   height: 7px;
   margin-top: 1rem;
}
.line_cont {
   background: #eeeff0;
   min-height: 100px;
   text-align: center;
   padding-bottom: 16px;
   padding-top: 16px;
}
.line_cont  hr {
   border-top: 2px solid #2bbbad;
   width: 10%;
}
.line_btm {
   background: url(../img/line_btm.png) 0px 0px repeat-x;
   height: 11px;
   margin-bottom: 18px;
}