/* ---------------- YOUR COLORS START */
/* 

  This is your project, product or business colors. Please provide your primary color with a slightly adjusted dark and light color scheme aswell for hover effects.
  We recommend using https://coolors.co/ and then choosing your color shades 2 darker and lighter.

*/
/* ---------------- YOUR COLORS END */
/* ---------------- FLAT UI COLORS START */
/* END COLOR STYLES */
/* ---------------- FLAT UI COLORS END */
/* ---------------- WE USE COOKIES BLOCK START */
#weusecookies_htmlblock {
  position: fixed;
  bottom: 0; /* Position it at the bottom of the viewport */
  left: 0;
  right: 0;
}

/* ---------------- WE USE COOKIES BLOCK END */
/* ---------------- CUSTOM COLORS START */
.btn-brand {
  color: #fff;
  background-color: #43D0FC;
  border-color: #43D0FC;
}

.btn-brand:hover {
  color: #fff;
  background-color: #43D0FC;
  border-color: #43D0FC;
}

.btn-soft-brand {
  color: #60697b;
  background-color: #e0e9fa;
  /*  border-color: #e0e9fa;*/
}

.btn-soft-brand:hover {
  color: #43D0FC;
  background-color: #e0e9fa;
  /*  border-color: #e0e9fa;*/
}

.btn-soft-brand-invert {
  background-color: #43D0FC !important;
  color: #e0e9fa !important;
}

.btn-soft-brand-invert:hover {
  background-color: #43D0FC !important;
  color: #e0e9fa !important;
}

.btn-outline-brand {
  color: #43D0FC;
  border-color: #43D0FC;
}

.btn-outline-brand:hover {
  color: #fff;
  background-color: #43D0FC;
  border-color: #43D0FC;
}

.bg-brand {
  background-color: #43D0FC !important;
}

.checkbox-brand input[type=checkbox]:checked + label::before {
  background-color: #43D0FC;
  border-color: #43D0FC;
}

.checkbox-brand input[type=checkbox]:checked + label::after {
  border-color: #fff;
}

.link-brand {
  color: #43D0FC;
  text-decoration: none;
  background-color: transparent;
}

.link-brand:hover {
  color: #0286BA;
  text-decoration: none;
}

.text-brand {
  color: #43D0FC !important;
}

.text-brand-darker {
  color: #0286BA !important;
}

.nav-link-brand a.active {
  border-bottom: 2px solid #43D0FC !important;
}

/* ---------------- CUSTOM COLORS END */
/* ---------------- PAGE LOADERS START */
/* LOADER WITH IMAGE IN MIDDLE OF SCREEN */
.loader-center-image {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url("pageloader1.gif") 50% 50% no-repeat rgb(255, 255, 255);
  background-size: 300px;
}

/* LOADER WITH SPINKIT IN MIDDLE OF SCREEN */
.loader-center-spinkit {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 99998;
  background: #fff;
}

.loader-center-spinkit .sk {
  z-index: 99999;
}

/* ---------------- PAGE LOADERS END */
/* ---------------- A TAG ELEMENTS START */
a:not([href]) {
  /*color: #6658dd !important;*/
  text-decoration: none !important;
  outline: none !important;
  cursor: pointer !important;
}

.always-link-cursor {
  cursor: pointer !important;
}

.viewonly-cursor {
  cursor: no-drop !important;
}

/* ---------------- A TAG ELEMENTS END */
/* ---------------- BUTTON SIZES START */
.btnwidth30percent {
  width: 30% !important;
}

.btnwidth50percent {
  width: 50% !important;
}

.btnwidth50 {
  width: 50px !important;
}

.btnwidth60 {
  width: 60px !important;
}

.btnwidth80 {
  width: 80px !important;
}

.btnwidth100 {
  width: 100px !important;
}

.btnwidth120 {
  width: 120px !important;
}

.btnwidth150 {
  width: 150px !important;
}

.btnwidth160 {
  width: 160px !important;
}

.btnwidth170 {
  width: 170px !important;
}

.btnwidth180 {
  width: 180px !important;
}

.btnwidth200 {
  width: 200px !important;
}

.btnwidth210 {
  width: 210px !important;
}

.btnfullwidth {
  width: auto;
}

.btnfullwidth-md {
  width: auto;
}

.btnfullwidth-xl {
  width: auto;
}

.btnfullwidthtable {
  width: auto;
}

@media (max-width: 1684px) {
  .btnfullwidthtable {
    width: 100% !important;
    margin-top: 5px;
  }
}
@media (max-width: 992px) {
  .btnfullwidth {
    width: 100% !important;
    margin-bottom: 5px;
  }
  .btnsmallresizemarginonly {
    margin-bottom: 5px;
  }
  .btnfullwidth-md {
    width: 100% !important;
    margin-bottom: 5px;
  }
  .btnfullwidth-xl {
    width: 100% !important;
    margin-bottom: 5px;
  }
}
@media (max-width: 768px) {
  .btnfullwidth {
    width: 100% !important;
    margin-bottom: 5px;
  }
  .btnsmallresizemarginonly {
    margin-bottom: 5px;
  }
  .btnfullwidth-md {
    width: 100% !important;
    margin-bottom: 5px;
  }
  .btnfullwidth-xl {
    width: 100% !important;
    margin-bottom: 5px;
  }
}
/* ---------------- BUTTON SIZES END */
/* ---------------- VALIDATION START */
.forcedredcolor {
  color: #ff4530;
}

.for-validation-msg {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  display: block;
  position: relative;
  padding-left: 1.625rem;
}

/*.is-valid input {
    border-color: #0abb87;
}*/
.is-valid .for-validation-msg {
  color: #4CAF50 !important;
}

input.input-validation-error, select.input-validation-error, textarea.input-validation-error {
  border-color: #f44336 !important;
}

input.valid, select.valid, textarea.valid {
  border-color: #4CAF50 !important;
}

.for-validation-msg.field-validation-error {
  color: #f44336 !important;
}

.for-validation-msg.field-validation-error:before,
.for-validation-msg.field-validation-valid:before {
  font-family: "Unicons" !important;
  font-size: 1rem;
  position: absolute;
  top: -2px;
  left: 0;
  display: inline-block;
  /*line-height: 1;*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.for-validation-msg.field-validation-error:empty,
.for-validation-msg.field-validation-valid:empty {
  display: none;
}

.for-validation-msg.field-validation-error:before {
  content: "\ecef";
}

.for-validation-msg.field-validation-valid:before {
  content: "\e971";
}

.validation-summary-valid {
  display: none !important;
}

.asp-validation-summary-wrapper {
  display: none !important;
}

.validation-summary-errors .asp-validation-summary-wrapper {
  display: flex !important;
}

.validation-summary-errors ul {
  margin-left: 2.75rem !important;
}

/* ---------------- VALIDATION END */
/* ---------------- OTHER START */
.iti {
  width: 100% !important;
}

.iti input {
  padding-left: 90px !important;
}

/* ---------------- OTHER END */
.animate-background-change {
  transition: background-color 1s ease !important;
}

#instafeed-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#instafeed-container {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Adjust as needed */
  gap: 5px; /* This replaces grid-gap */
}

#instafeed-container a {
  flex-basis: calc(33.33% - 5px); /* Adjust this based on your grid-gap */
  padding: 5px;
}