@font-face {
    font-family: Futura_book;
    src        : url('fonts/futura medium bt.ttf');
}

@font-face {
    font-family: Futura_bold;
    src        : url('fonts/futura bold.ttf');
}

@font-face {
    font-family: Futura_lt_bt;
    src        : url('fonts/futura light bt.ttf');
}

@font-face {
    font-family: Futura_md_bold;
    src        : url('fonts/Futura Bold font.ttf');
}

@font-face {
    font-family: Futura_Condensed_Extra;
    src        : url('fonts/Futura Condensed Extra Bold Oblique.otf');
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    src        : url('fonts/fontawesome-5/fa-solid-900.woff2') format('woff2');
    font-weight: 900;
    font-style : normal;
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    src        : url('fonts/fontawesome-5/fa-brands-400.woff2') format('woff2');
    font-weight: 400;
    font-style : normal;
}

body {
    font-family     : Futura_book, sans-serif;
    background-color: #fff;
    margin          : 0;
    padding         : 0;
}

.btn:focus {
    outline: none !important;
}

.dashboard-sec {
    background    : #F4F7FE;
    padding       : 20px;
    display       : flex;
    flex-direction: row;
    min-height    : 100vh;
    transition    : 0.3s all;
    position      : relative;
    z-index       : 1;
}

.dashboard-sec::before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: #10101080;
    z-index   : 2;
    transition: 0.2s all;
    opacity   : 0;
    display   : none;
}

.dashboard-sec.active::before {
    opacity: 1;
    display: block;
}

.dashboard-sec .dashboard-body {
    position    : relative;
    padding-left: 300px;
    transition  : 0.3s all;
    width       : 100%;
}

.dashboard-sec .w-100 {
    width: 100%;
}

.dashboard-sec .h-100 {
    height: 100%;
}

.dashboard-sec .mx-0 {
    margin-left : 0 !important;
    margin-right: 0 !important;
}

.nav-top {
    padding         : 20px;
    width           : 100%;
    border-radius   : 8px;
    background-color: #032F5B;
    margin-bottom   : 20px;
}

.nav-top ul.nav {
    display       : flex;
    flex-direction: row;
    flex-wrap     : wrap;
    align-items   : center;
}

.nav-top ul.nav li {
    margin-right: 10px;
}

.nav-top ul.nav li .btn.nav-btn {
    background-color: transparent;
    border          : none;
    color           : #FFF100;
    font-size       : 20px;
    padding         : 5px;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.nav-top ul.nav li .page-title {
    color         : #FFF;
    font-family   : Futura_book;
    font-size     : 20px;
    font-style    : normal;
    font-weight   : 500;
    line-height   : 24px;
    letter-spacing: -0.4px;
}

.dashboard-nav {
    background   : #032F5B;
    padding      : 16px;
    border-radius: 8px;
    width        : 100%;
    max-width    : 275px;
    height       : 100%;
    position     : absolute;
    top          : 0;
    left         : 0;
    transition   : 0.3s all;
}

.dashboard-nav .btn.nav-close {
    background-color         : #032F5B;
    border                   : 2px solid;
    border-left              : 0;
    color                    : #FFF100;
    font-size                : 20px;
    padding                  : 7px 10px;
    display                  : flex;
    align-items              : center;
    justify-content          : center;
    border-radius            : 50%;
    border-top-left-radius   : 0;
    border-bottom-left-radius: 0;
    position                 : absolute;
    top                      : 15px;
    right                    : -42px;
    z-index                  : 99;
    display                  : none;
}

.dashboard-nav ul.nav {
    list-style    : none;
    padding       : 0;
    margin        : 0;
    display       : flex;
    flex-direction: column;
}

.dashboard-nav ul.nav li a {
    margin-bottom : 10px;
    width         : 100%;
    padding       : 10px 14px;
    font-size     : 14px;
    letter-spacing: 0.28px;
    text-transform: uppercase;
    line-height   : normal;
    color         : #fff;
    font-family   : Futura_book;
    border-radius : 8px;
}

.dashboard-nav ul.nav li a:hover,
.dashboard-nav ul.nav li a:active,
.dashboard-nav ul.nav li a:focus {
    background: #FFFFFF1F;
}

.dashboard-nav ul.nav li a.active {
    background: #FFF100;
    color     : #000;
}

.dashboard-sec .dashboard-card-intro {
    border-radius: 8px;
    background   : #FFF;
    box-shadow   : 0px 2px 10px 0px rgba(16, 83, 149, 0.10);
    margin-bottom: 20px;
    width        : 100%;
    padding      : 55px 20px 75px 20px;
    position     : relative;
    background-image: url('../images/top-img.svg'),
        url('../images/topRight.svg'),
        url('../images/bottom-left.svg'),
        url('../images/top-img.svg');
    background-position: top 26px left 43px,
        top 26px right 50px,
        bottom 26px left 43px,
        bottom 26px right 50px;
    background-repeat: no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;

}

.dashboard-sec .dashboard-card-intro .title {
    color         : #7394B5;
    text-align    : center;
    font-family   : Futura_book;
    font-size     : 22px;
    font-style    : normal;
    font-weight   : 500;
    line-height   : 24px;
    letter-spacing: -0.44px;
    margin-bottom : 16px;
}

.dashboard-sec .dashboard-card-intro .welcome-heading {
    color         : #032F5B;
    text-align    : center;
    font-family   : Futura_bold;
    font-size     : 30px;
    font-style    : normal;
    font-weight   : 500;
    line-height   : 34px;
    letter-spacing: -0.6px;
    margin-bottom : 33px;
}

.dashboard-sec .dashboard-card-intro .welcome-text {
    color         : #7A8196;
    font-family   : Futura_book;
    font-size     : 16px;
    font-style    : normal;
    font-weight   : 500;
    line-height   : 28px;
    letter-spacing: -0.32px;
    width         : 100%;
    max-width     : 550px;
    margin-right  : auto;
    margin-left   : auto;
}

.dashboard-sec .dashboard-card-intro .welcome-text span {
    color: #FB4F14;
}

.dashboard-sec .dashboardInfo-card {
    border-radius : 8px;
    background    : #FFF;
    box-shadow    : 0px 2px 10px 0px rgba(16, 83, 149, 0.10);
    padding       : 30px 16px;
    display       : flex;
    align-items   : center;
    flex-direction: row;
    flex-wrap     : nowrap;
    gap           : 16px;
    margin-bottom : 20px;
	height        : 100%;
}

.dashboard-sec .dashboardInfo-card .icon-circle {
    width          : 66px;
    height         : 66px;
    background     : #F4F7FE;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.dashboard-sec .dashboardInfo-card .icon-circle.active {
    background: #6AD093;
}

.dashboard-sec .dashboardInfo-card .icon-circle.expired {
    background: #F9BA4C;
}

.dashboard-sec .dashboardInfo-card .icon-circle.total {
    background: #2473C2;
}

.dashboard-sec .dashboardInfo-card .card-content .title {
    color         : #758DA6;
    font-family   : "Futura_book";
    font-size     : 14px;
    font-style    : normal;
    font-weight   : 400;
    line-height   : inherit;
    letter-spacing: -0.28px;
}

.dashboard-sec .dashboardInfo-card .card-content .card-number {
    color         : #032F5B;
    font-family   : "Futura_book";
    font-size     : 22px;
    font-style    : normal;
    font-weight   : 700;
    line-height   : 30px;
    letter-spacing: -0.44px;
}

.dashboard-sec .dashboard-card-intro.familyMember {
    background-image: none;
}

.dashboard-sec .dashboard-card-intro.familyMember .title {
    font-size: 16px;
}

.dashboard-sec .dashboard-card-intro.familyMember .welcome-heading {
    width       : 100%;
    max-width   : 500px;
    margin-right: auto;
    margin-left : auto;
    font-size   : 24px;
}

.dashboard-sec .btn.btn-primary,
.renewMembership-modal .modal-content .btn-primary {
    font-family   : "Futura_bold";
    font-size     : 15px;
    font-weight   : 700;
    line-height   : 17px;
    letter-spacing: 0.01em;
    text-align    : center;
    background    : linear-gradient(82.16deg, #FB4F14 0%, #FFD001 137.15%);
    color         : white;
    border        : none;
    border-radius : 2px;
    text-transform: uppercase;
    padding       : 18px 54px;
    position      : relative;
}

.dashboard-sec .btn.btn-primary:before,
.renewMembership-modal .modal-content .btn-primary::before {
    content                   : "";
    position                  : absolute;
    top                       : 0;
    left                      : 0;
    width                     : 100%;
    height                    : 100%;
    background                : linear-gradient(82.16deg, #FB4F14 0%, #FFD001 137.15%);
    z-index                   : -1;
    opacity                   : 1;
    transform                 : translate3d(0, 0, 0);
    transition                : transform 0.4s, opacity 0.4s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.dashboard-sec .btn.btn-primary:hover,
.renewMembership-modal .modal-content .btn-primary:hover {
    background: linear-gradient(82deg, #FB4F14 0%, #FB4F14 137.15%);
    color     : #fff !important;
}

.dashboard-sec .btn.btn-primary:hover::before,
.renewMembership-modal .modal-content .btn-primary.btn.btn-primary:hover::before {
    opacity  : 0;
    transform: scale3d(0.7, 1, 1);
}

.dashboard-sec .btn.btn-primary.disabled:hover::before,
.renewMembership-modal .modal-content .btn-primary.disabled:hover::before {
    opacity  : 1;
    transform: translate3d(0, 0, 0);
}

.dashboard-sec .btn.btn-primary:focus,
.dashboard-sec .btn.btn-primary:active {
    box-shadow: none !important;
    outline   : none;
}

.dashboard-sec .btn.btn-primary-outline {
    font-family   : "Futura_book";
    font-size     : 15px;
    font-weight   : 700;
    line-height   : 17px;
    letter-spacing: 0.01em;
    text-align    : center;
    background    : transparent;
    color         : #FB4F14;
    border        : 2px solid #FB4F14;
    border-radius : 2px;
    text-transform: uppercase;
    padding       : 16px 20px;
}

.dashboard-sec .btn.btn-primary-outline:hover {
    background: linear-gradient(82deg, #FB4F14 0%, #FB4F14 137.15%);
    color     : #fff !important;
    box-shadow: none;
}

.dashboard-sec .btn.btn-primary-outline:focus,
.dashboard-sec .btn.btn-primary-outline:active {
    outline   : none;
    box-shadow: none;
}

.dashboard-sec .top-navigation .breadcrumb,
.view-order .viewOrder-header .breadcrumb {
    background-color: transparent;
    padding-left    : 0;
}

.dashboard-sec .top-navigation .breadcrumb li,
.view-order .viewOrder-header .breadcrumb li {
    font-size     : 14px;
    line-height   : normal;
    letter-spacing: -0.28px;
    font-family   : "Futura_bold";
}

.dashboard-sec .top-navigation .breadcrumb li a,
.view-order .viewOrder-header .breadcrumb li a {
    color          : #032F5B;
    text-decoration: none;
}

.dashboard-sec .top-navigation .breadcrumb li.active::before,
.dashboard-sec .top-navigation .breadcrumb li::before,
.view-order .viewOrder-header .breadcrumb li.active::before {
    font-family: none;
    color      : #032F5B;
}

.dashboard-sec .top-navigation .breadcrumb li a:hover,
.view-order .viewOrder-header .breadcrumb li a:hover {
    color: #43668b;
}

.dashboard-sec .form-title,
.view-order .viewOrder-body .form-title {
    border-radius : 4px;
    background    : #032F5B;
    color         : #fff;
    padding       : 12px 20px;
    width         : 100%;
    text-transform: uppercase;
    margin-top    : 15px;
    margin-bottom : 15px;
    font-family   : "Futura_book";
}

.dashboard-sec .form-title .btn-title {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 10px;
}

.dashboard-sec .form-title .btn {
    padding         : 0;
    border          : none;
    background-color: transparent;
    color           : #FFF100;
    border-bottom   : 1px solid #FFF100;
    border-radius   : 0;
}

.dashboard-sec .form-title .btn::after {
    display: none;
}

.dashboard-sec .form-title .btn:hover {
    border-bottom: 1px solid transparent;
}

.dashboard-sec .dashboard-form .form-group {
    margin-bottom: 20px;
}

.dashboard-sec .dashboard-form .form-group label {
    color      : #444;
    font-family: "Futura_book";
    font-weight: 500;
    opacity    : 1;
}

.dashboard-sec .dashboard-form .form-group label span {
    color: #FF0808;
}

.dashboard-sec .dashboard-form .form-group label span.h-text {
    font-size: 12px;
    color    : #444444;
}

.dashboard-sec .dashboard-form .form-control {
    border-radius: 4px;
    border       : 1px solid rgba(0, 0, 0, 0.20);
    background   : #FFF;
    padding      : 12px 16px;
    font-family  : "Futura_book";
    color        : #000;
    height       : 48px;
}

.dashboard-sec .dashboard-form .form-control:focus,
.dashboard-sec .dashboard-form .form-control:active {
    box-shadow: none;
    border    : 1px solid #00000099
}

.dashboard-sec .dashboard-form .form-control::placeholder {
    color      : #B4B4B4;
    font-family: "Futura_book";
}

.dashboard-sec .dashboard-form select.form-control {
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;
    background        : url('data:image/svg+xml;utf8,<svg fill="gray" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
    background-size   : 24px;
    background-color  : #fff;
}

.dashboard-sec .dashboard-form input[type="date"] {
    width             : 100% !important;
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;
    background        : url('../images/calender.svg') no-repeat right 10px center;
    background-size   : 24px;
}

.dashboard-sec .dashboard-form .form-error {
    color      : #FF0808;
    font-family: "Futura_book";
    font-size  : 12px;
    margin-top : 5px;
    display    : none;
}

.dashboard-sec .dashboard-form p,
.dashboard-sec .dashboard-form .checkbox label,
.checkbox.renewMembership label {
    color      : #000;
    font-family: "Futura_book";
    font-size  : 16px;
    font-style : normal;
    font-weight: 400;
    line-height: normal;
}

.dashboard-sec .dashboard-form .checkbox label,
.checkbox.renewMembership label {
    padding-left: 30px;
}

.dashboard-sec .dashboard-form .checkbox label input[type="checkbox"],
.checkbox.renewMembership label input[type="checkbox"] {
    width       : 20px;
    height      : 20px;
    margin-right: 10px;
    margin-top  : 0;
    margin-left : -30px;
    cursor      : pointer;
    position    : absolute;
}

.dashboard-sec .dashboard-form .checkbox label a {
    color          : #FB4F14;
    border-bottom  : 1px solid #FB4F14;
    text-decoration: none;
}

.dashboard-sec .dashboard-form .checkbox label a:hover {
    border-bottom  : 1px solid transparent;
    text-decoration: none;
}

.dashboard-sec .dashboard-form.addNew-row {
    background-color: #efefef;
    border          : 1px solid rgba(0, 0, 0, 0.20);
    border-radius   : 4px;
    padding         : 5px 10px;
    position        : relative;
    margin-bottom   : 20px;
}

.dashboard-sec .dashboard-form.addNew-row .btn-remove {
    position               : absolute;
    top                    : 0;
    right                  : 0;
    border-radius          : 0;
    border-top-right-radius: 4px;
    padding                : 5px 10px;
    background             : #e83333;
    color                  : #fff;
    border                 : none;
    box-shadow             : none;
}

.dashboard-sec .dashboard-form .addmore-btn {
    margin-bottom: 10px;
    padding      : 6px 10px;
    font-size    : 13px;
    font-weight  : 600;
    min-width    : 95px;
}

.dashboard-sec .dashboard-form .addmore-btn:before,
.dashboard-sec .dashboard-form.addNew-row .btn-remove:before {
    display: none;
}

.fee-details-sec {
    width      : 100%;
    padding    : 30px 0px;
    font-family: "Futura_book";
}

.fee-details-sec ul.nav {
    display        : flex;
    flex-direction : row;
    flex-wrap      : wrap;
    gap            : 10px;
    align-items    : center;
    justify-content: center;
}

.fee-details-sec ul.nav li.oldfee {
    font-size           : 16px;
    font-weight         : 400;
    line-height         : 15px;
    letter-spacing      : -0.48px;
    text-decoration-line: line-through;
    color               : #808080;
}

.fee-details-sec ul.nav li.mainfee {
    font-size     : 24px;
    font-weight   : 500;
    line-height   : 24px;
    letter-spacing: -0.72px;
    color         : #000;
    font-family   : "Futura_bold";
}

.fee-details-sec ul.nav li.vat {
    color         : #FB4F14;
    font-size     : 14px;
    font-weight   : 400;
    line-height   : 14px;
    letter-spacing: -0.56px;
}

.dashboard-sec .family-header {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : 10px;
}

.dashboard-sec .dashboard-heading {
    color         : #032F5B;
    font-family   : 'Futura_bold';
    font-size     : 18px;
    font-style    : normal;
    line-height   : 34px;
    letter-spacing: -0.36px;
}

.dashboard-sec .family-header {
    margin-bottom: 30px;
}

.dashboard-sec .family-header.mb-0 {
    margin-bottom: 0;
}

.dashboard-sec .family-header .btn-primary {
    padding: 15px 30px;
}

.dashboard-sec .family-card {
    background   : #032F5B;
    width        : 100%;
    margin-bottom: 20px;
    position     : relative;
}

.dashboard-sec .family-card .fc-header,
.modal .modal-header .fc-header {
    position: relative;
    padding : 16px 30px;
}

.dashboard-sec .family-card .fc-header .action-nav {
    position      : absolute;
    top           : 20px;
    right         : 30px;
    display       : flex;
    flex-direction: row;
    align-items   : center;
    gap           : 20px;
}

.dashboard-sec .family-card .fc-header .action-nav li a.action-btn {
    width          : 30px;
    height         : 30px;
    display        : flex !important;
    align-items    : center;
    justify-content: center;
    background     : rgba(255, 255, 255, 0.15);
    border-radius  : 50%;
    border         : 2px solid rgba(255, 255, 255, 0.19);
    padding        : 0;
}

.dashboard-sec .family-card .fc-header .action-nav li .action-btn:hover {
    background: rgb(131 129 129 / 19%);
    border    : 2px solid rgba(255, 255, 255, 0.15);
}

.dashboard-sec .family-card .fc-header .member-info,
.modal .modal-header .fc-header .member-info {
    display       : flex;
    flex-direction: row;
    flex-wrap     : nowrap;
    align-items   : center;
    gap           : 20px;
}

.dashboard-sec .family-card .fc-header .member-info .member-img,
.modal .modal-header .fc-header .member-info .member-img {
    width        : 85px;
    height       : 85px;
    border-radius: 50%;
    background   : #FFFFFF1F;
    position     : relative;
}

.dashboard-sec .family-card .fc-header .member-info .member-img img,
.modal .modal-header .fc-header .member-info .member-img img {
    width        : 100%;
    height       : 100%;
    border-radius: 50%;
}

.dashboard-sec .family-card .fc-header .member-info .member-img img.placeholder,
.modal .modal-header .fc-header .member-info .member-img img.placeholder {
    width        : 100%;
    height       : 100%;
    border-radius: 50%;
    position     : absolute;
    top          : -4px;
    left         : 0;
}

.dashboard-sec .family-card .fc-header .member-info .member-content,
.modal .modal-header .fc-header .member-info .member-content {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    font-size     : 14px;
    font-weight   : 500;
    line-height   : normal;
    letter-spacing: 0.14px;
    color         : #FFFFFF99;
    font-family   : 'Futura_book';
}

.dashboard-sec .family-card .fc-header .member-info .member-content .name {
    color         : #FFFFFF;
    font-size     : 16px;
    font-weight   : 500;
    line-height   : normal;
    letter-spacing: 0.16px;
    font-family   : 'Futura_bold';
    text-transform: uppercase;
}

.dashboard-sec .family-card .fc-header .member-info .member-content .name a {
    color        : #FFFFFF;
    border-bottom: 1px solid;
}

.dashboard-sec .family-card .fc-header .member-info .member-content .name a:hover {
    text-decoration: none;
    border-bottom  : 1px solid transparent;
}

.dashboard-sec .family-card .fc-header .member-info .member-content .name a:focus,
.dashboard-sec .family-card .fc-header .member-info .member-content .name a:active {
    text-decoration: none;
}

.dashboard-sec .family-card .fc-footer {
    padding        : 20px 30px;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 20px;
    border-top     : 1px solid #FFFFFF26;
}

.dashboard-sec .family-card .fc-footer .info-sec {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

.dashboard-sec .family-card .fc-footer .info-sec label {
    color         : #FFFFFF99;
    font-size     : 12px;
    font-weight   : 500;
    line-height   : normal;
    letter-spacing: 0.72px;
    font-family   : 'Futura_book';
    margin-bottom : 0;
    text-transform: uppercase;
}

.dashboard-sec .family-card .fc-footer .info-sec .descp {
    color         : #FFFFFF;
    font-size     : 14px;
    font-weight   : 500;
    line-height   : normal;
    letter-spacing: 0.84px;
    font-family   : 'Futura_book';
}

.dashboard-sec .family-card .fc-footer .info-sec .descp span.active {
    color: #0DE062;
}

.dashboard-sec .family-card .fc-footer .info-sec .descp span.expired {
    color: #FB6C3B;
}

.dashboard-sec .family-card .fc-footer .btn.btn-seeMore {
    font-family   : "Futura_bold";
    font-size     : 12px;
    font-weight   : 700;
    line-height   : 15px;
    letter-spacing: 0.01em;
    text-align    : center;
    background    : rgba(255, 255, 255, 0.15);
    color         : white;
    border        : none;
    border-radius : 2px;
    text-transform: uppercase;
    padding       : 15px 30px;
}

.dashboard-sec .family-card .fc-footer .btn.btn-seeMore:hover {
    background: rgba(148, 147, 147, 0.15);
    color     : #fff !important;
}

.modal.detailsModal .modal-header {
    padding      : 20px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	position     : relative;
}

.modal.detailsModal .modal-header button.close {
	position: absolute;
    top     : 10px;
    right   : 20px;
}

.modal.detailsModal .modal-header .fc-header {
    width  : 90%;
    padding: 0;
    color  : #00000099;
}

.modal.detailsModal .modal-header .fc-header .member-info .member-content {
    gap: 6px;
}

.modal .modal-header .fc-header .member-info .member-content {
    color: #00000099;
}

.modal .modal-header .fc-header .member-info .member-content .name {
    color: #000000;
}

.modal.detailsModal .modal-body .detail-title {
    color         : #000000;
    font-family   : 'Futura_bold';
    font-size     : 14px;
    line-height   : 24px;
    text-transform: uppercase;
    margin-bottom : 20px;
}

.modal.detailsModal .modal-body .detail-title.mt-30 {
    margin-top: 30px;
}

.modal.detailsModal .modal-body .detail-content {
    display       : flex;
    flex-direction: column;
    gap           : 5px;
}

.modal.detailsModal .modal-body .detail-content .detail-row {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;
    padding        : 10px;
}

.modal.detailsModal .modal-body .detail-content .detail-row:nth-child(odd) {
    background: #F3F3F3;
}

.modal.detailsModal .modal-body .detail-content .detail-row .title {
    color         : #000000;
    font-family   : 'Futura_book';
    font-size     : 12px;
    letter-spacing: 0.72px;
    text-transform: uppercase;
}

.modal.detailsModal .modal-body .detail-content .detail-row .descp {
    color      : #000000;
    font-family: 'Futura_book';
    font-size  : 14px;
}

.modal.detailsModal .modal-body .detail-content .detail-row .descp span.active {
    color: #13B554;
}

.modal.detailsModal .modal-body .detail-content .detail-row .descp span.expired {
    color: #FB6C3B;
}

.dashboard-sec .dashboard-card-intro.form-body {
    padding-top     : 30px;
    background-image: none;
}

.order-table .table tr th,
.order-table .table tr td {
    font-size     : 14px;
    font-weight   : 500;
    line-height   : normal;
    color         : #000;
    border        : none;
    vertical-align: middle;
    padding       : 10px 15px;
}

.order-table .table tr th {
    background    : #032F5B;
    color         : #fff;
    text-transform: uppercase;
    font-family   : 'Futura_book';
}

.order-table .table tr td a {
    color          : #0875D9;
    text-decoration: none;
}

.order-table .table tr td span.badge-success {
    background   : #13B554;
    border-radius: 4px;
    padding      : 5px;
    font-family  : 'Futura_book';
}

.order-table .table tr td span.badge-danger {
    background   : #F76464;
    border-radius: 4px;
    padding      : 5px;
    font-family  : 'Futura_book';
}

.order-table .table tr td a:hover {
    border-bottom: 1px solid #0875D9;
}

.order-table .table tr td a.btn.view-btn {
    background    : transparent;
    color         : #032F5B;
    padding       : 5px 20px;
    border-radius : 2px;
    font-size     : 12px;
    font-family   : 'Futura_bold';
    text-transform: uppercase;
    border        : 2px solid #032F5B;
}

.order-table .table tr td a.btn.view-btn:hover {
    background: #032F5B;
    color     : #fff;
}

.view-order {
    border-radius: 8px;
    width        : 100%;
    box-shadow   : 0px 2px 10px 0px rgba(16, 83, 149, 0.10);
    margin-bottom: 20px;
    background   : #fff;
}

.view-order .viewOrder-header {
    padding      : 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.view-order .viewOrder-header .breadcrumb {
    margin-bottom: 0;
}

.view-order .viewOrder-body {
    padding: 30px 20px;
}

.view-order .viewOrder-body .viewOrder-title-main {
    color        : #000000;
    font-family  : 'Futura_bold';
    font-size    : 14px;
    line-height  : 24px;
    margin-bottom: 15px;
}

.view-order .viewOrder-body .orderDetail-row {
    display       : flex;
    flex-direction: column;
    gap           : 15px;
    margin-bottom : 40px;
}

.view-order .viewOrder-body .orderDetail-row .order-col {
    display       : flex;
    flex-direction: column;
    gap           : 2px;
}

.view-order .viewOrder-body .orderDetail-row .order-col .detailTitle {
    font-family: 'Futura_book';
    font-size  : 14px;
    color      : #8494a4;
}

.view-order .viewOrder-body .orderDetail-row .order-col .detailDescp {
    font-family: 'Futura_book';
    font-size  : 14px;
    color      : #000;
}

.view-order .viewOrder-body .orderDetail-row .item-card {
    border       : 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    width        : 100%;
    background   : #f3f3f3;
    margin-bottom: 10px;
}

.view-order .viewOrder-body .orderDetail-row .item-card .itemCard-col {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;
    padding        : 20px 30px 20px 30px;
    border-bottom  : 1px solid rgba(0, 0, 0, 0.1);
    font-family    : 'Futura_book';
    font-size      : 14px;
    color          : #000;
}

.view-order .viewOrder-body .orderDetail-row .item-card .itemCard-col.fw-bold {
    font-family: 'Futura_bold';
}

.view-order .viewOrder-body .orderDetail-row .item-card .itemCard-col:last-child {
    border-bottom: none;
}

.view-order .viewOrder-body .orderDetail-row .order-status_desp {
    font-family: 'Futura_book';
    font-size  : 14px;
    color      : #8494a4;
}

.view-order .viewOrder-body .orderDetail-row .order-status_desp span {
    color    : #000;
    font-size: 15px;
}

.pswp {
    z-index: 9999;
    /* Ensure it's above modal if needed */
}

/* ==== Flatpicker Date Style ==== */


#flatpickr-date {
    text-align        : left;
    -webkit-appearance: none;
    appearance        : none;
    font              : inherit;
    cursor            : pointer;
    background        : #fff;
}

#flatpickr-date::placeholder {
    color  : #B4B4B4;
    opacity: 1;
}

.flatpickr-day.today,
.flatpickr-day.today:hover {
    color           : #fff !important;
    border-color    : #696cff;
    background-color: #696cff !important;
    box-shadow      : 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4);
}

.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    color       : #696cff !important;
    background  : #e7e7ff !important;
    border-color: #e7e7ff !important;
}

.flatpickr-day.selected.inRange,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.endRange:focus,
.flatpickr-day.endRange:hover,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.week.selected {
    color       : #fff !important;
    background  : #696cff !important;
    border-color: #696cff !important;
    box-shadow  : 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4);
}

@media (max-width: 1200px) and (min-width: 993px) {
    .dashboard-sec .dashboardInfo-card {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 10px;
    }
}


@media (min-width: 993px) {
    .top-nav-container {
        display: none;
    }
}

@media (max-width: 992px) {
    .dashboard-sec .dashboard-body {
        padding-left: 0;
    }

    .dashboard-sec .dashboard-nav {
        left   : -350px;
        top    : 0;
        z-index: 9999;
    }

    .dashboard-nav .btn.nav-close {
        display: flex;
    }

    .dashboard-sec .dashboard-nav.active {
        left: 0;
    }

    .dashboard-sec .dashboard-body.active {
        padding-left: 300px;
    }

    .dashboard-sec .dashboard-form .form-group {
        margin-bottom: 0px;
    }

    .dashboard-sec .dashboard-form .col-md-6,
    .dashboard-sec .dashboard-form .col-sm-6 {
        margin-bottom: 20px;
    }

    /* .dashboard-sec .dashboard-card-intro.form-body.account-form .dashboard-form .form-group {
        margin-bottom: 20px;
    } */

    .dashboard-sec .dashboard-form .form-group .checkbox {
        margin-bottom: 20px;
    }

    .dashboard-sec .dashboard-form .checkbox label input[type="checkbox"] {
        margin-top: 3px;
    }
}

@media (max-width: 768px) {

    .dashboard-sec {
        padding: 10px;
    }

    .dashboard-sec .container-fluid {
        padding-left : 10px;
        padding-right: 10px;
    }

    .dashboard-sec .container-fluid .col-md-12 {
        padding-left : 10px;
        padding-right: 10px;
    }

    .nav-top {
        padding: 10px 20px;
    }


    .dashboard-sec .dashboard-card-intro {
        padding            : 25px 15px 40px 15px;
        background-position: top 10px left 15px, top 10px right 15px, bottom 10px left 15px, bottom 10px right 15px;
        background-size    : 6%;
    }

    .dashboard-sec .dashboard-card-intro .welcome-heading {
        font-size: 24px;
    }

    .dashboard-sec .dashboard-card-intro .welcome-text {
        font-size: 14px;
    }

    .dashboard-sec .dashboardInfo-card {
        padding: 20px 16px;
    }

    .dashboard-sec .dashboardInfo-card .icon-circle {
        width : 50px;
        height: 50px;
    }

    .dashboard-sec .top-navigation .breadcrumb,
    .view-order .viewOrder-header .breadcrumb {
        padding-left: 0;
        padding     : 5px 7px;
    }

    .dashboard-sec .top-navigation .breadcrumb li,
    .view-order .viewOrder-header .breadcrumb li {
        font-size: 13px;
    }

    .view-order .viewOrder-body .orderDetail-row .item-card .itemCard-col {
        padding: 20px 20px 15px 20px;
    }

    .view-order .viewOrder-body .orderDetail-row {
        margin-bottom: 15px;
    }
}

@media (max-width: 600px) {

    .dashboard-sec .family-card .fc-header .member-info,
    .modal .modal-header .fc-header .member-info {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 10px;
    }

    .dashboard-sec .family-card .fc-header .action-nav {
        right: 0;
    }

    .dashboard-sec .family-card .fc-footer {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 15px;
    }

    .dashboard-sec .family-card .fc-footer .info-sec {
        gap: 5px;
    }

    .fee-details-sec {
        padding: 15px 0px;
    }

    .fee-details-sec ul.nav {
        flex-direction : column;
        align-items    : center;
        justify-content: center;
    }

    .dashboard-sec .dashboard-card-intro.familyMember .welcome-heading {
        font-size  : 20px;
        line-height: 26px;
    }
}


.select-membership-plan {
    background   : linear-gradient(82.16deg, #FB4F14 0%, #FFD001 137.15%);
    width        : 100%;
    border-radius: 4px;
    padding      : 30px 30px;
    padding-top  : 22px;
    margin-bottom: 20px;
}

.select-membership-plan label {
    font-family   : 'Futura_bold';
    font-size     : 16px;
    line-height   : 100%;
    letter-spacing: 0;
    color         : #fff;
    margin-bottom : 13px;
}

.select-membership-plan .dropdown,
.select-membership-plan .dropdown .btn,
.select-membership-plan .dropdown .dropdown-menu {
    width: 100%;
}

.select-membership-plan .dropdown .dropdown-menu a {
    padding-top   : 7px;
    padding-bottom: 7px;
    font-size     : 16px;
}

.select-membership-plan .dropdown .btn.dropdown-toggle {
    border-radius      : 4px;
    border             : 1px solid #00000033;
    background-color   : #FFFFFF !important;
    color              : #000000;
    font-family        : 'Futura_book';
    font-weight        : 400;
    font-size          : 16px;
    line-height        : 100%;
    letter-spacing     : 0;
    text-align         : left;
    padding            : 15px 16px;
    background-image   : url("data:image/svg+xml,%3Csvg%20fill%3D%22gray%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2218%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: right 10px center;
    background-size    : 24px;
}

.select-membership-plan .dropdown .btn.dropdown-toggle span {
    position : absolute;
    top      : 50%;
    right    : 20px;
    transform: translateY(-50%);
}

.select-membership-plan .dropdown .btn.dropdown-toggle::before {
    display: none !important;
}

.dashboard-sec .family-header .btn-side {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 10px;
    flex-wrap      : wrap;
}

.btn-secondary-outline.renewMembership {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 10px;
}


/*==== Account Sec Style==== */

.dashboard-sec.accounts {
    background-image: url('../images/top-img.svg'),
        url('../images/topRight.svg'),
        url('../images/bottom-left.svg'),
        url('../images/top-img.svg');
    background-position: top 10% left 13%,
        top 11% right 14%,
        bottom 10% left 13%,
        bottom 10% right 14%;
    background-repeat: no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;
	min-height: auto;
}

.dashboard-sec.accounts .dashboard-body {
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding-left   : 0;
}

.dashboard-sec .dashboard-card-intro.account-sec-card {
    padding     : 20px 20px;
    width       : 100%;
    max-width   : 600px;
    margin-left : auto;
    margin-right: auto;
}

.dashboard-sec .dashboard-card-intro.account-sec-card .form-title {
    margin-top: 0;
}

span.or {
    font-family   : 'Futura_bold';
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 34px;
    letter-spacing: -0.02em;
    text-align    : center;
    padding       : 20px 0px;
    display       : block;
}

.dashboard-sec .dashboard-card-intro.account-sec-card .form-group {
	margin-bottom: 20px !important;
}

.dashboard-sec .btn.btn-secondary-outline,
.btn.btn-secondary-outline {
    font-family   : "Futura_book";
    font-size     : 15px;
    font-weight   : 700;
    line-height   : 15px;
    letter-spacing: 0.01em;
    text-align    : center;
    background    : transparent;
    color         : #032F5B;
    border        : 2px solid #032F5B;
    border-radius : 2px;
    text-transform: uppercase;
    padding       : 16px 20px;
}

.dashboard-sec .btn.btn-secondary-outline:hover,
.btn.btn-secondary-outline:hover {
    color     : #fff;
    background: #032F5B;
}

.dashboard-sec .dashboard-card-intro.account-sec-card .form-group .forgot-password {
    font-family   : 'Futura_bold';
    font-weight   : 500;
    font-size     : 14px;
    line-height   : 34px;
    letter-spacing: -0.02em;
    color         : #FB4F14;
    border-bottom : 1px solid transparent;
    margin-top    : 7px;
    display       : block;
    width         : fit-content;
    float         : right;
}

.dashboard-sec .dashboard-card-intro.account-sec-card .form-group .forgot-password:hover {
    border-bottom  : 1px solid;
    text-decoration: none;
}

.dashboard-sec .dashboard-card-intro.account-sec-card .form-group .success-heading {
    font-family   : 'Futura_bold';
    font-weight   : 500;
    font-size     : 20px;
    line-height   : 34px;
    letter-spacing: -0.02em;
    color         : #032F5B;
}

.dashboard-sec .dashboard-card-intro.account-sec-card .form-group .success-pra {
    font-family   : 'Futura_book';
    font-weight   : 400;
    font-size     : 22px;
    line-height   : 24px;
    letter-spacing: -0.02em;
    text-align    : center;
    color         : #7394B5;
    width         : 100%;
    max-width     : 460px;
    margin-right  : auto;
    margin-left   : auto;
}

.renewMembership-modal .modal-content .modal-header .modal-title {
    font-family   : 'Futura_bold';
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 100%;
    letter-spacing: 0;
    text-transform: uppercase;
    color         : #000000;
    margin-bottom : 0;
}

.renewMembership-modal .modal-content .modal-body .family-card {
    background-color: #F3F3F3;
    padding         : 20px;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : 20px;
    border          : 1px solid transparent;
}

/* .renewMembership-modal .modal-content .modal-body .family-card:hover,
.renewMembership-modal .modal-content .modal-body .family-card.active {
    border: 1px solid #00000099;
} */

.renewMembership-modal .modal-content .modal-body .family-card .fc-header {
    display        : flex;
    flex-direction : row;
    flex-wrap      : nowrap;
    align-items    : center;
    justify-content: space-between;
    gap            : 10px;
    width          : 100%;
}

.renewMembership-modal .modal-content .modal-body .family-card .member-info {
    display       : flex;
    flex-direction: row;
    flex-wrap     : nowrap;
    align-items   : center;
    gap           : 20px;
}

.renewMembership-modal .modal-content .modal-body .family-card .member-info .member-img {
    width        : 85px;
    height       : 85px;
    border-radius: 50%;
    background   : #FFFFFF1F;
    position     : relative;
}

.renewMembership-modal .modal-content .modal-body .family-card .member-info .member-img img {
    width        : 100%;
    height       : 100%;
    border-radius: 50%;
    position     : absolute;
    top          : -4px;
    left         : 0;
}

.renewMembership-modal .modal-content .modal-body .family-card .member-info .member-content,
.renewMembership-modal .modal-content .modal-body .family-card .fee-details {
    display       : flex;
    flex-direction: column;
    gap           : 5px;
    font-size     : 14px;
    font-weight   : 500;
    line-height   : normal;
    letter-spacing: 0.14px;
    color         : #00000099;
    font-family   : 'Futura_book';
}

.renewMembership-modal .modal-content .modal-body .family-card .member-info .member-content .name,
.renewMembership-modal .modal-content .modal-body .family-card .fee-details .fee-sec {
    color         : #000;
    font-size     : 16px;
    line-height   : normal;
    letter-spacing: 0.16px;
    font-family   : 'Futura_bold';
    text-transform: uppercase;
}

.renewMembership-modal .modal-content .btn-primary {
    width: 100%;
}

.view-order .viewOrder-body .form-title.bill-title {
    background-color: #fff;
    color           : #000;
    padding         : 0;
    font-family     : 'futura_bold';
}

.view-order .viewOrder-body .sticky-col {
    position: sticky;
    top     : 20px;
    z-index : 100;
}

.account-row {
    display    : flex;
    align-items: flex-end;
    flex-wrap  : wrap;
}

@media (max-width: 1199px) and (min-width: 993px) {
    .account-row .col-md-6 {
        margin-bottom: 20px;
    }
}

@media (max-width: 992px) {
    .account-row {
        align-items   : flex-start;
        flex-direction: column;
    }

    .account-row .col-md-6 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .account-row {
        display: block;
    }

    .dashboard-sec.accounts {
        background-image: none;
		min-height: auto;
    }

    .select-membership-plan {
        padding: 15px 15px;
    }
}

@media (max-width: 500px) {

    .dashboard-sec .family-header {
        flex-direction : column;
        justify-content: flex-start;
        align-items    : flex-start;
    }

    .dashboard-sec .family-header .btn-side {
        flex-direction : column;
        justify-content: flex-start;
        align-items    : flex-start;
        width          : 100%;
    }

    .dashboard-sec .family-header .btn-side .btn {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .custom-button-row {
        display       : flex;
        flex-direction: column;
    }

    .custom-button-row .save-btn {
        order: 1;
        /* Show Save first */
    }

    .custom-button-row .back-btn {
        order: 2;
        /* Show Back second */
    }

    .custom-button-row .col-sm-6 {
        width: 100%;
        /* Make both buttons full-width */
    }

    .btn-block {
        width: 100%;
    }
}


/* navbar-top and footer check style  */

.main-navbar .main-nav-top {
    background-color: #002e5c;
    height          : 20px;
}

.main-navbar .main-navigation {
    background-color: #fff;
    height          : 140px;
    box-shadow      : 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.footer-main {
    background-color: #002e5c;
    height          : 545px;
}


/* ==== New update style 27 May 2024 ==== */

.breadcrumb.renew-membership {
    margin-bottom: 0px;
}

.renew-membership-heading {
    font-family   : 'futura_bold';
    font-size     : 16px;
    line-height   : 100%;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom : 20px;
    color         : #000;
}

.important-note {
    width         : 100%;
    border        : 1px solid #E2C653;
    background    : #FFE88B;
    padding       : 10px 10px;
    color         : #000;
    font-family   : 'futura_book';
    font-weight   : 400;
    font-size     : 16px;
    line-height   : 100%;
    letter-spacing: 0;
    margin-bottom : 25px;
}

.important-note span {
    font-family: 'futura_bold';
}

.family-card.renew-membership {
    background-color: #F3F3F3;
    padding         : 0;
    margin-bottom   : 20px;
    border          : 2px solid transparent;
    transition      : 0.3s all ease;
}

.family-card.renew-membership.active {
    border: 2px solid #032f5b;
}

.family-card.renew-membership .fc-header {
    display        : flex;
    flex-direction : row;
    flex-wrap      : nowrap;
    align-items    : center;
    justify-content: space-between;
    gap            : 20px;
    width          : 100%;
    padding        : 20px;
    transition     : 0.3s all ease;
}

.family-card.renew-membership .fc-header .fch-left {
    display    : flex;
    align-items: center;
    gap        : 20px;
}

.family-card.renew-membership .fc-header .checkbox {
    margin-top   : 0;
    margin-bottom: 0;
}

.family-card.renew-membership .fc-header .checkbox input[type="checkbox"] {
    width       : 20px;
    height      : 20px;
    margin-right: 0;
    margin-top  : 0;
    margin-left : 0;
    position    : relative;
    cursor      : pointer;
}

.family-card.renew-membership .fc-header .member-info .member-content {
    color: #00000099;
}

.family-card.renew-membership .fc-header .member-info .member-content .name {
    color: #000;
}

.family-card.renew-membership .fc-header .fee-details {
    display        : flex;
    align-items    : center;
    gap            : 10px;
    transition     : all 0.3s ease;
    justify-content: flex-end;
}

.family-card.renew-membership .fc-header .fee-details .fee-details-sec {
    padding   : 0;
    transition: all 0.3s ease;
}

.family-card.renew-membership .fc-header .fee-details .btn-secondary {
    background     : #002E5C;
    border         : 1px solid #002E5C;
    border-radius  : 4px;
    padding        : 10px 0px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 4px;
    color          : #fff;
    font-family    : 'futura_bold';
    text-transform : uppercase;
    font-size      : 12px;
    line-height    : 16px;
    opacity        : 0;
    transform      : scale(0.95);
    transition     : all 0.4s ease;
    pointer-events : none;
    width          : 0;
    overflow       : hidden;
    box-sizing     : border-box;
}

.family-card.renew-membership .fc-header .fee-details .btn-secondary span.glyphicon {
    position: relative;
}

.family-card.renew-membership .fc-header .fee-details .btn-secondary:hover,
.family-card.renew-membership .fc-header .fee-details .btn-secondary.active {
    background: #fff;
    border    : 1px solid #001f3c;
    color     : #001f3c;
}

.family-card.renew-membership .fc-header .fee-details .update-btn.btnShow {
    opacity       : 1;
    transform     : scale(1);
    pointer-events: auto;
    width         : 200px;
    padding       : 10px 12px;
}

.fee-details:has(.update-btn.btnShow) .fee-details-sec {
    margin-right: 10px;
}

.family-card.renew-membership .fc-header .fee-details .update-btn.btnShow span {
    max-width: 100%;
}

.family-card.renew-membership .fc-header .fee-details .fee-titel {
    color: #00000099;
}

.family-card.renew-membership .fc-header .fee-details .fee-sec {
    color      : #000000;
    font-family: 'futura_bold';
}

.family-card.renew-membership .fc-header .fee-details .fee-sec span {
    color      : #E40707;
    font-family: 'futura_book';
}

.edit-info-form .dashboard-card-intro.form-body {
    border-radius   : 0;
    box-shadow      : none;
    background-color: #f3f3f3;
    border-top      : 2px solid #032f5b;
    padding-bottom  : 0;
}

.dashboard-sec .family-card .fc-header .member-info .member-img.volunteer-img {
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : linear-gradient(82.16deg, #FB4F14 0%, #FFD001 137.15%);
}

.dashboard-sec .family-card .fc-header .member-info .member-img.volunteer-img img.placeholder {
    position     : relative;
    top          : 0;
    left         : 0;
    width        : 50px;
    height       : auto;
    border-radius: 0;
}

.dashboard-form {
    position: relative;
}

.loading-secreen {
    position       : absolute;
    height         : 100%;
    width          : 100%;
    top            : 0;
    left           : 0;
    background     : #ffffffc4;
    z-index        : 999;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #1d2a59;
    display        : none;
}

.loading-secreen .spinner-border {
    animation-duration: .45s;
}

@media (max-width: 1200px) {
    .family-card.renew-membership .fc-header .fee-details {
        flex-direction: column;
    }

    .family-card.renew-membership .fc-header .fee-details .fee-details-sec {
        padding: 0;
    }
}

@media (max-width: 767px) {
    .family-card.renew-membership .fc-header {
        flex-direction: column;
        gap           : 15px;
        align-items   : flex-start;
    }

    .family-card.renew-membership .fc-header .fch-left {
        flex-direction: row-reverse;
        align-items   : flex-start;
    }

    .dashboard-sec .family-card .fc-header .member-info .member-img,
    .modal .modal-header .fc-header .member-info .member-img {
        width : 60px;
        height: 60px;
    }

    .family-card.renew-membership .fc-header .fch-left .member-info {
        flex-direction: row;
    }

    .family-card.renew-membership .fc-header .fee-details {
        flex-direction: row;
    }

    .family-card.renew-membership .fc-header .fee-details .update-btn {
        width  : 100%;
        height : 0;
        padding: 0px;
    }

    .family-card.renew-membership .fc-header .fee-details .update-btn.btnShow {
        width  : 100%;
        height : 100%;
        padding: 10px 12px;
    }

    .dashboard-sec .family-card .fc-header .member-info .member-content,
    .modal .modal-header .fc-header .member-info .member-content {
        gap: 5px;
    }

    .dashboard-sec .family-card .fc-header .member-info .member-content .name {
        font-size: 14px;
    }

    .family-card.renew-membership .fc-header .fee-details {
        width          : 100%;
        flex-direction : column;
        justify-content: center;
    }

    .family-card.renew-membership .fc-header .fee-details .fee-details-sec {
        display        : flex;
        align-items    : center;
        gap            : 10px;
        justify-content: center;
    }

    .fee-details:has(.update-btn.btnShow) .fee-details-sec {
        margin-right: 0;
    }

    .edit-info-form .dashboard-card-intro.form-body {
        padding-top: 0;
    }
}

@media (max-width: 550px) {
    /* .family-card.renew-membership .fc-header .fee-details .fee-sec {
        display: flex;
        flex-direction: column;
    } */
}

.has-error .form-control {
  border-color: #a94442 !important;
}
.has-success .form-control {
  border-color: #3c763d !important;
}