 @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
:root{
        --theme-color:#5664d2; 
        --theme-light-color:#c8cfff;
        --secondary-color:#6c757d;
    }

 body {
     font-family: 'Poppins', sans-serif;
     font-size:0.8rem;
 }
 .btn-theme-type1{
     color:#fff!important;
     background-color:var(--theme-color)!important;
     border-radius:28px!important;
     border-color:var(--theme-color)!important;
     border:1px solid!important;
     font-size:12px!important;
     box-shadow:none!important;
     outline:0px!important;
 }
 .btn-theme-type1:hover,
 .btn-theme-type1:focus{
     color:var(--theme-color)!important;
     background-color:#fff!important;
 }
    .btn-theme-type2{
        color:var(--theme-color)!important;
        background-color:#fff!important;
        border-radius:28px!important;
        font-size:10px!important;
        border-color:var(--theme-color)!important;
        font-size:12px!important;
        box-shadow:none!important;
        outline:0px!important; 
    }
    .btn-theme-type2:hover,
    .btn-theme-type2:focus{
         color:#fff!important;
        background-color:var(--theme-color)!important;
    }
  .btn-theme-type3{
     color:#fff!important;
     background-color:var(--secondary-color)!important;
     border-radius:28px!important;
     font-size:12px!important;
     box-shadow:none!important;
     border-color:var(--secondary-color)!important;
     border:1px solid!important;
     outline:0px!important;
 }
 .btn-theme-type3:hover,
 .btn-theme-type3:focus{
     color:var(--secondary-color)!important;
     background-color:#fff!important;
 }

 input[type='radio'] {
     -webkit-appearance: none;
     width: 15px;
     height: 15px;
     border: 1px solid #868686;
     border-radius: 50%;
     outline: none;

 }

 .claim_status_symbols {
     font-size: 12px;
 }

 input[type='radio'].approve:hover {
     cursor: pointer;
     box-shadow: 0 0 5px 0px var(--theme-color) inset;
 }

 input[type='radio'].financeApproved:hover {
     cursor: pointer;
     box-shadow: 0 0 5px 0px #a618ff inset;
     /*box-shadow: 0 0 5px 0px #008080 inset;*/
     /*    #00ff1f*/
 }

 input[type='radio'].paid:hover {
     cursor: pointer;
     box-shadow: 0 0 5px 0px #00ff1f inset;
     /*    #00ff1f*/
 }
  input[type='radio'].undo:hover {
      cursor: pointer;
     box-shadow: 0 0 5px 0px #000 inset;
     /*    #00ff1f*/
 }

 input[type='radio'].reject:hover {
     cursor: pointer;
     box-shadow: 0 0 5px 0px red inset;
 }
  input[type='radio'].permanentReject:hover {
     cursor: pointer;
     box-shadow: 0 0 5px 0px red inset;
 }

 input[type='radio']:before {
     content: '';
     display: block;
     width: 60%;
     height: 60%;
     margin: 20% auto;
     border-radius: 50%;
 }

 input[type='radio'].approve:checked {
     border: 1px solid var(--theme-color);
 }

 input[type='radio'].approve:checked ~ label {
     color: var(--theme-color);
 }

 input[type='radio'].approve:checked:before {
     background: var(--theme-color);

 }

 input[type='radio'].paid:checked {
     border: 1px solid #00ff1f;
 }

 input[type='radio'].paid:checked ~ label {
     color: #00ff1f;
 }

 input[type='radio'].paid:checked:before {
     background: #00ff1f;

 }
 
 input[type='radio'].undo:checked {
     border: 1px solid #000;
 }

 input[type='radio'].undo:checked ~ label {
     color: #000;
 }

 input[type='radio'].undo:checked:before {
     background: #000;

 }

 input[type='radio'].financeApproved:checked:before {
     /*background: #008080;*/
     background: #a618ff;
 }

 input[type='radio'].financeApproved:checked ~ label {
     /*color: #008080;*/
      color: #a618ff;
 }

 input[type='radio'].financeApproved:checked {
     /*border: 1px solid #008080;*/
     border: 1px solid #a618ff;
 }

 input[type='radio'].reject:checked:before {
     background: red;
 }
  input[type='radio'].permanentReject:checked:before {
     background: red;
 }

 input[type='radio'].reject:checked ~ label {
     color: red;
 }
 input[type='radio'].permanentReject:checked ~ label {
      color: red;
 }

 input[type='radio'].reject:checked {
     border: 1px solid red;
 }
  input[type='radio'].permanentReject:checked {
     border: 1px solid red;
 }


 #search.btn,
 .btn-color {
     color: #fff;
     background-color: var(--theme-color);
     border-color: var(--theme-color);
 }

 #search:hover,
 #search:active,
 #search:focus,
 .btn-color:hover,
 .btn-color:active,
 .btn-color:focus {
     color: #fff;
     background-color: #000;
     border-color: #000;

 }

 #search.btn:focus,
 .btn-color.btn:focus {
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(3, 3, 3, 0.25);
 }


 .logoimg {
     /*width: 58%;*/
     width:150px;
 }

 .navbar-brand {
     padding-left: 20px;
 }

 img.loggedUser {
     width: 50px;
     height: 50px;
 }

 .col-md-2.image {

     display: flex;
     align-items: center;
 }

 #popoverInfobtn {
     font-size: 12px;
 }

 form label {
     font-size: 11px;
     font-weight: bold;
     text-transform: capitalize;
     cursor: pointer;
 }

 td .text-success {
     color: #00ff1f !important;
 }

 td .text-dark {
     color: #00050a !important;
 }

 td .text-warning {
     color: #ffc107 !important;
 }

 td .text-danger {
     color: #ff1e07 !important;
 }

 .text-violate {
     /*color: #008080;*/
     color: #a618ff;
 }

 form .btn.reportEditCls {
     background: rgb(0, 0, 0);
     border-color: #000;
     color: white;
     display: none;
 }

 form .btn.reportEditCls:focus {
     box-shadow: 0 0 0 0.2rem rgb(0 0 0 / 50%);
 }

 .position-sticky {
     top: 0;
     background: #fff;
 }

 .table td {
     padding: 0.25rem 0;
     vertical-align: middle !important;
     font-size: 10px;
     text-align: center;
 }

 .table tr:first-child td {
     border: 0;
 }

 .table th {
     vertical-align: middle !important;
     font-size: 10px;
     padding: 0.55rem;
     text-align: center;
 }

 .undoClaimReportTd i {
     transform: scaleX(-1) ROTATE(180DEG);
     font-size: 19px;
 }

 .undoClaimReportTd:hover {
     cursor: pointer;
 }

 .table-row {
     /*margin-top: 5%;*/
     margin-top: 63px;
 }

 #search {

     margin-top: 13px;
 }

 .table {
     width: 100%;
     text-align: center;
     border-collapse: separate;
     /* Don't collapse */
     border-spacing: 0;
     min-width: 100vw;
 }


 .table img {
     width: 150px;
     height: 150px;
 }

 .table td.selfyimg {
     cursor: pointer;
     height: 41.5px;
 }

 .table td.selfyimg img {
     width: 32px;
     object-fit: cover;
     height: 32px;
     border-radius: 100%;

 }

 .table td.selfyimg:hover > img {
     border-radius: 0;
     position: absolute;
     margin-top: -9%;
     z-index: 10;
     left: 12%;
     width: 250px;
     height: 250px;
     object-fit: contain;
     object-position: top;
 }



 .table td p {
     margin: 0px;
     font-weight: 700;
     text-align: left;
 }

 .table form.reportSubmittingForm p {
     margin: 0px;
     max-width: 242px;
     max-height: 29px;
     overflow: auto;
 }

 .table .Buttonclosed:hover {
     color: green;
     cursor: pointer;
     text-decoration: underline;
 }

/* .table .ButtonOpen {
     color: red; //reportSubmittingForm reportTd 
     cursor: pointer;
 } */
.table .billImageProofDropdownBtn[data-btnstatus="ButtonOpen"] {
     color: red;
     cursor: pointer;
 }


 .table thead th {
     position: sticky;
     top: 0;
     background-color: white;
     z-index: 10;
         padding: 2px;

 }

 .table tr.secRow th {
     background: white;
     position: sticky;
     top:21.4px;
     /*top: 20.9px;*/
     /*top: 39.9px;*/

 }

 .table-scroll {
     position: relative;
     width: 100%;
     z-index: 1;
     margin: auto;
     padding: 0;
     overflow: auto;
     /*height: 80.6vh;*/
     /*height:82.4vh;*/
     height:100%;
 }

 .table-scroll .sticky-column:hover {
     z-index: 12
 }

 .table-scroll .sticky-column {
     position: sticky;

     background: white;
 }

 .table-scroll .sticky-column.col1 {
     left: 0
 }

 .table-scroll .sticky-column.col2 {
     left: 42px
 }

 .table-scroll .sticky-column.col3 {
     left: 94px
 }

 /*left: 108px;*/
 .table-scroll .sticky-column.col4 {
     left: 150.7px;
     /* border-right: 1px solid #e0e4e8;*/
 }

 /*left: 183px;*/

 .table-scroll th.sticky-column {
     z-index: 15;
 }

    .table-scroll th.sticky-column.col4{
            padding: 0px 12.2px!important;
    }
 .imgProfbtns {
     font-size:10px!important;
     border: 0;
     box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
     background: #e3edf7;
     padding: 4px 15px;
 }

 .imgProfbtns:hover,
 .imgProfbtns:focus,
 .imgProfbtns:active {

     box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
         inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px rgba(255, 255, 255, 1),
         0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
         0px 12px 10px -10px rgba(0, 0, 0, 0.05);

 }

 .img-zoom-container input {
     background: transparent;
     border: none;
 }

 .headers {
     padding-top: 12px;
 }

 #nodata {
     display: none;
 }
 #grandTotal_popTableDiv tr {
    border: 0.4px solid #00000020;
}
 #grandTotal_popTableDiv th {
    padding:5px;
}

 .popover-body {

     background: var(--theme-light-color);
     border-radius: 4px;
 }
 .popover-body .form-control.danger:focus{
    box-shadow: 0 0 0 0.2rem rgb(255 1 1 / 50%);

 }
 
 .popover-body i.fas.fa-times{
     cursor:pointer;
 }
 span.reason_wordCount_danger{
     color: red;
 }

 .popoverbtn {
     background: #414542;
     border: none;
     border-radius: 3px;
     margin-top: 10px;
     padding: 5px 15px;
     color: #fff;
 }



 /*    image zoom*/
 .img-zoom-container {
     position: relative;
     width: 183px;
 }

 .img-zoom-lens {
     position: absolute;
     border: 1px solid #d4d4d4;
     /*set the size of the lens:*/
     width: 80px;
     height: 80px;
 }

 .img-zoom-result {
     border: 1px solid #d4d4d4;
     /*set the size of the result div:*/
     width: 325px;
     height: 325px;
 }

 #myresult {
     position: fixed;
     top: 0;

     visibility: hidden;
     z-index: 30;
     border: 9px solid rgb(255, 255, 255);
     margin: 14px;
     box-shadow: rgba(0, 0, 0, 0.45) 1px 1px 4px 2px;
 }

 .BillTitle {
     width: 150px;
     overflow-x: auto;
     max-height: 32px;

 }
.FAKE_GPS_USED {
    background: #fff685!important;
}
 #main_tableTag tr:last-child > td {
     border-top: 1px solid #dee2e6 !important;
 }

 .navbar-light .navbar-nav .nav-link {
     color: #000;
     font-size: 14px;
 }

 .navbar-light .navbar-nav .nav-link:focus,
 .navbar-light .navbar-nav .nav-link:hover {
     color: var(--theme-color);
 }

 .navbar-light .navbar-nav .nav-link.active {
     color: var(--theme-color);
     box-shadow: 0px 1px 0px 0px #5664d24f;
    text-align: center;
     /*padding: 0;*/
 }
 .bg-voilate{
     background-color:#a618ff;
     
 }
 .bg-paid-color{
     background-color:#00ff1f;
 }

 .navbar-light .navbar-nav .nav-link.inactive {
     color: #000;
     padding: 0;
 }
th div.resizableDiv{
    resize: horizontal;
    overflow: auto;
}
/*---------------------------------------Side nav bar css-------------------------*/
     .countIcons_div .countIconTag{
         cursor:pointer;
     }
     #notAtClaimIcon_count.countIconTag.active{
         box-shadow: 0px 0px 7px 1px #6c757d;
     }
     #pendingIcon_count.countIconTag.active{
         box-shadow: 0px 0px 7px 1px #ffc107;
     }
    #tlApproveIcon_count.countIconTag.active{
         box-shadow: 0px 0px 7px 1px var(--theme-color);
     }
    #rejectIcon_count.countIconTag.active{
         box-shadow: 0px 0px 7px 1px #dc3545;
     }
    #finApprovedIcon_count.countIconTag.active{
         box-shadow: 0px 0px 7px 1px #a618ff;
     }
    #paidIcon_count.countIconTag.active{
         box-shadow: 0px 0px 7px 1px #00ff1f;
     }
     
     .localSearchNameEmpCircle .circleDropDown{
         width: 30%;
        padding: 0;
     }
/*---------------------------end---------------------*/
























 /* The Modal (background) */
 .imageFullViewModal {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 1000;
     /* Sit on top */
     padding-top: 100px;
     /* Location of the box */
     left: 0;
     text-align: center;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.9);
     /* Black w/ opacity */
 }

.opacity-25{
    opacity:0.5;
}
 .imageFullViewModal img {
     height: 700px;
 }

 /* Modal Content (image) */
 .imageFullViewModal .imageModalcontent {
     margin: auto;
     display: block;
     width: 80%;
     max-width: 700px;
 }

 /* Caption of Modal Image */
 .imageFullViewModal #fullImageBillAmount {
     text-align: center;
     color: #ccc;
     height: 45px;
 }

 .imageFullViewModal #fullImageBillTitle {
     text-align: center;
     color: #ccc;
     padding: 10px 0;
     height: 10px;
 }

 /* Add Animation */

 .imageFullViewModal #fullImageBillTitle,
 .imageFullViewModal #fullImageBillAmount,
 .imageFullViewModal .imageModelContent {
     -webkit-animation-name: fullview;
     -webkit-animation-duration: 0.6s;
     animation-name: fullview;
     animation-duration: 0.6s;
 }

 @-webkit-keyframes fullview {
     from {
         -webkit-transform: scale(0)
     }

     to {
         -webkit-transform: scale(1)
     }
 }

 @keyframes fullview {
     from {
         transform: scale(0)
     }

     to {
         transform: scale(1)
     }
 }

 /* The Close Button */
 .fullImageModelclose {
    padding: 0px 12.5px;
    border-radius: 43px;
    position: fixed;
    top: 15px;
    right: 100px;
    color: #ff0000;
    background: #fff;
    font-size: 29px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 100;
 }

 .fullImageModelclose:hover,
 .fullImageModelclose:focus {
     color: #bbb;
     text-decoration: none;
     cursor: pointer;
 }

 #fullImageBillTitle {
     margin: auto;
     display: block;
     width: 80%;
     max-width: 700px;
     text-align: center;
     color: #ccc;
     padding: 10px 0;
     height: 150px;
 }

 .page-link:focus {
     box-shadow: none;
     border: 1px solid #000;
 }
    .fa.fa-directions{font-size: 23px;
    color: var(--theme-color);}
    
    
    
    /*loading page*/
    
     .loading-page {
            display: flex;
            background: #000000a1;
            z-index: 10000;
        }
    .loading-page section {
       width: 200px;
       height: 146px;
       margin: auto;
        }

    .loading-page div {
        position: relative;
            background: #fff;
            display: grid;
            border-radius: 11px;
            box-shadow: 3px 5px 6px 1px #4d5965;
        }

    .loading-page div i {
            font-size: 60px;
            color: #0062cc;
        }
    p.loading-content{
        font-size: 12px;
    position: absolute;
    bottom: 20px;
    left: 20%;
    }
/*-------side nav-bar scrollbar css-----*/
   .empInfoCards::-webkit-scrollbar {
    width: 5px;
    height: 5px;
   }
   
    /* Track */
    .empInfoCards::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px #bdbbbba3; 
      border-radius: 10px;
    }
     
    /* Handle */
    .empInfoCards::-webkit-scrollbar-thumb {
      background: var(--theme-color); 
      border-radius: 10px;
    }
    
    /* Handle on hover */
    .empInfoCards::-webkit-scrollbar-thumb:hover {
      background: var(--theme-color); 
    }
/*----------------------------------*/

.transferClaimBtn i{
        font-size: 13px;
}

.transferClaimBtn i:hover{
    color:red;
}
.transferClaimBtn:focus{
box-shadow:none;
}
.claimTransferModalpopup .modal-body{
    font-size:13px;
}
.claimTransferModalpopup table th, .claimTransferModalpopup .modal-header h5{
    font-weight:600;
}
.claimTransferModalpopup table th,
.claimTransferModalpopup table td{
        padding-bottom: 4px;
}
.claimTransferModalpopup table td{
        padding-left: 25px;
}
.claimTransferModalpopup table tr input{
    background: #fff;
    border: 0;
    outline:0;
}
#ui-datepicker-div{
    z-index:50!important;
}


/*sideNavBarMain css*/
.empInfoCards .transferFortNightClaimBtn{
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 11px;
    display:none;
    box-shadow:none;
}

.empInfoCards .transferFortNightClaimBtn .fa-share-square{
        
    vertical-align: top;
}

 /*    media query*/
/*@media (max-width:1341px) and (min-width:768px){*/
@media (max-width:1341px) and (min-width:1101px){
     .sideNavBar{
        font-size:8.5px!important;
    }
     .navbar-light .navbar-nav .nav-link {
         font-size:13px!important;
        }
    .navbar-brand.image .logoimg{
          /*width: 61%;*/
          width: 120px;
    }
    #displayDateText {
        font-size:10px!important;
    }
    #displayDateText input{
        font-size:8px!important;
    }
    .table #inserted_tableBody_data td {
        font-size:9px;
    }
    #SearchInputFortNight_form{
        margin-top:3px!important;
    }
    .empInfoCards{
        height:82.2%!important;
    }
    .btn-theme-type1,
    .btn-theme-type2,
    .btn-theme-type3{
        font-size:10px!important;
    }
    #DownloadExcelModal .form-control,
     #navbarSupportedContent .dropdown-menu .dropdown-item{
        font-size:12px!important;
    }
    .claim_status_symbols{
        font-size:11px!important;
    }
}
 @media (max-width:991px) {

     .navbar-collapse.collapse.show a.nav-link {
         padding-bottom: 10px;
     }
     #searchClaimForm{
         width: 100%!important;
         justify-content: left!important;
     }
     #searchClaimForm .formDiv {
         margin: 0 !important;
         margin-bottom: 18px !important;
             width: 58%!important;
             text-align:left!important;
     }
     div.info_btn.dropleft{
         width:100%;
     }
      div.info_btn.dropleft button{
           background-color: #15a4dd!important;
    color: #fff;
      }
      div.info_btn.dropleft button i.fa.fa-ellipsis-v{
         display:none;
     }
     div.info_btn.dropleft button span.info{
         display:block!important;
     }
     #displayDateText {
       /*  top: 79% !important;*/
       text-align: left!important;
           margin-bottom: 10px;
           right: unset;
     }

     .dropleft .dropdown-menu {
         top: 74%;
         right: auto;
     }
     .navbar-brand.image .logoimg{
          /*width: 61%;*/
          width: 150px;
          margin: 3px 0px;
     }
     #displayDateText input{
             display: inline-block;
     }
    #sideNavBarMain{
        width: 30vw; 
     }

 }

 @media (max-width:576px) {
     #searchClaimForm .formDiv {
         display: flex;
     }
     #searchClaimForm .formDiv input{
         width:100%;
     }
      .navbar-brand.image .logoimg{
         /*width: 100%;*/
         width:150px;
     }
     
     #sideNavBarMain{
        width: 50vw; 
     }

 }
 
@media (max-width:1100px) and (min-width:400px) {
      /*#SearchInputFortNight_form {*/
            
      /*  }*/
      
       #SearchInputFortNight_form{
        margin-top:3px!important;
    }
    .empInfoCards{
        height:82.2%!important;
    }
        #DownloadExcelModal .form-control,
     #navbarSupportedContent .dropdown-menu .dropdown-item{
        font-size:9px!important;
    }
       .navbar-brand.image .logoimg{
          /*width: 61%;*/
          width: 110px;
    }
        .btn-theme-type1,
        .btn-theme-type2,
        .btn-theme-type3{
            font-size:9px!important;
        }
        #sideNavBarMain select,
        #sideNavBarMain input{
            height:25px!important;
            font-size:7px!important;
        }
        .table #inserted_tableBody_data td {
            font-size:8px;
        }
        .navbar-light .navbar-nav .nav-link {
         font-size:11px!important;
        }
        .sideNavBar{
            font-size:7.3px!important;
         }
         .countIcons_div .countIconTag{
             font-size:6px!important;
         } 
         #displayDateText {
        font-size:8px!important;
        }
        #displayDateText input{
            font-size:7px!important;
        }
      #searchEmpId{
          font-size: 8px!important;
      }
      #searchSubmitButton i{
          font-size:9px!important;
      }
      .dropleft.info_btn button{
          font-size:9px!important;
          margin-left:5px!important;
          padding:4px!important;
      }
      #searchClaimForm div.formDiv{
          
          margin-top:0px!important;
      }
      #sideNavBarMain .searchEmployeeInfo {
          padding: 0!important;
          display:contents;
      }
      #opensidenavMain{
          padding: 0px 10px !important;
      }
    .claim_status_symbols{
        font-size:11px!important;
    }
      
  }
  
  
  /*----------------------------------------boostrap 5 placeholder (shimmer loading)-----------------------------------------------------*/
         .form-control::-moz-placeholder {
	color: #6c757d;
	opacity: 1
}

.form-control::placeholder {
	color: #6c757d;
	opacity: 1
}

.form-control::-moz-placeholder {
	color: transparent
}

.form-floating > .form-control::placeholder {
	color: transparent
}

.form-floating > .form-control:not(:-moz-placeholder-shown) {
	padding-top: 1.625rem;
	padding-bottom: .625rem
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
	padding-top: 1.625rem;
	padding-bottom: .625rem
}

.form-floating > .form-control:-webkit-autofill {
	padding-top: 1.625rem;
	padding-bottom: .625rem
}

.form-floating > .form-select {
	padding-top: 1.625rem;
	padding-bottom: .625rem
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
	opacity: .65;
	transform: scale(.85) translateY(-.5rem) translateX(.15rem)
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
	opacity: .65;
	transform: scale(.85) translateY(-.5rem) translateX(.15rem)
}

.placeholder {
	display: inline-block;
	min-height: 1em;
	vertical-align: middle;
	cursor: wait;
	background-color: currentColor;
	opacity: .5;
	border-radius:3px;
}

.placeholder.btn::before {
	display: inline-block;
	content: ""
}

.placeholder-xs {
	min-height: .6em
}

.placeholder-sm {
	min-height: .8em
}

.placeholder-lg {
	min-height: 1.2em
}

.placeholder-glow .placeholder {
	-webkit-animation: placeholder-glow 2s ease-in-out infinite;
	animation: placeholder-glow 2s ease-in-out infinite
	border-radius: 2px;
}

@-webkit-keyframes placeholder-glow {
	50% {
		opacity: .2
	}
}

@keyframes placeholder-glow {
	50% {
		opacity: .2
	}
}

.placeholder-wave {
	-webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
	mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
	-webkit-mask-size: 200% 100%;
	mask-size: 200% 100%;
	-webkit-animation: placeholder-wave 2s linear infinite;
	animation: placeholder-wave 2s linear infinite
}

@-webkit-keyframes placeholder-wave {
	100% {
		-webkit-mask-position: -200% 0%;
		mask-position: -200% 0%
	}
}

@keyframes placeholder-wave {
	100% {
		-webkit-mask-position: -200% 0%;
		mask-position: -200% 0%
	}
}

         /*---------end-----------------------------*/
