﻿:root {
    --fa-li-margin: 1.2em;
 }

input[type="checkbox"][readonly]{
    pointer-events: none;
    filter: none;
    opacity: .5;
    cursor: not-allowed;
}

input[required], select[required] {
    border-color: var(--bs-primary);
}

/* ============ Typography ============ */
h1 {
  letter-spacing: 0px;
}
h2, h3 {
  letter-spacing: -0.5px;
}

h4,
h5,
h6 {
  letter-spacing: -2px;
}

.letter-spacing-0{
    letter-spacing: 0;
}

/* ============ Custom Utils ============ */
.height-3{
    height: 3px!important;
}

.w-5{
    width:5%;
}

.w-10{
    width:10%;
}

.w-15{
    width:15%;
}

.w-20{
    width:20%;
}

.width-80{
    width:80px;
}

.width-90{
    width:90px;
}

.width-100{
    width:100px;
}

.width-110{
    width:110px;
}

.width-120{
    width:120px;
}

.width-130{
    width:130px;
}

.width-140{
    width:140px;
}

.width-150{
    width:150px;
}

.fs-08{
    font-size: 0.8rem;
}

.py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.text-gray-300{
    color: var(--bs-gray-300);
}

.text-gray-300:hover{
    color: var(--bs-white);
}

.text-gray-300{
    color: var(--bs-gray-300);
}

.bg-opacity-90{
    opacity: 0.90;
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}

.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    border-bottom: 3px solid var(--bs-secondary);
}

/* ============ Background Stars ============ */

.bg-star-dark{
    background-image: url("/Content/Images/Misc/star-dark-half.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}

.bg-star-light{
    background-image: url("/Content/Images/Misc/star-light-half.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}

.bg-heart-beat{
    background-image: url("/Content/Images/Misc/heart-beat.png");
    background-repeat: no-repeat;
    background-position: -10px;
    background-position: center 380px;
}

/* ============ Carousel ============ */
.c-item {
    height: 780px
}

.c-img {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

.carousel-caption-center-vertically{
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
}

/* ============ Mega Menu ============ */
.navbar .megamenu{ 
    padding: 1rem; 
    background: rgba(52, 58, 64, 0.85);
    border-radius: 0;
}

.has-megamenu .dropdown-toggle::after{
    content: none;
}

.mega-menu-border-bottom-colour{
    border-color: rgba(222, 226, 230, 0.2)!important;
}

@media(min-width: 992px){
	.navbar .has-megamenu{position:static!important;}
	.navbar .megamenu{left: 0;right: 0;width: 992px;margin-top: 0;margin-left: auto;margin-right: auto; }
    .navbar-expand-lg .navbar-nav .nav-link{padding-top: 0.1rem;padding-bottom: 0.1rem;}
}

@media(min-width: 1200px){
	.navbar .megamenu{left: 0;right: 0;width: 1200px;margin-top: 0;margin-left: auto;margin-right: auto; }
}

@media(min-width: 1400px){
	.navbar .megamenu{left: 0;right: 0;width: 1400px;margin-top: 0;margin-left: auto;margin-right: auto; }
}

@media(max-width: 991px){
	.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
		overflow-y: auto;
	    max-height: 90vh;
	    margin-top:10px;
	}
}

.ul-mt{
    margin-top: 0.3rem;
}



/* ============ Home Page Services ============ */
.icon-card{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity));
  cursor: pointer;
  transition: 0.3s;
}

.icon-card:hover{
    background-color: var(--bs-secondary);
}

/* ============ Home Page Hero ============ */
.donate-bg{
    background-image: url('Images/Banners/Donate-Banner.jpg');
    background-position: center;
    background-size: cover;
}

/* ============ Newsletter ============ */
.newsletter-input{
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
    color: var(--bs-white);
}

.newsletter-input:focus{
    background-color: var(--bs-dark);
    color: var(--bs-white);
}


.newsletter-input-label{
    color: var(--bs-gray-500);
}


.hero-banner{
    background-position: center;
    background-size: cover;
}

/* ============ Remove box shadow from select 2 bootstrap 5 theme ============ */ 
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection{
    box-shadow: none!important;
}

/* ============ Ecard card ============ */
.ecard-container {
  position: relative;
  width: 100%;
}

.ecard-container .image {
  display: block;
  width: 100%;
  height: auto;
}

.ecard-container .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(var(--bs-secondary-rgb), 0.7);
  cursor: pointer;
}

.ecard-container:hover .overlay {
  opacity: 1;
}

.ecard-container .text {
  color: white;
  font-size: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.medical-textarea { height:125px !important; }

/* ============ Gemach ============ */
.gemach-description { display: none; }

/* ============ shop ============ */
.product-description { display: none; }
.pac-container {
    z-index: 2000 !important;
}

/* ============ Flip cards ============ */
.card-flip > div {
  backface-visibility: hidden;
  transition: transform 300ms;
  transition-timing-function: linear;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
}

.card-back li a {
    color: var(--bs-white);;
}

.card-back li a:hover {
    color: var(--bs-secondary)!important;
}

.card-flip:hover .card-front {
  transform: rotateY(-180deg);
}
  
.card-flip:hover .card-back {
  transform: rotateY(0deg);
}

/* Loading Overlay animation */
.loading {
    position: relative;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--bs-dark-rgb), 0.3);
    z-index: 1000;
    cursor: pointer;
}

.diagonal-box {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

#ecardModal img { max-width: 100%; height: auto; }
#ecardModal .wrapper { max-width:100%; }

@media print {
    .ecardOpen { width: 100%; height:100%; overflow:hidden; }
    .ecardOpen > *:not(main) { display: none; }
    .ecardOpen main > *:not(#ecardModal) { display: none; }
    .ecardOpen #ecardModal  { display:block; }
    .ecardOpen #ecardModal .modal-dialog { width: 100%; }
    .ecardOpen #ecardModal .wrapper, .ecardOpen #ecardModal img { max-width: 100%; }
    .ecardOpen #ecardModal img { height:auto; }
    .ecardOpen #ecardModal .modal-footer { display: none; }
}