:root {
  --custom-primary-color: #012E88;
  --custom-warning-color: #FEB139;
  --custom-secondary-color: #ECECEC;
  --custom-approved-color: #3D9635;
  --custom-primaryOp-color: hsla(220, 99%, 27%, 0.20);
  --custom-btn-danger-color: #E30000;
  --custom-offwhite-color: #F5F5F5;
}

.accordion-button:focus h4 {
  color: #012E88 !important;
}

.hover-primary:hover a {
  color: #fff8f8 !important;
}

.hover-primary:hover {
  background-color: var(--custom-primary-color) !important;
}

.border-primary {
  border-color: var(--custom-primary-color) !important;
}

.btn-danger {
  background-color: var(--custom-btn-danger-color) !important;
}

.bg-offwithe {
  background-color: var(--custom-offwhite-color) !important;
}

.min-content {
  min-height: calc(100vh - 190px);
}

.min-content-nav {
  min-height: calc(100vh - 256px);
}

.bg-secondary {
  background-color: var(--custom-secondary-color) !important;
}

.btn-primary {
  background-color: var(--custom-primary-color) !important;
}

.bg-primaryOp {
  background-color: var(--custom-primaryOp-color) !important;
}

.bg-approved {
  background-color: var(--custom-approved-color) !important;
}

.hover-light:hover {
  opacity: 0.5;
}

.btn-warning {
  background-color: var(--custom-warning-color) !important;
}

.text-primary {
  color: var(--custom-primary-color) !important;
}

.btn-primary:hover {
  background-color: #0a2762 !important;
  color: #fffcfcfe !important;
}

.bg-primary {
  background-color: var(--custom-primary-color) !important;
}

.btn-warning:hover {
  background-color: #f0980c !important;
  color: #fdfdfd !important;
  border-color: #f4ba5e !important;
}

.bg-warning {
  background-color: var(--custom-warning-color) !important;
}

.text-warning {
  color: var(--custom-warning-color) !important;
}

#account {
  background-color: rgba(255, 255, 255, 0.65);

}




.error-border {
  border: 2px solid red;
}

.wide-dropdown {
  min-width: 250px;
}

label.error {
  color: red;
}

.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url('/assets/images/mina-background.png');
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.form-control[type="password"]::-webkit-inner-spin-button,
.form-control[type="password"]::-webkit-outer-spin-button {
  display: none !important;
}

body.modal-open.modal-overlay::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

body.modal-open.modal-overlay {
  overflow: hidden;
  pointer-events: none;
}

.progress {
  height: 3px !important;
}

.progress-bar {
  width: 0px;
}

.nav-item {
  width: 4em;
  height: 4em;
}

.w-drop {
  width: 13rem !important;
}

.banner {
  background: url('/assets/images/banner.png');
  height: 250px;
  background-size: cover;
  background-position: center;
}

.imgResponsive {
  height: 250px;
}

@media (min-width: 461px) and (max-width: 767px) {
  .imgResponsive {
    height: 190px;
  }
}

@media (min-width: 380px) and (max-width: 460px) {
  .imgResponsive {
    height: 175px;
  }
}

@media (max-width: 379px) {
  .imgResponsive {
    height: 125px;
  }
}

@media (max-width: 480px) {
  .navButtons {
    display: none !important;
  }

  .inDropButton {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media screen and (min-width: 360px) and (max-width: 637px) {
  .ulFooter {
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: space-around !important;
  }

  .ulFooter>li:nth-child(2)>ul {
    flex-direction: column !important;
  }
}

@media (max-width: 346px) {
  .profileText {
    display: block !important;
  }
}

#showPassword {
  cursor: pointer;
}


#dro {
  max-height: 400px;
  width: 18rem;
}


#lang1 {
  background-color: transparent !important;
}

/* Change background color of .dropdown-item.lang-btn when active */
.dropdown-item.lang-btn:active {
  background-color: transparent !important;
}

/* Change background color and text color of .dropdown-menu elements when active */
.dropdown-item:active,
.dropdown-item:active {
  color: var(--bs-dropdown-link-active-color) !important;
  text-decoration: none;
  background-color: var(--custom-primary-color) !important;
}


.slidebtn {
  height: 30px !important;
  width: 30px !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  border: 1px solid var(--custom-primary-color) !important;
}

body {
  background: none;
  font-family: 'Tajawal', sans-serif;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 50px auto;
  transition: box-shadow 0.3s;
}

.box:focus {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

body.modal-open.modal-overlay {
  overflow: hidden !important;
  pointer-events: none !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  position: absolute;
  right: 0;
}


.btn-outline-primary {
  border: 1px solid var(--custom-primary-color) !important;
}

.btn-outline-primary:hover {
  background-color: var(--custom-primary-color) !important;

  color: var(--custom-secondary-color) !important;
}

.btn-outline-primary:focus {
  background-color: var(--custom-primary-color) !important;

  color: var(--custom-secondary-color) !important;
}

.btn-outline-primary:active {
  background-color: var(--custom-primary-color) !important;

  color: var(--custom-secondary-color) !important;

  box-shadow: none;
}

body.modal-open.modal-overlay::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}


.payment-card:hover {
  border: none !important;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  transition: 0.3s ease;
}

.declinde-payment {
  background-color: #e3000033 !important;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  border: none;
}