@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 {
     box-shadow: 0 0 5px 0px #007bff inset;
 }

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

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

 input[type='radio'].reject:hover {
     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'].financeApproved:checked:before {
     background: #4b0082;
 }

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

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

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

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

 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: #4b0082;
}

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

 #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 td.reportTd 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;
     cursor: pointer;
 }


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

 }

 .table tr.secRow th {
     background: white;
     position: sticky;
     top: 50px;

 }

 .table-scroll {
     position: relative;
     width: 100%;
     z-index: 1;
     margin: auto;
     padding: 0;
 }

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

 .popover-body {

     background: aliceblue;
     border-radius: 4px;
 }

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

 /*    media query*/

 @media screen and (max-width: 990px) {
     /*
        .searchicon {
            margin-right: 0px;
            margin-left: 14px !important;
        }

        .input-grop.W-50 {
            width: 77% !important;
        }
*/
 }

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

 }

 tr:last-child > td {
     border-top: 1px solid #dee2e6 !important;
 }

 .navbar-light .navbar-nav .nav-link {
     color: #000;
 }

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





























 /* 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 {
     position: fixed;
     top: 15px;
     right: 100px;
     color: #ffffff;
     font-size: 40px;
     font-weight: bold;
     transition: 0.3s;
 }

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