@font-face {font-family: "Poppins-Bold";src: url(../Fonts/Poppins-Bold.ttf);}
@font-face {font-family: "Poppins-Light";src: url(../Fonts/Poppins-Light.ttf);}
@font-face {font-family: "Poppins-Medium";src: url(../Fonts/Poppins-Medium.ttf);}
@font-face {font-family: "Poppins-Regular";src: url(../Fonts/Poppins-Regular.ttf);}
@font-face {font-family: "Poppins-SemiBold";src: url(../Fonts/Poppins-SemiBold.ttf);}


.poppins-medium{font-family: "Poppins-Medium";}

.copy-name-text {border: 1px solid#1083E0;color: #1083E0 !important;width: 50%;font-family: "Poppins-Medium";font-size: 12px;padding: 10px;transition: background-color 0.3s ease, color 0.3s ease;}

.copy-name-text:hover {background-color: #1083E0;color: #ffffff !important;}

.open-content-text {background: #ff0000;color: #FFF !important;width: 50%;font-family: "Poppins-Medium";font-size: 12px;padding: 10px;transition: background-color 0.3s ease, transform 0.3s ease;}

.open-content-text:hover {background-color: #961414;transform: scale(1.05);}
.open-content-text-submit {background: #1083E0;color: #FFF !important;width: 50%;font-family: "Poppins-Medium";font-size: 12px;padding: 10px;transition: background-color 0.3s ease, transform 0.3s ease;}

.open-content-text-submit:hover {background-color: #0b3e68;transform: scale(1.05);}

:root {--fs-xl: 2.3rem;--fs-600: 1.8rem;--fs-500: 1.5rem;--fs-400: 1.125rem;}
body{ background-color: #EFF2F4;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{font-family: "Poppins-Medium";}
li{list-style-type: none;}
a{text-decoration: none;}
.error-message {font-size: 0.8em;color: red;margin-top: 5px;font-weight: normal;font-family: "Poppins-Regular";}
.container{width: 100%;max-width: 1320px;}
/* ================================================================== Home screen ======================================================== */


/* ==================================================================   side-navbar ======================================================== */

.user-name-text{font-size: 16px; font-family: "Poppins-Medium";color: #5D7285;display: inline-block;max-width: 174px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-wrap: break-word;}
.imagepick-navbar-header{background-color: #fff;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;padding: 10px 35px; min-height: 90px;}
.imagepick-creat-event-header{background-color: #fff;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;padding: 24px 35px;height: 90px;}
.offcanvas.offcanvas-start { width: 316px; padding: 24px 35px;background-color: #FFF; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;border: none;}
.sidebar-header-content .home-sidebar-content{background-color: #E9F5FE;padding: 11px 14px;}
.sidebar-header-content .home-sidebar-content a{color: #1083E0 !important; padding: 0;font-size: 14px;font-family: "Poppins-SemiBold";}
.sidebar-header-content .home-sidebar-content a img{ width: 23px;height: 23px;}
.sidebar-header-content .create-event-sidebar{margin-top: 2px; padding: 11px 14px;}
.sidebar-header-content .my-event-sidebar{margin-top: 2px; padding: 11px 14px;}
.sidebar-header-content .profile-event-sidebar{margin-top: 2px; padding: 11px 14px;}
.imagepick-header-sidebar{margin-top: 50px;display: flex;align-items: normal;flex-direction: column;justify-content: space-between;}
.sidebar-header-content .create-event-sidebar a{color: #5D7285 !important;font-family: "Poppins-Medium"; font-size: 14px;}
.sidebar-header-content .create-event-sidebar img a{ width: 23px;height: 23px;}
.sidebar-header-content .my-event-sidebar a{color: #5D7285;font-family: "Poppins-Medium"; font-size: 14px;}
.sidebar-header-content .profile-event-sidebar a{color: #5D7285 !important;font-family: "Poppins-Medium"; font-size: 14px;}
.imagepick-ul-sidebar .profile-event-sidebar{margin-top: 2px; padding: 11px 14px; list-style-type: none;}
.imagepick-ul-sidebar .profile-event-sidebar a{color: #5D7285 !important;font-family: "Poppins-Medium"; font-size: 14px;}
.imagepick-navbar-btn{background-color: #1083E0;}
.sidebar-header-content .create-event-active{background-color: #E9F5FE;padding: 11px 14px;margin-top: 2px;}
.sidebar-header-content .create-event-active a{color: #1083E0 !important; padding: 0;font-size: 14px;font-family: "Poppins-SemiBold";}
.sidebar-header-content .create-event-active a img{ width: 23px;height: 23px;}

.sidebar-header-content .home-content-unactive{padding: 11px 14px;}
.sidebar-header-content .home-content-unactive a{color: #5D7285 !important;font-size: 14px;font-family: "Poppins-SemiBold";}
.sidebar-header-content .home-content-unactive a img{ width: 23px;height: 23px;}

.sidebar-header-content .nav-item:hover{color: #1083E0;background-color: #E9F5FE;}
.dropdown-menu.dropdown-menu-center{left: auto;right: 0;}

/* ================================================================== content-start ======================================================== */

.dashboard-container{padding: 63px;font-family: "Poppins-Regular";}
.summary-header-text h3{font-size: var(--fs-500); color: #5D7285;font-family: "Poppins-SemiBold";  }
.summary-manage-content a{  text-decoration: none;color: #5D7285; font-size: 16px;font-family: "Poppins-Medium";}
.summary-manage-content button{width: 100%;background-color: #1083E0;color: #fff;padding: 14px 20px; border: none; font-family: "Poppins-SemiBold"; font-size: 16px;border-radius: 6px;}
.dashboard-container-section {border-bottom: 1px solid #E4E4E4;padding-bottom: 11px;}
.event-content-conatiner{margin-top: 40px;gap: 30px;}
.event-create-content img{max-width: 42px; height: 52px;}
.event-create-content h3{font-size: var(--fs-500);color: #5D7285;margin-top: 18px;font-family: "Poppins-SemiBold";}
.event-create-content p{font-size: 16px;color: #686868;font-family: "Poppins-Regular";}
.event-create-content{padding: 17px 34px;background-color: #FFDBFD;border-radius: 12px;}
.event-published-content img{max-width: 42px; height: 52px;}
.event-published-content h3{font-size: var(--fs-500);color: #5D7285;margin-top: 18px;font-family: "Poppins-SemiBold";}
.event-published-content p{font-size: 16px;color: #686868;font-family: "Poppins-Regular";}
.event-published-content{padding: 17px 34px;background-color: #D8E0FF;border-radius: 12px;}
.event-content-conatiner .nav-link{width: 100%;max-width: 215px;}

/* ================================================================== Home screen-end ======================================================== */


/* ================================================================== create event ======================================================== */


.create-event-container{ width: calc(100% - 279px); margin-left: 279px;padding-left: 63px!important;}
.create-event-text h3{  line-height: 1;color: #1083E0;font-size:var(--fs-500) !important;font-family: "Poppins-SemiBold";margin-bottom: 0;}
.create-event-text {width: 100%}
.imagepick-navbar-header .offcanvas-right:has(.icon-menu){width: 100%;margin-top: 15px;}
.create-event-img-content{display: none;}
.name-input label{font-size: 14px; font-family: "Poppins-Regular";color: #1D2026;}
.name-input input{border: 1px solid #E4E7E9; background-color: #fff; border-radius: 0; height: 48px;padding: 10px;font-family: "Poppins-Regular";font-size: 12px;line-height: 1.2; width: 100%;}

.input-wrapper { position: relative; display: inline-block; width: 100%; }
.input-wrapper input {width: 100%;height: 48px;padding: 10px;padding-right: 40px;font-family: "Poppins-Regular";font-size: 12px;border-radius: 0;}
.calendar-icon {position: absolute;right: 12px;top: 18px;display: flex;align-items: center;justify-content: center;font-size: 12px;color: #888;z-index: 10; cursor: pointer;}

.char-count { position: absolute; right: 12px; top: 24px; transform: translateY(-50%); font-size: 0.9rem; color: rgb(173, 168, 168); pointer-events: none;}
.char-count-text-area { position: absolute; right: 12px; top: 78%; transform: translateY(-50%); font-size: 0.9rem; color: rgb(173, 168, 168); pointer-events: none;}
.date-i-container label { font-size: 14px; font-family: "Poppins-Regular";color: #1D2026; }
.date-i-container input {border: 1px solid #E4E7E9; background-color: #fff; border-radius: 0; height: 48px;padding: 10px;font-family: "Poppins-Regular";font-size: 12px; width: 100%;}
.state-checkout-input-content {margin-top: 20px;}
.state-checkout-input-content label { font-size: 14px; font-family: "Poppins-Regular";color: #1D2026; }
.state-checkout-input-content select {border: 1px solid #E4E7E9; background-color: #fff; border-radius: 0; height: 48px;padding: 10px;font-family: "Poppins-Regular";font-size: 12px; width: 100%;}
.state-checkout-input-content select option { font-size: 12px; font-family: "Poppins-Light"; }
.address-line-content{margin-top: 20px;}
.address-line-content label{ font-size: 14px; font-family: "Poppins-Regular";color: #1D2026; }
.address-line-content textarea {border: 1px solid #E4E7E9; background-color: #fff; border-radius: 0; height: 112px;padding: 10px;font-family: "Poppins-Regular";font-size: 12px; width: 100%;}
.radio-button-event label{color: #5D7285; font-size: 14px;font-family: "Poppins-Medium";}
.radio-button-container{margin-top: 32px;}
.radio-button-event + .radio-button-event{margin-top: 20px;}
.event-submit-btn input{width: 166px;height: 50px;background-color: #1083E0;color: #fff;border: none;border-radius: 4px;font-size: 16px;font-family: "Poppins-SemiBold";}
.event-submit-btn{margin-top: 50px;}
.switch {position: relative;display: inline-block;width: 60px;height: 27px;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.slider:before {position: absolute;content: "";height: 20px;width: 20px;left: 8px;bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;}
input:checked+.slider {background-color: #2196F3;}
input:focus+.slider {box-shadow: 0 0 1px #2196F3;}
input:checked+.slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}
.enable-disable-btn{border-bottom: 1px solid #E4E4E4;padding-bottom: 16px;}

.form-outline:has(.form-notch) .form-control:focus, .form-outline:has(.form-notch) .form-select:focus { box-shadow: none; border: none; }
.form-check-input, .form-check-input:focus{box-shadow: none!important;}
.form-control:focus, .form-select:focus{outline: none!important; box-shadow: none!important; border: 1px solid #1D2026;}
input:focus, select:focus, textarea:focus{outline: none!important;box-shadow: none!important;border: 1px solid #1D2026;}
.search-ealbum-content:has(input:focus){border-color: #1D2026;}
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__rendered{outline: none;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {-webkit-box-shadow: none!important;transition: background-color 5000s ease-in-out 0s!important;}

.input-group-text, .form-control{border-radius: 0;}

.form-label{font-family: "Poppins-Regular";font-size: 14px;}

.invalid-feedback{font-family: "Poppins-Regular";font-size: 14px;}
.btn{font-family: "Poppins-SemiBold";}

/* ==================================================================  my event ======================================================== */

.my-event-img-content {background-color: #fff;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;border-radius: 4px;}
.my-event-card-content {border: none;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;border-radius: 4px;}
.my-event-card-content .card-body.my-event-card{width: calc(100% - 60px);margin-right: 10px;}
.my-event-card{width: calc(100% - 60px);margin-right: 10px}
.my-event-card-content .card-img-top {height: 300px;object-fit: cover;object-position: top center;transition: all 0.3s ease-in-out;}
.my-event-card h5 { line-height: 1; max-width: 280px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap !important; white-space: normal; word-wrap: break-word; font-size: 15px;font-family: "Poppins-SemiBold";}
.my-event-card p { white-space: normal; line-height: 1; max-width: 280px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap !important; word-wrap: break-word; font-size: 14px;color: #5D7285;font-family: "Poppins-Regular";margin-top: 7px;}
.img-container {position: relative;overflow: hidden;}
.img-container img {width: 100%;height: 100%;object-fit: cover;}
.hover-content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));display: flex;align-items: center;justify-content: center;opacity: 0;transition: all 0.3s ease-in-out;}
.img-container:hover .hover-content {opacity: 1;}
.icon-btn {border-radius: 50%;width: 34px;height: 34px;display: flex;align-items: center;justify-content: center;padding: 7px;flex-shrink: 0;box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;}
.icon-btn img {width: 27px;height: 23px;display: block;}
.my-event-card-text{font-size: 36px !important;}
.my-event-card-p-content{font-size: 22px;}

/* ==================================================================  my profile ======================================================== */


.form-profile-pic-box{padding: 24px 31px;background-color: #fff;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; text-align: center;}
.form-profile-pic{ display: block; position:relative; margin-bottom: 10px;}
.form-profile-pic #profile-photo{ opacity: 0; position: absolute; z-index: -11; }
.form-profile-pic .form-label{ font-size: 14px; line-height: 17px; font-weight: 400; width: 28px; height: 28px; position: absolute; right: 6px; bottom: 6px; margin: 0; padding: 4px; background: #3454CD; border: 2px solid #fff; border-radius: 50%; }
.form-profile-pic .form-label > span{ width: 100%;height: 100%;}
.form-profile-pic #profile-output{ width: 142px; height: 142px; object-fit: cover; border-radius: 50%; display: none; }
.form-profile-pic.added #profile-output{ display: block; z-index: 1; }
.form-profile-pic small{ font-family: "Poppins-SemiBold"; font-size: 16px; margin-bottom: 0; margin-top: 13px; }
.form-profile-pic-box p{color: #5D7285;font-size: 16px;margin-top: 10px;font-family: "Poppins-Regular";margin-bottom: 0;}
.form-profile-pic .form-label > span i{font-size: 10px;color: #fff;}
.form-profile-container {width: 260px;flex-shrink: 0;}
.form-profile-pic { width: 100%; text-align: center;}
.profile-edit-container { flex-grow: 1;}
.profile-edit-content {width: 100%;margin: 0 auto;}
.my-profile-row-container{padding: 0 63px 40px;width: 100%;position: relative;top: -60px; display: flex;gap: 18px;}
.my-profile-conatiner{background-color: #3454CD;padding: 80px 63px;flex-wrap: wrap;}
.my-profile-conatiner a, .my-profile-conatiner button{width: calc(33.33% - 12px);flex-grow: 1;}
.my-profile-conatiner a button{width: 100%;}
.drive-i-container label {font-size: 14px;font-family: "Poppins-Regular";}
.drive-i-container input {background-color: #ffffff; border: 1px solid #E4E7E9; max-width: 100%; height: 48px; font-family: "Poppins-Light"; font-size: 12px; padding: 14px 16px; border-radius: 0;}
.drive-i-container:has(.char-count) input { padding-right: 50px; }
.drive-i-container:has(input.form-control + #char-count) input.form-control { padding: 14px 46px 14px 16px;}
.mobile-n-content label { font-size: 14px; font-family: "Poppins-Regular";}
.mobile-n-content { margin-top: 20px;}
.mobile-n-input select { flex: 0 0 83px !important; background-position: calc(100% - 7px) 50% !important; border: none; background-color: #ffffff; font-family: "Poppins-Light";}
.mobile-n-input input { border: none!important; background-color: #ffffff; font-family: "Poppins-Light"; border-left: 1px solid #E4E7E9!important;padding: 10px;height: 48px;border-radius: 0;font-size: 14px;}
.mobile-n-input { max-width: 100%; border: 1px solid #E4E7E9; border-radius: 0;}
.state-i-container label { font-size: 14px; font-family: "Poppins-Regular";}
.state-i-container select {background-color: #ffffff; border: 1px solid #E4E7E9; max-width: 100%; height: 48px; font-family: "Poppins-Light"; font-size: 12px; padding: 14px 16px; border-radius: 0;}
.state-i-container select option { font-size: 12px;font-family: "Poppins-Light";}
.general-detail-text h2 { color: #000000; font-family: "Poppins-SemiBold"; font-size:var(--fs-400);}
.save-submit-value input{background-color: #1083E0;width: 100%;height: 50px;color: #fff; font-family: "Poppins-SemiBold";font-size: 16px;border: none;}
.save-submit-value{margin-top: 30px;}
.profile-edit-content{padding: 34px 31px;background-color: #fff;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.create-frame-btn{padding: 16px 25px; border: none;border-radius: 4px; font-family: "Poppins-SemiBold";background-color: #fff;}
.frame-size-btn{padding: 16px 25px; border: none;border-radius: 4px; font-family: "Poppins-SemiBold";background-color: #fff;}
.drive-i-container select{background-color: #ffffff;border: 1px solid #E4E7E9;max-width: 100%;height: 48px;font-family: "Poppins-Light";font-size: 12px;padding: 14px 16px;border-radius: 0;}

/* ==================================================================  my event-img ======================================================== */


.delete-image-content{background: white;border-radius: 96px;position: absolute;width: 34px;height: 34px;display: flex;align-items: center;justify-content: center;top: 0.5rem;right: 0.5rem;cursor: pointer;}
.download-image-content{background: white;border-radius: 96px;position: absolute;width: 34px;height: 34px;display: flex;align-items: center;justify-content: center;top: 3.5rem;right: 0.5rem;cursor: pointer;}

.header-icon-menu-content{color: #5D7285;font-size: 14px;font-family: "Poppins-Medium";}

.my-event-main-container {display: flex;flex-direction: column;justify-content: center;align-items: center;color:#333333;margin-top: 53px;}

ul {list-style-type: none;padding: 0;margin: 0;}

.pagination-main-content {display: flex;justify-content: center;align-items: center;height: auto;border-radius: 0.6rem;background: #ffffff;box-shadow: 0 0.8rem 2rem rgba(90, 97, 129, 0.05);padding: 7px 40px;border: 2px solid #1083E0;flex-wrap: wrap;border-radius: 17px;}

.page__numbers, .page__btn, .page__dots {display: flex;justify-content: center;align-items: center;margin: 0.5rem;font-size: 1.2rem;cursor: pointer;}

.page__dots {width: 2rem;height: 2rem;cursor: initial;}

.page__numbers {width: 2rem;height: 2rem;border-radius: 0.4rem;font-size: 14px;font-family: "Poppins-Regular";}

.page__numbers:hover {color: #1083E0;}

.page__numbers.active {color: #ffffff !important;background: #1083E0;font-weight: 600;border-radius: 50%;padding: 0.4rem;}

.page__btn {color: var(--greyLight);pointer-events: none;}

.page__btn.active {pointer-events: initial;}

.page__btn {color: #1083E0 !important;}

.page__btn .material-icons i {font-size: 18px;}
.my-event-list {display: flex;flex-wrap: wrap;gap: 1rem;padding: 0;margin: 0;list-style: none;justify-content: center;}

.my-event-list li {flex: 1 1 calc(25% - 1rem); max-width: calc(25% - 1rem); cursor: pointer;}

.my-event-card-content {position: relative;}

.card-img-top {width: 100%;height: auto;border-radius: 0.75rem;}

/* .delete-image-content {position: absolute;top: 0.5rem;right: 0.5rem;cursor: pointer;} */

.header-icon-menu-content { color: #5D7285; font-size: 14px; font-family: "Poppins-Medium";display: flex; align-items: center;gap: 8px; }

.add-cart-image-content{background: white;border-radius: 96px;position: absolute;width: 34px;height: 34px;display: flex;align-items: center;justify-content: center;top: 6.5rem;right: 0.5rem;cursor: pointer;}

/* ================================================================== user-access ======================================================== */

.user-access-container{background-color: #fff;padding: 41px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;width: 727px;}

.upload-box {position: relative;display: inline-block;width: 200px;height: 200px;border-style: dashed;border-color: #1083E0;border-width: 2px;border-radius: 10px;text-align: center;cursor: pointer;background-color: #fff;}
.upload-icon {width: 50px;height: 50px;margin-top: 30px; /* Adjust as needed */}
.upload-text {margin-top: 10px;font-size: 16px;color: #333;font-family: "Poppins-SemiBold";}

.front-cover-text + .upload-box{height: 300px;}


/* ================================================================== share ======================================================== */

.guest-access-content h3{font-size: var(--fs-500);color: #1083E0;font-family: "Poppins-SemiBold";}
.guest-access-content p{color: #5D7285; font-size: 16px;margin-top: 10px;font-family: "Poppins-Regular"; margin-bottom: 0;}
.guest-access-content{padding: 10px 16px; background-color: #E0F2FF;border-left: 3px solid #1083E0;width: 70%;}
.guest-access-url-content{background-color: #fff;margin-top: 38px;padding: 23px 26px;}
.guest-access-qr-code-content img{max-width: 196px;height: 179px;}
.guest-access-qr-code-content button{background-color: #1083E0;color: #fff;border-radius: 4px;padding: 13px 20px;border: none;font-family: "Poppins-SemiBold";font-size: 16px;}


.url-input {flex: 1;padding: 8px;font-size: 16px;border: 1px solid #E9EAF0;width: 100%;height: 48px;background-color: #fff;color: #8C94A3;font-family: "Poppins-Regular";}

.copy-button {padding:8px;font-size: 16px;background-color: #E9F5FE;color: #1083E0;border: none;cursor: pointer;height: 48px;font-family: "Poppins-SemiBold";border: 1px solid #1083E0;}

.container-content label{font-family: "Poppins-SemiBold";font-size: 16px;}


.guest-access-url-content {display: flex;flex-wrap: wrap; width: 100%;}
.guest-access-qr-code-content {flex: 0 0 20%; max-width: 20%; padding: 10px;box-sizing: border-box;}
.url-pin-content {flex: 0 0 80%; max-width: 80%; padding: 10px;box-sizing: border-box;}
.container-content { width: 100%;}
.copy-button{padding: 12px 17px;}




/* ================================================================== favorite ======================================================== */


.favorite-text-content{font-size: 16px;font-family: "Poppins-SemiBold";margin-top: 15px;}
.favorite-modal-container {background: linear-gradient(to top, rgba(7, 7, 7, 0.74) 74%, rgba(7, 7, 7, 1)),linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);border: none;}
.favorite-modal-body-container {position: relative;padding: 0;height: 90vh; /* 90% of viewport height */overflow: hidden; /* Hide overflowing gradients */}
.favorite-modal-body-container img {width: 100%;height: 100%;object-fit: cover;position: relative;z-index: 0;/* filter: brightness(0.8);  */}
.favorite-modal-body-container::before {content: '';position: absolute;top: 0;left: 0;width: 100%;  height: 250px;background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);z-index: 1;}
.favorite-modal-body-container::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 250px;background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);z-index: 1;}
.favorite-modal-btn-close {position: absolute;top: 10px;right: 10px;z-index: 2; /* Ensure close button is above gradients */filter: invert(1); /* Change close button color to white */}

/* ================================================================== Frame-card ======================================================== */

.transaction-table-content th {padding: 25px;font-family: "Poppins-SemiBold";font-size: 16px;border: none;background-color: #1083E0 !important;color: #fff;}
.transaction-table-data td {padding: 25px 20px;border: none;font-family: "Poppins-Medium";}
.transaction-table-data td a {color: #000;}
.transaction-table-container {min-width: 1200px;border: 1px solid #ECECEC;}

.frame-img-text {font-size: 16px;font-family: "Poppins-SemiBold";}

.add-frame-form {margin-top: 70px;}

.cart-frame-tr-img {width: 150px;height: 80px;object-fit: contain;}
/* ================================================================== verify-pin ======================================================== */


.verify-pin-banner img {width: 100%; height: 513px;}
.verify-pin-form img { width: 133px; height: 24px;}
.verify-pin-form header h2{font-size: var(--fs-600);font-family: "Poppins-SemiBold";margin-top: 48px;}
.verify-form-container{margin-top: 48px;width: 100%;}
.verify-pin-form{ max-width: 560px; width: 100%;background-color: #fff;padding: 60px;border-radius: 11px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.back-button {position: absolute;top: 10px;left: 10px;padding: 10px 15px;font-size: 16px;color: white;border: none;border-radius: 5px;cursor: pointer;z-index: 1000; font-family: "Poppins-Medium";}

.back-button:hover {background-color: #0056b3;}
.back-button img{width: 19px;height: 19px; margin-right: 10px;}

/* ================================================================== verify-otp ======================================================== */

.save-submit-value a{ font-family: "Poppins-SemiBold"; font-size: 14px; color: #1083E0;text-decoration: underline; }

.otp-inputs { display: flex; justify-content: space-between; gap: 14px; } .otp-input { background-color: #ffffff; border: 1px solid #E4E7E9; max-width: 63px; height: 60px; font-family: "Poppins-Medium"; font-size: 16px; padding: 14px 16px; border-radius: 7px; text-align: center; } .otp-input:last-child { margin-right: 0; }


/* ================================================================== find-face ======================================================== */

#profile-output {width: 230px;height: 230px;object-fit: cover;border-radius: 50%;margin: 0 auto 9px;object-position: top center;}

.select-take-file-content {width: 30%;}
.select-take-file-form {width: 70%;}
.select-take-file-btn button {width: 110px;height: 50px;padding: 7px;background-color: #1083E0;color: #fff;border-radius: 4px;border: none;font-size: 14px;font-family: "Poppins-SemiBold";}

/* ================================================================== login ======================================================== */

.sign-in-section-header{width: 100%;max-width: 500px;margin: 0 auto;}
.login-reg-header{margin-top: 48px;background-color: #DBF1FC;padding: 10px; display: flex;justify-content: center;flex-wrap: wrap;}
.login-tab-content{width: 50%;padding: 11px 20px;background-color: #fff; cursor: pointer;text-align: center;}
.login-tab-content p{font-family: "Poppins-SemiBold";color: #000; font-size: 16px; margin-bottom: 0;}
.register-tab-content{width: 50%;padding: 11px 20px; cursor: pointer;text-align: center;}
.register-tab-content p{font-family: "Poppins-Medium";color: #000; font-size: 16px; margin-bottom: 0;}
.password-input input{background-color: #ffffff; border: 1px solid #E4E7E9; width: 100%; height: 50px; font-family: "Poppins-Light"; font-size: 12px; padding: 14px 16px; border-radius: 0; }
.password-input input:focus{border-color: #1D2026;}
.password-input { position: relative; } .password-input i { position: absolute; right: 1rem; top: 70%; transform: translateY(-50%); cursor: pointer; color: #C4C4C4; }
.password-input{margin-top: 20px;}
.password-input label{font-family: "Poppins-Regular";font-size: 14px;}
.forget-password-content{ margin-top: 20px;}
.forget-password-content a{font-family: "Poppins-Medium";font-size: 14px;color: #1083E0;text-decoration: underline;}
.signin-form-conatiner{margin-top: 48px;}
.or-container {display: flex;align-items: center;justify-content: center;margin-top: 22px;}
.or-line { flex-grow: 1;height: 1px;background-color: #E4E7E9;margin: 0 10px;}
.or-text {white-space: nowrap;font-size: 14px;font-family: "Poppins-SemiBold";}
.login-btn {display: flex; align-items: center; justify-content: center; border: 1px solid #E4E7E9; padding: 10px; border-radius: 41px; margin: 5px; width: 100%; text-align: center;}
.login-icon { margin-right: 10px; }
.social-buttons { display: flex;justify-content: space-between;margin-top: 42px;}
.social-buttons a {flex: 1;margin: 5px;text-decoration: none;font-family: "Poppins-Regular";font-size: 14px;color: #000;}
.welcome-section {background-color: #1083E0;display: flex;flex-direction: column;justify-content: center;align-items: center;border-top-left-radius: 69px;border-bottom-left-radius: 81px;}
.welcome-text {color: white; font-size: var(--fs-xl);font-family: "Poppins-SemiBold";}
.center-image {width: 100%; max-width: 609px;}
.signin-row-header{height: 100vh;}
.signin-logo img{width: 236px;height: 40px;}
.welcome-section p{text-align: center;font-family: "Poppins-Medium";font-size: 16px;color: #fff; margin-top: 10px;width: 60%;}


/* ================================================================== otp ======================================================== */

.resent-otp-text{margin-top: 33px;}
.resent-otp-text span{font-size: 16px;font-family: "Poppins-Medium";}
.resent-otp-text span a{color: #C2C2C2;font-family: "Poppins-Medium";font-size: 16px; margin-left: 10px;}
.otp-content-header h2{font-size: 28px;font-family: "Poppins-SemiBold";}
.otp-content-header p{margin-top: 33px; font-family: "Poppins-Regular"; font-size: 16px;  }


.back-button-otp{position: absolute;top: 10px;left: 10px;padding: 10px 15px;font-size: 16px;color: rgb(0, 0, 0);border: none;border-radius: 5px;cursor: pointer;z-index: 1000; font-family: "Poppins-Medium";}
.back-button-otp img{width: 19px;height: 19px; margin-right: 10px;}

/* ================================================================== otp end ======================================================== */

/* ================================================================== 404 ======================================================== */
.page-not-found-header div img {width: 346px;height: 365px;object-fit: cover;}
.page-not-found-content {margin-top: 35px;}
.page-not-found-content h3 {font-size: 36px;font-family: "Poppins-SemiBold";line-height: 77px;margin-bottom: 0;text-align: center;}
.page-not-found-content p {font-size: 16px;font-family: "Poppins-Regular";line-height: 24px;margin-bottom: 0;text-align: center;width: 60%;line-height: 28px;}

.cta-gs {padding: 14px 26px;background-color: #1083E0;color: #FFFFFF;font-family: "Poppins-Bold";border: none;margin-top: 31px;}
.cta-gs:hover {background-color: #1083E0 !important;color: #ffffff;}

.imagepick-page-not-found {height: auto;min-height: 100vh;overflow: auto;display: flex;align-items: center;justify-content: center;}



/* ================================================================== Avilable frame ======================================================== */


.your-frame-img-conatainer {overflow-y: scroll;overflow: auto;white-space: nowrap;flex-wrap: no-wrap;}
.your-frame-img-conatainer {height: 700px;}
.your-frame-delete-img {background: white;border-radius: 96px;width: 34px;height: 34px;display: flex;align-items: center;justify-content: center;top: 0.5rem;right: 0.5rem;cursor: pointer;}
.your-frame-delete-content-btn {background-color: #000;display: flex;align-items: center;justify-content: space-between;padding: 17px;padding-right: 8px;border-radius: 57px;width: 130px;height: 48px;}

.your-frame-img-conatainer::-webkit-scrollbar {width: 10px;}
.your-frame-img-conatainer::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;border-radius: 10px;}
.your-frame-img-conatainer::-webkit-scrollbar-thumb {background: #888;border-radius: 10px;}
.your-frame-img-conatainer::-webkit-scrollbar-thumb:hover {background: #3454CD;}
.your-frame-img-conatainer {width: 100%;margin: 0 auto;padding: 34px 31px;background-color: #fff;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}

.available-frame-content-text {font-size: 16px;color: #000;font-family: "Poppins-Medium";}
.available-frame-delete-text {font-size: 16px;color: #ffffff;font-family: "Poppins-Medium";}
.available-frame-text h3 {font-family: "Poppins-SemiBold";font-size:var(--fs-500);text-align: center;}

/* ==================================================================  media query ======================================================== */
@media (max-width:1500px) {
	.header-icon-menu-content .menu-text { display: none; }
}
@media (max-width:1300px) {
	.select-take-file-form { width: 60% !important; }
	.select-take-file-content { width: 40% !important; }
}
@media (min-width:1199.98px) {
	.guest-access-qr-code-content { flex: 0 0 20%; max-width: 20%; }
	.url-pin-content { flex: 0 0 80%; max-width: 80%; }
	.offcanvas.offcanvas-start { transform: none; visibility: visible; }
	.navbar-toggler { display: none; }
	.dashboard-container { width: calc(100% - 316px); margin-left: 316px; }
	.dashboard-container:has(.gallery) { margin: 0 auto; }
}
@media (max-width:1199.98px) {
	.create-event-container { width: 100%; padding-left: 0 !important; }
	.header-icon-menu-content img { margin-right: 0; }
	.create-event-text h3 { font-size: 1.5rem; }
	.header-icon-menu-content { font-size: 12px; }
	.my-event-list li { flex: 1 1 calc(33.33% - 1rem); max-width: calc(33.33% - 1rem); }
	.create-event-text { display: none; }
	.create-event-img-content { display: block; }
	.navbar-toggler { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
	.create-event-container { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; margin-left: 0; }
	.imagepick-navbar-header { padding: 10px 20px; padding-right: 90px; }
	.imagepick-navbar-header:has(.icon-menu) { padding: 10px 20px; }
	.imagepick-navbar-header:has(.icon-menu) .navbar-toggler { top: 10px; right: 20px; transform: none; }
}
@media (max-width:992px) {
	.welcome-text { font-size: var(--fs-500); font-weight: 800; }
	.my-event-list li { flex: 1 1 calc(50% - 1rem); max-width: calc(50% - 1rem); }
	.my-profile-conatiner a, .my-profile-conatiner button { width: auto; }
	.imagepick-creat-event-header .offcanvas-header { flex-wrap: wrap; }
	.select-take-file-content { margin-bottom: 30px; }
}
@media (max-width:768px) {
	.page-not-found-header div img { width: 100% !important; }
	.page-not-found-content p { width: 84% !important; }
	.select-take-file-content, .select-take-file-form { width: 100% !important; }
	.select-take-file-btn { width: 100%; display: flex; flex-direction: column; gap: 10px; }
	.select-take-file-btn button { width: 100%; }
	.guest-access-qr-code-content, .url-pin-content { flex: 0 0 100%; max-width: 100%; }
	.guest-access-url-content { flex-direction: column; }
	.guest-access-content { width: 100%; }
	.header-icon-menu-content { font-size: 10px; }
	.offcanvas-right { display: flex; align-items: start; }
	.create-event-text h3 { font-size: 1.25rem; }
	.my-event-list li { flex: 1 1 calc(100% - 1rem); max-width: calc(100% - 1rem); }
	.pagination-main-content { padding: 10px; }
	.page__numbers, .page__btn, .page__dots { margin: 0.4rem; font-size: 1rem; }
	.page__numbers { width: 1.8rem; height: 1.8rem; }
	.page__dots { width: 1.8rem; height: 1.8rem; }
	.mobile-n-content { display: block; }
	.date-header { display: block; }
	.d-n-header { display: block; }
	.form-profile-pic { margin-bottom: 20px; }
	.dashboard-container { padding: 30px 8px; }
	.form-profile-pic #profile-photo { display: none; }
	.form-profile-container { width: 100%; margin-bottom: 30px; }
	.profile-edit-container { width: 100%; }
	.my-profile-row-container { display: block; }
}
@media (min-width:769px) {
	.form-profile-container { width: 30%; }
}
@media (min-width:769px) and (max-width:1199px) {
	.guest-access-qr-code-content { flex: 0 0 25%; max-width: 25%; }
	.url-pin-content { flex: 0 0 75%; max-width: 75%; }
}
@media (max-width:576px) {
	.imagepick-navbar-header .offcanvas-right { flex-wrap: wrap; }
	.create-frame-btn { padding: 16px 6px; }
	.frame-size-btn { padding: 16px 6px; }
	.url-input, .copy-button { width: 100%; }
	.create-event-text h3 { font-size: 1rem; }
	.offcanvas-right { display: flex; align-items: start; }
	.header-icon-menu-content { font-size: 8px; }
	.imagepick-navbar-btn { margin-right: 0; }
	.imagepick-creat-event-header .offcanvas-header h3 { font-size: 18px; max-width: 265px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: break-word; }.my-event-card{margin-right: 0;}.my-event-card h5 { max-width: 220px;}
}
@media (max-width:521px) {
	.otp-inputs { gap: 8px; }
	.otp-input { max-width: 48px; height: 50px; padding: 10px 12px; font-size: 14px; }
	.verify-pin-form { padding: 30px; }
	.imagepick-creat-event-header { padding: 8px 30px; }
	.event-content-conatiner .nav-link { width: 100%; max-width: 100%; }
}
@media (max-width:483px) {
	.pagination-main-content { padding: 8px; }
	.page__numbers, .page__btn, .page__dots { margin: 0.3rem; font-size: 0.8rem; }
	.page__numbers { width: 1.5rem; height: 1.5rem; }
	.page__dots { width: 1.5rem; height: 1.5rem; }
	.event-create-content { width: 100%; }
	.event-published-content { width: 100%; }
	.web-logo { width: 106px; }
	.my-profile-row-container { padding: 25px 30px; }
	.loader > p { margin-bottom: 0; line-height: 1.2; }
	.loader { flex-direction: column; height: 80px !important; }
}
@media (max-width:449px) {
	.imagepick-creat-event-header { padding: 8px 30px; }
	.imagepick-navbar-header .offcanvas-right:has(.icon-menu){justify-content: flex-end;}
}
@media (max-width:391px) {
	.page-not-found-content { margin: 0 !important; }
	.page-not-found-content h3 { font-size: var(--fs-500) !important; }
	.otp-inputs { gap: 4px; }
	.otp-input { max-width: 40px; height: 45px; padding: 8px 10px; font-size: 12px; }
}
@media (max-width:366px) {
	.enable-disable-btn { display: block !important; }
	.radio-button-label { width: 70%; }
	.radio-button-event { display: flex; }
	.user-access-container { padding: 20px !important; }.user-name-text { font-size: 15px; }.user-name-box > a > img.ms-3{margin-left: 8px!important;}
}



.navbar-toggler-icon{background-image: var(--bs-navbar-toggler-icon-bg)!important;}
.dt-menu-icon{width: 24px;height: 24px;object-fit: contain;}

.select2.select2-container.select2-container--default.select2-container--disabled{background: #eee;}

.wedding-ealbum-content .card-text + div > span{display: flex;align-items: center;justify-content: center;gap: 4px;line-height: 1.2;}
.wedding-ealbum-content .card-text + div > span > img{width: 18px;height: 18px;object-fit: contain;}

.wedding-ealbum-content span[title] > a{width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;}
.wedding-ealbum-content span[title] > a > img{width: 100%;height: 100%;object-fit: contain;}

#frameSizesContainer{gap: 6px;}
#frameSizesContainer .form-check{width: calc(33.33% - 4px);}
#frameSizesContainer .form-check-label{width: calc(100% - 24px);white-space: nowrap;;text-overflow: ellipsis;overflow: hidden;font-family: "Poppins-Regular";font-size: 14px;}

#billingForm .drive-i-container .input-group>.form-control{min-height: auto;height: 48px;}
#billingForm  .select2-container--default .select2-selection--single .select2-selection__rendered {font-family: 'Poppins-Light';font-size: 12px;}
#billingForm .form-control, #billingForm .form-select{box-shadow: none;}

.mobile-n-input:has(input:focus){border-color: #1D2026;}

.modal-title{font-family: "Poppins-Medium";}
.modal-body{font-family: "Poppins-Regular";}
.dropdown-item{font-family: "Poppins-Regular";}

table th{font-family: "Poppins-SemiBold";}
table td{font-family: "Poppins-Regular";}

.swal2-title{font-family: "Poppins-SemiBold";}
.swal2-html-container{font-family: "Poppins-Regular";}
.swal2-styled.swal2-default-outline{font-family: "Poppins-Medium";}

.select2-selection__rendered, .select2-results__option{font-family: 'Poppins-Medium';font-size: 14px;}
.resent-otp-text{font-family: "Poppins-Regular";}
.resent-otp-text button{font-family: "Poppins-SemiBold";}
.alert{font-family: "Poppins-Regular";}
.loader{font-family: "Poppins-Regular", sans-serif!important;}