@charset "utf-8";
/*========================[MDH_LIGHT-DARK_COMMON]=========================*/
/*Custom Scrollbar*/
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 10px;}
::-webkit-scrollbar-thumb {background: #e9a13b; border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: #997748; }
/*::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 10px;}
::-webkit-scrollbar-thumb {background: #040cac; border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: #04095e; }*/

body {background-color: #121212;color: #f0f0f0;font-family: "Segoe UI", sans-serif;}
body main{background: #0b061e;}
body.light main{background: #f6f8ff;}

/*======================== New Subscription popup =========================*/


/* Scoped dark theme for modal */
.custom-dark-modal .modal-content {background-color: #1c2431;color: #e2e8f0;border: 1px solid #334155;}
.custom-dark-modal .modal-header,
.custom-dark-modal .modal-footer {border-color: #334155;}
.custom-dark-modal .modal-title {color: #facc15;}
.custom-dark-modal .close {color: #e2e8f0;opacity: 0.8;}

.custom-dark-modal .title {font-weight: 600;font-size: 22px;color: #fff;}
.custom-dark-modal .subtitle {font-size: 16px;color: #bbb;margin-bottom: 20px;}
.custom-dark-modal .container {min-width: 700px;margin-bottom: 20px;}

/*tab-2-*/


/* Tabs-2-3 */
.custom-dark-modal .nav-tabs {border-bottom: 1px solid #334155;}
.custom-dark-modal .nav-tabs .nav-link {color: #94a3b8;}
.custom-dark-modal .nav-tabs .nav-link.active {color: #facc15;background-color: #1e293b;border-color: #334155 #334155 transparent;}
.custom-dark-modal .tab-content {background-color: #1e293b;border: 1px solid #334155;border-top: none;padding: 1rem;}

/* Table */
.custom-dark-modal .table {color: #e2e8f0;}
.custom-dark-modal .status-paid {background-color: #14532d;color: #4ade80;font-size: 12px;border-radius: 10px;padding: 3px 10px;text-transform: uppercase;}

/* Buttons */
.custom-dark-modal .btn-outline-secondary {color: #facc15;border-color: #475569;}
.custom-dark-modal .btn-outline-secondary:hover {background-color: #334155;color: #fff;}

.custom-dark-modal .form-control,
.custom-dark-modal .custom-select {background-color: #0f172a;border: 1px solid #475569;color: #e2e8f0;}
.custom-dark-modal .form-control::placeholder {color: #64748b;}
.custom-dark-modal .form-row > * {margin-bottom: 10px;}


/*tab-4-Upgrade Plan*/
.custom-dark-modal #upgrade .card {background-color: #1e1e1e;border: 1px solid #333;border-radius: 12px;padding: 20px;color: #fff;transition: 0.3s;}
.custom-dark-modal #upgrade .card:hover {border-color: #00bcd4;transform: translateY(-5px);}
.custom-dark-modal #upgrade .active-card {border: 2px solid #00bcd4;}
.custom-dark-modal #upgrade .badge-popular {position: absolute;top: -12px;left: 50%;transform: translateX(-50%);background-color: #ff9800;color: #fff;padding: 3px 10px;border-radius: 50px;font-size: 12px;}
.custom-dark-modal #upgrade .btn-plan {margin-top: 10px;border-radius: 8px;}
.custom-dark-modal #upgrade .price-flash {animation: flash-bg 0.5s ease-in-out;}

@keyframes flash-bg {
0% { background-color: #ffee58; color: #000; }
100% { background-color: transparent; color: inherit; }
}

.custom-dark-modal #upgrade .promo-section {background: #1a1a1a;border: 1px dashed #777;padding: 20px;border-radius: 10px;}
/* .custom-dark-modal #upgrade .section-title {color: #f06292;}
.custom-dark-modal #upgrade .nav-link {color: #bbb;}
.custom-dark-modal #upgrade .nav-link.active {color: #fff;font-weight: bold;} */


/*tab-5-Change Password*/
.custom-dark-modal #password .form-control {background-color: #101010;color: #ffffff;border: 1px solid #333;transition: box-shadow 0.3s, border-color 0.3s;}
.custom-dark-modal #password .form-control::placeholder {color: #888;}
.custom-dark-modal #password .form-control:focus {background-color: #101010;border-color: #2962ff;box-shadow: 0 0 8px 2px rgba(41, 98, 255, 0.5); /* Glow effect */
color: #fff;outline: none;}
.custom-dark-modal #password .form-group label {font-weight: 500;color: #ccc;}

.custom-dark-modal #password .btn-update {background: linear-gradient(135deg, #2962ff, #00bcd4);color: #fff;font-weight: 500;border-radius: 10px;padding: 12px 20px;font-size: 16px;border: none;transition: background 0.3s ease, box-shadow 0.3s ease;}
.custom-dark-modal #password .btn-update:hover {background: linear-gradient(135deg, #0039cb, #0097a7);box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);}

/* .custom-dark-modal #password .tab-nav {border-bottom: 1px solid #333;margin-bottom: 40px;}
.custom-dark-modal #password .tab-nav .nav-link {color: #aaa;}
.custom-dark-modal #password .tab-nav .nav-link.active {color: #fff;border-bottom: 3px solid #2962ff;font-weight: bold;} */
.custom-dark-modal #password .page-header {font-size: 26px;color: #82b1ff;font-weight: bold;}
.custom-dark-modal #password .input-group-text {background-color: #101010;border: 1px solid #333;color: #ccc;cursor: pointer;}
.custom-dark-modal #password .alert-success {background-color: #1b5e20;color: #c8e6c9;border: none;border-radius: 8px;padding: 12px;margin-top: 15px;box-shadow: 0 2px 10px rgba(50, 205, 50, 0.3);}



/*========================[MDH_DARK]=========================*/


/*========================[ RESPONSIVE DESIGN DARK ]=========================*/
@media (max-width: 1366px){
}
@media (max-width: 1230px){
}
@media (max-width: 1199px) {
}
@media only screen and (min-width: 992px){}
@media (max-width: 991px) {}
@media (max-width: 799px){}
@media (min-width: 768px) {}
@media (max-width: 767.98px) {}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 575px) {}
@media (max-width: 480px) {}
@media (max-width: 360px) {}
@media (max-width: 320px) {/*e*/}





/*========================[MDH_LIGHT]=========================*/


/*========================[ RESPONSIVE DESIGN LIGHT ]=========================*/
@media (max-width: 1366px){}
@media (max-width: 1230px){}
@media (max-width: 1199px) {}
@media (max-width: 991px) {}
@media (max-width: 799px){}
@media (min-width: 768px) {}
@media (max-width: 767.98px) {}
@media only screen and (max-width: 767px) {}
@media only screen and (max-width: 575px) {}
@media (max-width: 480px) {
}
@media (max-width: 360px) {}

@media (max-width: 320px) {/*e*/}