@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

html, body {
     height: 100%;
}

body {
     padding: 0;
     background-color: #fff;
     font-family: 'Open Sans', sans-serif;
     height: 100%;
     width: 100%;
     margin: 0;
     font-size: 14px;
     color: #000;
}

input {
     font-size: 18px;
     transform: scale(1.005);
     transform-origin: left center;
}

p {
     margin-bottom: .4rem;
}

body.fancybox-active {
     position: static !important;
     overflow: visible !important;
}
.fancybox-navigation {
     display: none !important;
}

.hit_100 {
     height: 100%;
     overflow-y: auto;
}

.btn-success {
     --bs-btn-color: #ffffff;
     --bs-btn-bg: #95bb2c;
     --bs-btn-border-color: #5fa626;
     --bs-btn-hover-color: #fff;
     --bs-btn-hover-bg: #6aa922;
     --bs-btn-hover-border-color: #5fa626;
     --bs-btn-focus-shadow-rgb: 60, 153, 110;
     --bs-btn-active-color: #fff;
     --bs-btn-active-bg: #6aa922;
     --bs-btn-active-border-color: #5fa626;
     --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     --bs-btn-disabled-color: #fff;
     --bs-btn-disabled-bg: #517931;
     --bs-btn-disabled-border-color: #365320;
}

.form-check-input[type=radio],  {
     border: 1px solid #979797;
     width: 1.2em;
     height: 1.2em;
     margin-left: -1.6em;
     margin-top: .2em;
}
.form-check-input[type=checkbox], .form-check-input[type=radio] {
     border: 1px solid #979797;
}
img.top_logo {
     max-width: 160px;
}

.login_refeel_detl {
     width: 100%;
     height: 100%;
     background-color: #f7f7f7;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: auto;
}

.login_refeel_area {
     width: 50vh;
     /* min-height: 10vh; */
     background-color: #fff;
     border-radius: 15px;
     padding: 2rem;
     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.login_refeel_logo {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     margin-bottom: 15px;
}

     .login_refeel_logo .login_logo {
          max-width: 150px;
     }


.search_detl {
     width: 100%;
     height: 100%;
     /* background-color: #f7f7f7; */
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: auto;
}

     .search_detl h3.search_heading {
          font-family: "Lobster", sans-serif;
          font-weight: 400;
          font-style: normal;
          text-align: center;
          margin-bottom: 10px;
          font-size: 5vh;
     }

.search_area {
     width: 60vh;
     /* min-height: 10vh; */
     /* background-color: #fff;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
}

.search_area .comp_name {
     text-align: center;
     /*text-decoration: underline;*/
     font-size: 16px;
     font-weight: bold;
}

     .trophy_search_area {
          position: relative;
          /* width: 40vh; */
     }

.search_area .trophy_search_area .form-control {
     border: 1px solid #adadad;
     padding: .5rem 45px .5rem 1rem;
}

.search_area .trophy_search_area .input-icon {
     position: absolute;
     top: 0;
     right: 0;
     font-size: 18px;
     background-color: #95bb2c;
     color: #fff;
     border-radius: 53px;
     width: 35px;
     height: 35px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     margin: 6px;
}

.search_area .login_refeel_logo {
     margin-bottom: 5px;
}

.trophy_search_rslt_area {
     position: relative;
     /* width: 40vh; */
     margin-top: 10px;
}

.trophy_search_rslt_no_area {
     /* width: 40vh; */
     margin-top: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     margin-bottom: 5px;
}

     .trophy_search_rslt_no_area h3 {
          font-size: 1.3rem;
          text-transform: uppercase;
          font-weight: 600;
          margin-top: .5rem;
          white-space: nowrap;
     }

.table.trophy_search_rslt_table th, .table.trophy_search_rslt_table td {
     text-align: center;
     vertical-align: middle;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     padding-left: 2px;
     padding-right: 2px;
}

.persent_valu {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: .5rem;
     margin-top: 10px;
}

     .persent_valu span {
          text-align: center;
          flex: 1;
          padding: 2px;
          font-weight: 800;
          border-radius: 7px;
          opacity: .9;
          cursor: pointer;
          font-size: .9rem;
     }

          .persent_valu span:nth-child(1) {
               background-color: #fde149;
               border: 2px solid #ebd037;
          }

          .persent_valu span:nth-child(2) {
               background-color: #fff;
               border-color: #87c52c;
               -webkit-box-shadow: inset 0 0 10px #87c52c;
               -moz-box-shadow: inset 0 0 10px #87c52c;
               box-shadow: inset 0 0 10px #87c52c;
               border-width: 2px;
               border-style: solid;
          }

          .persent_valu span:nth-child(3) {
               background-color: #f7737a;
               border: 2px solid #eb3e47;
          }

          .persent_valu span:nth-child(4) {
               background-color: #d8abe4;
               border: 2px solid #c994d8;
          }

          .persent_valu span:nth-child(5) {
               background-color: #07bfe6;
               border: 2px solid #07abcc;
          }

          .persent_valu span:nth-child(6) {
               background-color: #5fd999;
               border: 2px solid #4acc89;
          }

          .persent_valu span:nth-child(1).active, .persent_valu span:nth-child(2).active, .persent_valu span:nth-child(3).active, .persent_valu span:nth-child(4).active, .persent_valu span:nth-child(5).active, .persent_valu span:nth-child(6).active,
          .persent_valu span:nth-child(1):hover, .persent_valu span:nth-child(2):hover, .persent_valu span:nth-child(3):hover, .persent_valu span:nth-child(4):hover, .persent_valu span:nth-child(5):hover, .persent_valu span:nth-child(6):hover {
               border: 2px solid #3d3d3d;
               opacity: 1;
          }

     .persent_valu .input-group input.form-control ~ span.input-group-text:hover, .persent_valu .input-group input.form-control ~ span.input-group-text:focus {
          border: none;
          margin-left: 0 !important;
          color:#fff;
     }

.trophy_search_filter_btn_area {
     background-color: #e9e9e9;
     margin-top: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     padding: .8rem 0;
}

     .trophy_search_filter_btn_area button.btn {
          border-radius: 20px;
          padding: 0.02rem 1rem;
          font-weight: 600;
          line-height: 2;
     }

          .trophy_search_filter_btn_area button.btn.btn-danger {
               background: #F63C2D;
               background: linear-gradient(90deg,rgba(246, 60, 45, 1) 0%, rgba(255, 137, 69, 1) 100%);
          }

.img_area {
     width: 100%;
     height: 40px;
}

     .img_area > a[data-fancybox="gallery"] {
          display: inline-block;
         
          border-radius: 6px;
     }

img.trophy_img {
     width: 40px;
     height: 40px;
     object-fit: contain;
     object-position: center center;
}

#object-position-1 {
}

.price-range-slider {
     width: 100%;
     float: left;
     padding: 0;
}

     .price-range-slider .range-value {
          margin: 0;
     }

          .price-range-slider .range-value input {
               width: 100%;
               background: none;
               color: #000;
               font-size: 16px;
               font-weight: bold;
               box-shadow: none;
               border: none;
               margin: 5px 0 15px 0;
          }

     .price-range-slider .range-bar {
          border: none;
          background: #000;
          height: 3px;
          width: 96%;
          margin-left: 8px;
     }

          .price-range-slider .range-bar .ui-slider-range {
               background: #95bb2c;
          }

          .price-range-slider .range-bar .ui-slider-handle {
               border: none;
               border-radius: 25px;
               background: #fff;
               border: 2px solid #95bb2c;
               height: 17px;
               width: 17px;
               top: -0.52em;
               cursor: pointer;
          }

               .price-range-slider .range-bar .ui-slider-handle + span {
                    background: #95bb2c;
               }

/*--- /.price-range-slider ---*/
p.filter_head {
     font-size: 14px;
     font-weight: bold;
     border-bottom: 1px solid #d7d7d7;
     padding-bottom: 4px;
     color: #61aa30;
}

.offcanvas-title {
     font-size: 17px;
     font-weight: bold;
}

.offcanvas-header {
     padding: 10px;
     border-bottom: 1px solid #dbdbdb;
}

.trophy_search_area {
     position: relative;
     display: flex;
     align-items: center;
     gap: 1rem;
}
.trophy_search {
     position: relative;
     width: calc(100% - 40px);
     /*padding-left: 40px*/
}
.trophy_search_area .filter_btn {
     width: 40px;
     text-align: center;
}
     .trophy_search_area .filter_btn .btn-outline-success {
          width: 100%;
          padding: 10px 5px;
          border: 1px solid #adadad;
          color: #94bf39;
          border-radius: 8px;
     }
.trophy_search_area .filter_btn .btn-outline-success:hover, .trophy_search_area .filter_btn .btn-outline-success:focus, .trophy_search_area .filter_btn .btn-outline-success:active {
     background-color: #94bf39;
     color: #fff !important;
}
.audio_loader {
     --size: 6px;
     top: 10px;
     right: 60px;
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     /* gap: 10px; */
     gap: calc(var(--size) / 2);
     /* height: 100px; */
     height: calc(var(--size) * 5);
}

     .audio_loader div {
          /* width: 20px; */
          width: var(--size);
          /* height: 20px; */
          height: var(--size);
          /* border-radius: 20px; */
          border-radius: var(--size);
          background-color: #ffd700;
          animation: wave 2s infinite ease-in-out;
     }

@keyframes wave {
     /* 0%, 100% {
    height: 20px;
    background-color: #ffd700;
  } */

     25% {
          /* height: 100px; */
          height: calc(var(--size) * 5);
          background-color: #fc00ff;
     }

     50% {
          /* height: 20px; */
          height: var(--size);
          background-color: #9c73f8;
     }
     /* 100% {
    height: 20px;
    background-color: #ffd700;
  } */
}

/* .audio_loader :nth-child(1) {
  animation-delay: 0s;
} */

.audio_loader :nth-child(2) {
     animation-delay: 0.2s;
}

.audio_loader :nth-child(3) {
     animation-delay: 0.4s;
}

.audio_loader :nth-child(4) {
     animation-delay: 0.6s;
}

.audio_loader :nth-child(5) {
     animation-delay: 0.8s;
}

.persent_valu .input-group .input-group-text {
     width: 50px;
     max-width: 50px;
     text-align: center;
     display: flex;
     justify-content: center;
     font-size: 14px;
     background-color: #94bf39;
     color: #000000;
     border-radius: 20px !important;
     background-color: #95bb2c;
     padding: 2px 12px;
     z-index:9;
}

.persent_valu .input-group input.form-control {
     border: 1px solid #afafaf;
     border-right: 0;
     margin-right: -10px;
     padding-right: 15px;
     border-radius: 20px;
}

.persent_valu .form-check label.form-check-label.net-dp {
     color: #5fa626;
}

.persent_valu .form-check label.form-check-label.dp {
     color: #c06e02;
}

.table.trophy_search_rslt_table td.net-dp {
     color: #5fa626;
}

.table.trophy_search_rslt_table td.dp {
     color: #c06e02;
}

.combo-box .form-control {
     border: 1px solid #adadad;
     border-radius: var(--bs-border-radius-lg);
}

@media (min-width: 768px) {
    /* .table-fixed {
          max-height: 300px;
          overflow: auto;
     }

          .table-fixed thead th {
               position: sticky;
               top: 0;
               background: #fff;
          }*/

     .trophy_search_rslt_area {
          max-height: 48vh;
          overflow: auto;
     }


}


     @media screen and (max-width: 768px) {
          .trophy_search_area, .trophy_search_rslt_area {
               width: 100%;
          }

          .login_refeel_area {
               width: 100%;
               margin: 1rem;
          }

          .offcanvas {
               max-width: 85%;
          }

               .offcanvas.offcanvas-bottom {
                    max-width: 100%;
                    --bs-offcanvas-height: 40vh;
               }

          .login_refeel_logo .login_logo {
               max-width: 130px;
          }
     }

     @media screen and (max-width: 767px) {

          .search_detl h3.search_heading {
               font-size: 6vh;
          }

          .search_area {
               width: 90%;
          }

          .search_detl {
               padding-top: 2rem;
               align-items: flex-start;
          }

          .persent_valu span {
               font-size: .9rem;
          }

          .trophy_search_filter_btn_area {
               gap: .5rem;
          }

         
     }