@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

 body {
     font-family: 'Poppins', sans-serif;
 }

 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 #007bff inset;
 }

 input[type='radio'].financeApproved:hover {
     cursor: pointer;
     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']:before {
     content: '';
     display: block;
     width: 60%;
     height: 60%;
     margin: 20% auto;
     border-radius: 50%;
 }

 input[type='radio'].approve:checked {
     border: 1px solid #007bff;
 }

 input[type='radio'].approve:checked ~ label {
     color: #007bff;
 }

 input[type='radio'].approve:checked:before {
     background: #007bff;

 }

 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;
 }

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

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

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

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

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


 #search.btn,
 .btn-color {
     color: #fff;
     background-color: #0ba0dc;
     border-color: #0ba0dc;
 }

 #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;
 }

 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: 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;
 }

 .imgProfbtns {
     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 20px;
 }

 .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 #00000012;
}
 #grandTotal_popTableDiv th {
    padding:5px;
}

 .popover-body {

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

 }
 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;

 }

 #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: rgb(0 158 219);
 }

 .navbar-light .navbar-nav .nav-link.active {
     color: #009edb;
     /*padding: 0;*/
 }

 .navbar-light .navbar-nav .nav-link.inactive {
     color: #000;
     padding: 0;
 }
th div.resizableDiv{
    resize: horizontal;
    overflow: auto;
}




























 /* 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 */
 }

 .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: #007ed7;}
    
    
    
    /*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;
   }
   
    /* Track */
    .empInfoCards::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px #bdbbbba3; 
      border-radius: 10px;
    }
     
    /* Handle */
    .empInfoCards::-webkit-scrollbar-thumb {
      background: #009edb; 
      border-radius: 10px;
    }
    
    /* Handle on hover */
    .empInfoCards::-webkit-scrollbar-thumb:hover {
      background: #009edb; 
    }
/*----------------------------------*/



 /*    media query*/

 @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-height:707px) {*/
      
      
      
  /*}*/