*, *:before, *:after {

  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;

}



html {

  box-sizing: border-box;

  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;

}



body {

    background: #f6f5f7;

    font-family: 'ABeeZee', sans-serif;

    margin: 0;

    font-size: 14px;

}



h1 {

    font-weight: 600;

    margin: 0;

}



p {

    font-size: 14px;

    line-height: 20px;

    letter-spacing: 0.5px;

}



a {

    color: #B8182F;

    font-size: 14px;

    text-decoration: none;

}



ul {

    font-size: 14px;

    margin: 0;

    padding: 0;

}



/*** Buttons ***/

.btn {

    border-radius: 20px;

    background-color: #B8182F;

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: transform 80ms ease-in;

    cursor: pointer;

    width: 100%;

    max-width: 200px;

    white-space: nowrap;

}



.btn:active {

    transform: scale(0.95);

}



.btn:focus {

    outline: none;

}



/*** Form ***/

form.flexForm {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    padding: 0 50px;

    text-align: center;

}



input {

    background-color: #f9eaea;

    border: none;

    border-radius: 3px;

    padding: 12px 15px;

    margin: 8px 0;

    width: 100%;

    font-family: 'ABeeZee', sans-serif;

}



input:focus,

input:active {

    outline-color: #B8182F;

}



/*** Form Buttons ***/

button.btn {    

    padding: 13px 40px;

    border: 1px solid #B8182F;

}



button.ghost {

    background-color: transparent;

    border-color: #fff;

}



button.btn {

    margin-top: 15px !important;

}



/*** Home-Index ***/

.heroContainer {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    height: 96vh;

    margin: -25px 0 0;

}



.cardContainer {

    background-color: #fff;

    border-radius: 10px;

    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),

                0 10px 10px rgba(0, 0, 0, 0.22);

    position: relative;

    overflow: hidden;

    width: 768px;

    max-width: 100%;

    min-height: 480px;

}



/* Form Containers */

.formContainer {

    position: absolute;

    top: 0;

    height: 100%;

    transition: all 0.6s ease-in-out;

}

 .formContainer form {

    height: 100%;

    background-color: #fff;

 }

.formContainer a {

    margin: 15px 0;

}



.signInContainer,

.signUpContainer {

    left: 0;

    width: 50%;

}



.signInContainer {

    z-index: 2;

}



.signUpContainer {

    opacity: 0;

    z-index: 1;

}



.cardContainer.rightPanelActive .signInContainer {

    transform: translateX(100%);

}



.cardContainer.rightPanelActive .signUpContainer {

    transform: translateX(100%);

    opacity: 1;

    z-index: 5;

    animation: show 0.6s;

}



@keyframes show {

    0%, 49.99% {

        opacity: 0;

        z-index: 1;

    }

    50%, 100% {

        opacity: 1;

        z-index: 5;

    }

}



/* Overlay */

.overlayContainer {

    position: absolute;

    top: 0;

    left: 50%;

    width: 50%;

    height: 100%;

    overflow: hidden;

    transition: transform 0.6s ease-in-out;

    z-index: 100;

}



.cardContainer.rightPanelActive .overlayContainer {

    transform: translateX(-100%);

}



.overlay {

    background: linear-gradient(to right, #a5091f, #B8182F);

    color: #fff;

    position: relative;

    left: -100%;

    width: 200%;

    height: 100%;

    transform: translateX(0);

    transition: transform 0.6s ease-in-out;

}



.cardContainer.rightPanelActive .overlay {

    transform: translateX(50%);

}



.overlayPanel {

    position: absolute;

    top: 0;

    height: 100%;

    width: 50%;

    padding: 0 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

    transition: transform 0.6s ease-in-out;

}



.overlayLeft {

    transform: translateX(-20%);

}



.cardContainer.rightPanelActive .overlayLeft {

    transform: translateX(0);

}



.overlayRight {

    right: 0;

    transform: translateX(0);

}



.cardContainer.rightPanelActive .overlayRight {

    transform: translateX(20%);

}



/* Forget Password */

.forgetPasswordContainer {

    position: absolute;

    top: 0;

    left: 0;

    width: 50%;

    height: 100%;

    background-color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    padding: 0 50px;

    text-align: center;

    opacity: 0;

    z-index: 1;

    transition: all 0.6s ease-in-out;

    transform: translateX(-100%);

}



.forgetPasswordContainer p {

    margin-bottom: 0;

}



.cardContainer.forgetPanelActive .forgetPasswordContainer {

    transform: translateX(0);

    opacity: 1;

    z-index: 10;

}



.cardContainer.forgetPanelActive .signInContainer {

    transform: translateX(100%);

    opacity: 0;

    z-index: 0;

}



/* Footer */

footer {

    background-color: #222;

    color: #fff;

    font-size: 14px;

    text-align: center;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 999;

}



footer p {

    margin: 7px 0;

    font-size: 13px;

}



footer a {

    color: #fff;

    text-decoration: none;

    font-size: 13px;

}



/* Messages */

.errorMsg, .successMsg {

    margin: 15px 0;

    padding: 6px 12px;

    border-radius: 6px;

    font-size: 12px;

    transition: all 0.3s ease;

}



.errorMsg {

    background-color: #ffe6e6;

    color: #b30000;

}



.successMsg {

    background-color: #e6ffe6;

    color: #006600;

}



.fadeOut {

    opacity: 0;

    height: 0;

    margin: 0;

    padding: 0;

    overflow: hidden;

    transition: all 0.5s ease;

}



/* Responsive */

@media (max-width: 768px) {

    .cardContainer {

        height: calc(100vh - 54px);

        top: 11px;

        border-radius: 0;

    }



    .overlayContainer {

        left: 0;

        width: 100%;

        height: 40%;

    }



    .overlayPanel {

        top: 2%;

    }



    .formContainer {

        top: 19%;

    }



    .signInContainer {

        width: 100%;

    }



    .signUpContainer {

        left: -100%;

        width: 100%;

    }



    .rightPanelActive .overlayContainer {

        left: 100%;

    }



    .forgetPasswordContainer {

        width: 100%;

        top: 19%;

    }

}



@media (max-width: 480px) {

    form {

        padding: 0 30px;

    }

}





/****Dashboard****/

header {

    background-color: #222;

    color: #fff;

    padding: 7px 25px 9px;

}



.navContainer {

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.logo {

    font-size: 1.25rem;

    color: #fff;

}



nav ul {

    list-style: none;

    display: flex;

    gap: 1.15rem;

    align-items: center;

}



nav a {

    color: #fff;

}



nav a.btn {

    padding: 8px 15px;

    transition: color 0.3s ease;

}



nav a.import {

    padding: 8px 15px;

    background: #f5f5f5;

    color: #B8182F;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    width: 100%;

    transition: background 0.3s ease-in-out, color 0.3s ease-in-out, transform 80ms ease-in;

}



nav a.import:hover {

    background: #B8182F;

    color: #fff;

}



/* Gradient Bar */

.gradBar {

  width: 100%;

  height: 5px;

  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);

  background-size: 400% 400%;

  	-webkit-animation: gradbar 15s ease infinite;

	-moz-animation: gradbar 15s ease infinite;

	animation: gradbar 15s ease infinite;

}



/* KEYFRAME ANIMATIONS */

@-webkit-keyframes gradbar {

	0% {

		background-position: 0% 50%

	}

	50% {

		background-position: 100% 50%

	}

	100% {

		background-position: 0% 50%

	}

}



@-moz-keyframes gradbar {

	0% {

		background-position: 0% 50%

	}

	50% {

		background-position: 100% 50%

	}

	100% {

		background-position: 0% 50%

	}

}



@keyframes gradbar {

	0% {

		background-position: 0% 50%

	}

	50% {

		background-position: 100% 50%

	}

	100% {

		background-position: 0% 50%

	}

}



@-webkit-keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



@-webkit-keyframes color-1 {

  0% {

    background-color: #ff0000;

  }

  100% {

    background-color: #00ff00;

  }

}



@keyframes color-1 {

  0% {

    background-color: #ff0000;

  }

  100% {

    background-color: #00ff00;

  }

}



.mobileGreeting, .desktopGreeting {

  display: none;

}



.mobileToggle {

    display: none;

    font-size: 24px;

    background: none;

    border: none;

    cursor: pointer;

    color: white;

    margin-left: auto;

    z-index: 1001;

}



@media (min-width: 992px) {

  .desktopGreeting {

    display: block;

  }

}



/* Responsive styles */

@media (max-width: 768px) {

    .mobileToggle {

        display: block;

    }



    nav {

        position: fixed;

        top: 55px;

        left: -100%;

        width: 100%;

        background-color: #111;

        transition: left 0.3s ease-in-out;

        z-index: 999;

        text-align: center;

        height: calc(100vh - 55px);

        overflow-y: auto;

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    nav.open {

        left: 0;

    }



    .mobileGreeting {

        display: block;

        color: white;

        text-align: center;

        font-size: 1rem;

        padding: 1rem 0;

        border-bottom: 1px solid #222;

        width: 100%;

    }



    nav ul {

        display: flex;

        flex-direction: column;

        gap: 20px;

        margin: 1rem 0 0 0;

        padding: 0;

        list-style: none;

        width: 100%;

    }



    nav ul li a {

        color: white;

        font-size: 1.2rem;

        text-decoration: none;

        display: inline-block;

        width: 100%;

        padding: 10px 0;

    }



    .navContainer {

        display: flex;

        align-items: center;

        justify-content: space-between;

        position: relative;

    }



    header {

        padding: 7px 10px 15px 20px;

    }

}





/*** Search Bar ***/

.searchBar {

  position: relative;

  width: 100%;

  padding: 30px 0 25px;

  background-color: #f2ecec;

  color: #4b4848;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: background-color 1.25s ease-in-out;
  column-gap: 30px;

}



.searchBar.isFocus {

  background-color: #006600;

}



.titleContainer {

  position: absolute;

  top: 33%;

  left: 50%;

  width: 80%;

  margin: 0 auto;

  text-align: center;

  overflow: hidden;

  transform: translate(-50%, -50%);

}



.titleContainer p {

    color: #fff;

    font-size: 18px;

    margin: 0;

}



.titleContainer .title {

  transform: translateY(-100%);

  transition: transform 0.3s ease;

  transition-delay: 0.25s;

}



.titleContainer .titleDown {

  transform: translateY(100%);

  transition: transform 0.3s ease;

  transition-delay: 0.25s;

}



.isFocus .titleContainer .title {

  transform: translateY(0);

}



.isType .titleContainer .titleDown {

  transform: translateY(-20px);

}



.isType .titleContainer .title {

  transform: translateY(-100%);

}



.fieldContainer {

  position: relative;

  padding: 0;

  margin: 0;

  border: 0;

  width: 330px;

  height: 40px;

}



.iconsContainer {

    position: absolute;

    top: 0px;

    right: 0;

    width: 40px;

    height: 40px;

    overflow: hidden;

    background: #eee;

}



.iconClose {

  position: absolute;

  top: 7px;

  left: 6px;

  width: 65%;

  height: 65%;

  opacity: 0;

  cursor: pointer;

  transform: translateX(-200%);

  border-radius: 50%;

  transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);

}



.iconClose:before {

  content: "";

  border-radius: 50%;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  border: 2px solid transparent;

  border-top-color: #0096FF;

  border-left-color: #0096FF;

  border-bottom-color: #0096FF;

  transition: opacity 0.2s ease;

  z-index: 2;

}



.iconClose .xUp {

  position: relative;

  width: 100%;

  height: 50%;

  z-index: 0;

}



.iconClose .xUp:before {

  content: "";

  position: absolute;

  bottom: 2px;

  left: 3px;

  width: 50%;

  height: 2px;

  background-color: #0096FF;

  transform: rotate(45deg);

}



.iconClose .xUp:after {

  content: "";

  position: absolute;

  bottom: 2px;

  right: 0px;

  width: 50%;

  height: 2px;

  background-color: #0096FF;

  transform: rotate(-45deg);

}



.iconClose .xDown {

  position: relative;

  width: 100%;

  height: 50%;

  z-index: 0;

}



.iconClose .xDown:before {

  content: "";

  position: absolute;

  top: 4px;

  left: 4px;

  width: 50%;

  height: 2px;

  background-color: #0096FF;

  transform: rotate(-45deg);

}



.iconClose .xDown:after {

  content: "";

  position: absolute;

  top: 4px;

  right: 1px;

  width: 50%;

  height: 2px;

  background-color: #0096FF;

  transform: rotate(45deg);

}



.isType .iconClose:before {

  opacity: 1;

  -webkit-animation: spin 0.85s infinite;

          animation: spin 0.85s infinite;

}



.isType .iconClose .xUp:before, .isType .iconClose .xUp:after {

  -webkit-animation: color-1 0.85s infinite;

          animation: color-1 0.85s infinite;

}



.isType .iconClose .xUp:after {

  -webkit-animation-delay: 0.3s;

          animation-delay: 0.3s;

}



.isType .iconClose .xDown:before, .isType .iconClose .xDown:after {

  -webkit-animation: color-1 0.85s infinite;

          animation: color-1 0.85s infinite;

}



.isType .iconClose .xDown:before {

  -webkit-animation-delay: 0.2s;

          animation-delay: 0.2s;

}



.isType .iconClose .xDown:after {

  -webkit-animation-delay: 0.1s;

          animation-delay: 0.1s;

}



.iconSearch {

  position: relative;

  top: 7px;

  left: 8px;

  width: 50%;

  height: 50%;

  opacity: 1;

  border-radius: 50%;

  border: 3px solid #0096FF;

  transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);

}



.iconSearch:after {

  content: "";

  position: absolute;

  bottom: -8px;

  right: -4px;

  width: 4px;

  border-radius: 3px;

  transform: rotate(-45deg);

  height: 10px;

  background-color: #0096FF;

}



.field {

  border: 0;

  width: 100%;

  height: 100%;

  padding: 10px 20px;

  background: white;

  border-radius: 0;

  box-shadow: 0px 8px 15px rgba(75, 72, 72, 0.1);

  transition: all 0.4s ease;

  margin: 0;

}



.field:focus {

  outline: none;

  box-shadow: 0px 9px 20px rgba(75, 72, 72, 0.3);

}



.field:focus + .iconsContainer .iconClose {

  opacity: 1;

  transform: translateX(0);

}



.field:focus + .iconsContainer .iconSearch {

  opacity: 0;

  transform: translateX(200%);

}



/*** Live Search Results ***/

.suggestionsList {

  position: absolute;

  top: 48px;

  left: 0;

  right: 0;

  background: #fff;

  max-height: 180px;

  overflow-y: auto;

  margin: 0;

  padding: 0;

  list-style: none;

  z-index: 1100;

}

.suggestionsList li {

  padding: 10px 20px 8px;

  cursor: pointer;

}

.suggestionsList li:hover {

  background-color: #F0F8FF;

}







/*** Import ***/

.giftCards {

    line-height: 1.4;

}



.giftCards ul {

    text-align: left !important;

    width: 100%;

}



.giftCards p {

    margin-top: 5px;

}



.giftCards .fileUpload {

    margin-top: 20px;

}



.giftCards input[type="file"] {

  padding: 8px;

  font-size: 0.95rem;

  border: 1px solid #ccc;

  border-radius: 6px;

  background-color: #f9f9f9;

  cursor: pointer;

}



.giftCards .signUpContainer {

  animation: none !important;

}



.uploadErrorMsg, .uploadSuccessMsg {

    width: 100%;

}



.uploadErrorMsg h5, .uploadSuccessMsg h5 {

    margin: 15px 0 -20px;

    padding: 7px 0 10px;

    background-color: #f1f1f1;

    border-top-left-radius: 6px;

    border-top-right-radius: 6px;

    z-index: 1;

}



.uploadErrorMsg .errorMsg, .uploadSuccessMsg .successMsg {

    text-align: left;

    width: 100%;

    line-height: 1.6;

}





/*** GIft Card Table ***/

.tableContainer {

    overflow-x: auto;

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    margin: 2rem;

}

.tableContainer table {

    width: 100%;

    border-collapse: collapse;

}

.tableContainer thead {

    background-color: #B8182F;

    color: #fff;

}

.tableContainer th, .tableContainer td {

    padding: 12px 16px;

    text-align: left;

    border-bottom: 1px solid #e5e5e5;

    text-align: center;

}

.tableContainer tbody tr:nth-child(odd) {

    background-color: #f9f9f9;

}

.tableContainer tbody tr:hover {

    background-color: #f1f1f1;

}

.tableContainer a {

    padding: 5px 10px;

}



td span {

  display: none;

}



/*** Pagination ***/

#pagination {

  align-items: center;

  justify-content: center;



}



.paginationContainer button.btn {

    margin: 10px !important;

    cursor: pointer;

    padding: 12px 15px !important;

    width: auto;

    border-radius: 50%;

}



.paginationContainer button.active {

  font-weight: bold;

  background-color: #006600;

  color: #fff;

  border: none;

}



.paginationContainer button.paginationNav {

    border: 2px solid #B8182F;

    background-color: transparent;

    color: #000000;

    border-radius: 0;

    padding: 12px 15px 9px !important;

}



.paginationContainer button:disabled {

  opacity: 0.5;

  cursor: default;

}





@media (max-width: 768px) {

    .tableContainer table,

    .tableContainer thead,

    .tableContainer tbody,

    .tableContainer th,

    .tableContainer td,

    .tableContainer tr {

        display: block;

    }

    .tableContainer thead {

        display: none;

    }

    .tableContainer td { 

      display: flex;

      justify-content: space-between;

    }



    td span {

      display: inline-block;

      font-weight: bold !important;

    }



    .tableContainer tr {

        margin-bottom: 15px;

        border-radius: 6px;

        box-shadow: 0 3px 5px rgba(0,0,0,0.1);

    }



    .tableContainer a {

        width: auto;

        padding: 7px 15px;

        margin: 0 auto;

    }



    .paginationContainer button.btn {

      margin: 5px !important;

    }

}





/*** Modal ***/

#modalContainer {

  position: fixed;

  top: 0; left: 0; width: 100%; height: 100%;

  background-color: rgba(0,0,0,0.5);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 1000;

}



.modalContent {

  background: white;

  max-width: 400px;

  width: 90%;

  border-radius: 6px;

  position: relative;

  box-shadow: 0 2px 10px rgba(0,0,0,0.3);

}



.modalContent .modelHeader {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 15px;

  background-color: #F0F8FF;

  border-top-left-radius: 6px;

  border-top-right-radius: 6px;

}



.modalContent .modelHeader h3 {

  margin: 0;

  font-weight: normal;

  padding-top: 3px;

}



.modalClose {

  background: #f9eaea;

  border: 1px solid #B8182F;

  border-radius: 50%;

  font-size: 22px;

  padding: 1px 7px 0px;

  cursor: pointer;

}



/*** Modal ***/







/*** Modal Form ***/

form.redeemCard {

  padding: 5px 20px 15px;

  /* display: flex;

  flex-direction: column; */

}



form.redeemCard button {

  /* text-align: center;

  margin: 0 auto; */

  width: auto;

}



.formRow {

  display: flex;

  align-items: center;

  margin-bottom: 5px;

}



.formRow label {

  width: 160px;

}



.formRow input,

.formRow select {

  flex: 1;

  padding: 6px;

}



.formRow p {

  margin: 0;

}



.formRow select {

  width: 100%;

  max-width: 300px;

  padding: 6px 10px;

  margin: 8px 0;

  border: 1px solid #ccc;

  border-radius: 4px;

  font-size: 14px;

  font-family: inherit;

  background-color: #fff;

  color: #333;

  transition: border-color 0.3s ease, box-shadow 0.3s ease;

}



.formRow select:focus {

  border-color: #B8182F;

  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);

  outline: none;

}

.formRow select option {

  padding: 8px 12px;

  font-size: 15px;

  color: #333;

  background-color: #fff;

}

.formRow select option:hover {

  background-color: #B8182F;

  color: #fff;

}



.formRow .remBal {

    margin: 8px 0;

    background: #f9eaea;

    border-radius: 3px;

    padding: 7px 6px 5px;

    flex: 1;

}



#remainingWarning {

  margin-top: 15px;

  margin-bottom: 5px;

}





/*** Toast Notifications ***/

#toastContainer {

  position: fixed;

  bottom: 4.75%;

  left: 50%;

  transform: translateX(-50%);

  z-index: 1100;

  display: flex;

  flex-direction: column-reverse;

  gap: 0.5rem;

  max-width: 320px;

  width: 100%;

  max-width: 320px;

  pointer-events: none;

  align-items: center;

}



.toast {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 10px 10px 15px;

  border-radius: 6px;

  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);

  opacity: 0;

  transform: translateY(100%);

  animation-fill-mode: forwards;

  animation-duration: 0.5s;

  animation-timing-function: ease;

  color: #fff;

  pointer-events: auto;

}



.toast.show {

  animation-name: slideInUp;

  opacity: 1;

  transform: translateY(0);

}



.toast.hide {

  animation-name: slideOutDown;

  opacity: 0;

  transform: translateY(100%);

}



.toast.success {

  background-color: #006600;

}



.toast.error {

  background-color: #b30000;

}



.toast .closeBtn {

  background: transparent;

  border: none;

  color: white;

  font-size: 16px;

  cursor: pointer;

  margin-left: 15px;

}



/* Animations */

@keyframes slideInUp {

  from {

    opacity: 0;

    transform: translateY(100%);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes slideOutDown {

  from {

    opacity: 1;

    transform: translateY(0);

  }

  to {

    opacity: 0;

    transform: translateY(100%);

  }

}





/*** Activities ***/

.activitiesContainer h1 {

  margin: 32px 0 -10px 0;

  text-align: center;

}

.giftcard-heading{
   margin: 32px 0 -10px 0;

  text-align: center;
}

/*** Reset Password ***/

#resetPasswordModal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.5);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 1000;

}