/*GENERAL*/

/* #INDmenu-btn {
  top: auto !important;
  bottom: -14px !important;
  left: 72px !important;
} */

.cursor-zoom-in {
  cursor: zoom-in !important;
}
#zonos.left {
  bottom: -2px !important;
  left: 55px !important;
}

#dummy-chat-button-iframe {
  z-index: 5999 !important;
}

.modal-backdrop {
  z-index: 150 !important;
}

/* -----  modal -----  */

/*<!--MODAL STYLES-->*/

/* .modal-content, 
.modal-body iframe, 
.modal-body {
border-radius: 16px;
} */

.modal-backdrop {
  position: static;
}

::-webkit-scrollbar {
  width: 0px; /* Remove scrollbar space */
  background: transparent; /* Optional: just make scrollbar invisible */
}

/* .modal-content::-webkit-scrollbar {
  display: none;
} */

.modal {
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  max-width: 960px;
  margin: 0 auto !important;
  height: auto;
  transition: 0.5s ease-in-out;
}

/* .modal-dialog-centered {
margin-top: 10em;
align-items: flex-start;
min-height: calc(84em - var(--bs-modal-margin) * 2);
} */

/* .modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - 1rem);
} */

.modal-content {
  background-color: #191919;
  height: auto;
  padding: 0rem;
}

.modal-header {
  background-color: transparent;
  border: 1px solid #191919;
  border-bottom: none;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.modal-body {
  background: #191919;
  border: 1px solid #191919;
  padding: 0;
}

.modal-footer {
  background: #191919;
  border: 1px solid #191919;
}

.modal.fade.show {
  background-color: rgba(36, 36, 36, 0.24) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

/* Hide scrollbar for IE, Edge and Firefox */
.modal-content {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.modal.fade .modal-dialog {
  top: 50%;
  transform: translate(0, 100%);
  margin: 0 auto !important;
  transition: 0.5s ease-in-out;
}

.modal.fade.show .modal-dialog {
  top: 50%;
  transform: translate(0, -50%);
  transition: 0.5s ease-in-out;
  margin: 0 auto !important;
}

.modal.fade:not(.show) {
  transition: 0.5s ease-in-out;
}

/* .btn-close {
  background-image: none !important;
  box-shadow: none;
  outline: none;
} */

/* .btn-close {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.45' d='M15.6571 0.342857C15.2 -0.114286 14.5143 -0.114286 14.0571 0.342857L8 6.4L1.94286 0.342857C1.48571 -0.114286 0.8 -0.114286 0.342857 0.342857C-0.114286 0.8 -0.114286 1.48571 0.342857 1.94286L6.4 8L0.342857 14.0571C-0.114286 14.5143 -0.114286 15.2 0.342857 15.6571C0.571429 15.8857 0.8 16 1.14286 16C1.48571 16 1.71429 15.8857 1.94286 15.6571L8 9.6L14.0571 15.6571C14.2857 15.8857 14.6286 16 14.8571 16C15.0857 16 15.4286 15.8857 15.6571 15.6571C16.1143 15.2 16.1143 14.5143 15.6571 14.0571L9.6 8L15.6571 1.94286C16.1143 1.48571 16.1143 0.8 15.6571 0.342857Z' fill='white'/%3E%3C/svg%3E%0A") !important;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  outline: none;
} */

.btn-close {
  background-image: url("data:image/svg+xml,data:image/svg + xml, %3Csvgwidth='16'height='16'viewBox='0 0 16 16'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathopacity='0.45'd='M15.6571 0.342857C15%0A.2 -0.114286 14.5143 -0.114286 14.0571 0.342857L8 6.4L1.94286 0.342857C1.48571 -0.114286 0.8 -0.114286 0.342857 0.342857C-0.114286 0.8 -0.114286 1.48571 0.342857 1.94286L6.4 8L0.342857 14.0571C-0.114286 14.5143 -0.114286 15.2 0.342857 15.6571C0.571429 15.8857 0.8 16 1.14286 16C1.48571 16 1.71429 15.8857 1.94286 15.6571L8 9.6L14.0571 15.6571C14.2857 15.8857 14.6286 16 14.8571 16C15.0857 16 15.4286 15.8857 15.6571 15.6571C16.1143 15.2 16.1143 14.5143 15.6571 14.0571L9.6 8L15.6571 1.94286C16.1143 1.48571 16.1143 0.8 15.6571 0.342857Z'fill='white'/%3E%3C/svg%3E%0A") !important;
  box-shadow: none;
  outline: none;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.btn-close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 360px;
  box-sizing: border-box;
  z-index: 150;
  background-color: #474747;
  opacity: 1;
}

.btn-close:hover,
.closeBtn:hover {
  border-radius: 360px;
  /* background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), #474747!important */
  background-color: #6c6c6c !important;
}

.btn-close:active,
.closeBtn:active {
  border-radius: 360px;
  /* background: linear-gradient(0deg, #ffffff80 0%, rgba(255, 255, 255, 0.50) 100%), #474747!important; */
  background-color: #a3a3a3 !important;
}

.btn-close:active i.text-gray-3,
.closeBtn:active i.text-gray-3 {
  color: #d0d0d1 !important;
}

.fade.show {
  opacity: 1 !important;
}

@media (max-width: 767px) {
  /* #INDmenu-btn {
    top: auto !important;
    bottom: -14px !important;
    left: 72px !important;
  } */

  #zonos.left {
    bottom: -2px !important;
    left: 55px !important;
  }

  #dummy-chat-button-iframe {
    z-index: 2147483647;
  }

  /* Styles to fix the model from being covered from chat buttons. Applicable to iframe model only*/

  .modal {
    z-index: 21474836472343 !important;
  }

  .modal-dialog {
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  /* .modal,
.modal-dialog,
.modal-content {
height: 100vh ;
} */

  .modal-content {
    background-color: #191919;
    /* height: 100vh ; */
  }

  a .modal-dialog {
    max-width: 100%;
  }

  /* .modal-dialog-centered {
min-height: 100vh;
} */

  .modal-body {
    padding: 0px;
  }

  /* .modal-body iframe {
    height: calc(100vh - 44px);
  } */
}

/*ARTICLE*/

.article-modal .modal-dialog {
  height: fit-content !important;
}

.article-modal .modal-content {
  height: 35rem !important;
}

@media (max-width: 767px) {
  .article-modal .modal-content,
  .article-modal .modal-dialog {
    height: 100vh !important;
  }
}
/*FORM*/
.form-modal .modal-dialog {
  max-width: 808px;
}

.form-modal .modal-body {
  background: #191919;
  border: 1px solid #191919;
  /* padding: 0 !important; */
}

@media (max-width: 767px) {
  .form-modal .modal-dialog {
    height: 130vh !important;
  }
}

/* VIDEO  */
.video-modal .modal {
  margin-top: 0rem;
  visibility: visible;
  opacity: 1;
}

.video-modal .modal-header {
  background-color: #000;
  border: 1px solid #000;
  border-bottom: none !important;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.video-modal .modal-header {
  border-bottom: 0 !important;
}

.video-modal .modal-body {
  background-color: #000;
  border: 1px solid #000 !important;
  padding: 0;
}

.video-modal .modal-footer {
  background-color: #000;
  border: 1px solid #000;
  padding: 0.5rem 0;
}

.video-modal .modal-dialog-scrollable .modal-content {
  background-color: #000;
  height: auto !important;
  max-height: 100%;
  overflow: hidden;
}

.video-modal .modal-content {
  background-color: #000;
  padding: 0rem;
}

.video-modal .modal-dialog {
  width: 100%;
  max-width: 960px !important;
}

.video-modal .btn-close {
  background-image: url("data:image/svg+xml,data:image/svg + xml, %3Csvgwidth='16'height='16'viewBox='0 0 16 16'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathopacity='0.45'd='M15.6571 0.342857C15%0A.2 -0.114286 14.5143 -0.114286 14.0571 0.342857L8 6.4L1.94286 0.342857C1.48571 -0.114286 0.8 -0.114286 0.342857 0.342857C-0.114286 0.8 -0.114286 1.48571 0.342857 1.94286L6.4 8L0.342857 14.0571C-0.114286 14.5143 -0.114286 15.2 0.342857 15.6571C0.571429 15.8857 0.8 16 1.14286 16C1.48571 16 1.71429 15.8857 1.94286 15.6571L8 9.6L14.0571 15.6571C14.2857 15.8857 14.6286 16 14.8571 16C15.0857 16 15.4286 15.8857 15.6571 15.6571C16.1143 15.2 16.1143 14.5143 15.6571 14.0571L9.6 8L15.6571 1.94286C16.1143 1.48571 16.1143 0.8 15.6571 0.342857Z'fill='white'/%3E%3C/svg%3E%0A") !important;

  box-shadow: none;
  outline: none;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* .video-modal .btn-close {
       background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.45' d='M15.6571 0.342857C15.2 -0.114286 14.5143 -0.114286 14.0571 0.342857L8 6.4L1.94286 0.342857C1.48571 -0.114286 0.8 -0.114286 0.342857 0.342857C-0.114286 0.8 -0.114286 1.48571 0.342857 1.94286L6.4 8L0.342857 14.0571C-0.114286 14.5143 -0.114286 15.2 0.342857 15.6571C0.571429 15.8857 0.8 16 1.14286 16C1.48571 16 1.71429 15.8857 1.94286 15.6571L8 9.6L14.0571 15.6571C14.2857 15.8857 14.6286 16 14.8571 16C15.0857 16 15.4286 15.8857 15.6571 15.6571C16.1143 15.2 16.1143 14.5143 15.6571 14.0571L9.6 8L15.6571 1.94286C16.1143 1.48571 16.1143 0.8 15.6571 0.342857Z' fill='white'/%3E%3C/svg%3E%0A");
       box-shadow: none;
       outline: none;
   } */

.video-modal .btn-close:hover {
  box-shadow: none;
  outline: none;
}

.video-modal .btn-close:focus {
  box-shadow: none;
  outline: none;
}

/*.video-modal .modal-dialog-centered {
                min-height: calc(84em - var(--bs-modal-margin) * 2); 
   }/*

   @media (max-width:767px) {
       .video-modal .modal-content {
           background-color: #000;
           height: 100vh !important;
       }

       .video-modal a .modal-dialog {
           max-width: 100%;
       }

       /* .video-modal .modal-dialog-centered {
           min-height: 100vh;
       } */

/* Styles to fix the model from being covered from chat buttons. Applicable to iframe model only*/
.video-modal .modal {
  z-index: 21474836472343 !important;
}

.video-modal .modal-dialog {
  margin: 0 !important;
  /* max-width: 100% !important; */
}

/* .video-modal .modal,
.video-modal .modal-dialog,
.video-modal .modal-content {
  height: 100vh !important;
} */

.video-modal .modal-body {
  padding: 0px;
}

/* .video-modal .modal-body iframe {
  background-color: #000;
  height: calc(100vh - 44px) !important;
} */

@media (max-width: 767px) {
  .video-modal .modal-body iframe {
    background-color: #000;
    height: 100% !important;
  }
  .video-modal .modal-content {
    height: auto !important;
    border-radius: 0 !important;
  }
  .video-modal .modal-body {
    height: auto !important;
    border-radius: 0 !important;
  }
  .video-modal .modal-dialog {
    width: 100%;
    max-width: 100% !important;
    padding: 0 1.5rem;
  }
}

/* #INDmenu-btn {
  top: auto !important;
  bottom: -14px !important;
  left: 72px !important;
} */

#zonos.left {
  bottom: -2px !important;
  left: 55px !important;
}

#dummy-chat-button-iframe {
  z-index: 5999 !important;
}

/* } */

/*COMPARE*/

.compare-modal {
  padding: 0 1rem;
}

.modal-open .compare-modal.modal {
  overflow-x: hidden;
  overflow-y: hidden;
}

.compare-modal .modal-dialog {
  max-width: 1224px;
  height: auto;
}

.compare-modal .modal-content {
}

.compare-modal .modal-body {
  max-height: 600px;
  border-radius: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0px; /* Remove scrollbar space */
  background: transparent; /* Optional: just make scrollbar invisible */
}

.compare-title-row {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .compare-modal .modal-dialog {
    max-width: 1224px;
    height: auto;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  .compare-modal .modal-content {
    padding-left: 0;
    padding-right: 0;
  }

  .compare-modal .grid-wrapper {
    grid-template-columns: 30% 30% 30%;
    /* grid-gap: 0.8rem; */
    column-gap: 1rem;
    row-gap: 0.8rem;
  }

  .compare-modal .grid-wrapper.two-product {
    grid-template-columns: 45% 45%;
    /* grid-gap: 0.8rem; */
    column-gap: 1rem;
    row-gap: 0.8rem;
  }

  .compare-modal .title-col {
    grid-row: 1;
    grid-column: 1;
    grid-column: 1 / 4;
    /* needed for the floated layout */
    clear: both;
  }

  .compare-modal .data-col {
    grid-row: 2;
  }
  .modal-open .compare-modal.modal {
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .compare-modal .modal-body {
    max-height: 600px;
    border-radius: 0;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  body.modal-open {
    overflow-y: hidden;
    overflow-x: hidden;
    overflow: hidden;
  }
}